【JavaScript】面向对象之原型

JS(JavaScript)
一.原型
1.概括

• 原型是什么

Function对象包含数学方法的函数，函数定义在protoype属性，初始值为一个空对象
原型的属性和方法不会影响函数自身的属性和方法

// Function类型的属性 -> 所有函数都具有的属性
console.log(Function.prototype);
// 定义函数
function fn(){
    console.log('this is function');
}
// 原型的默认值是空对象
console.log(fn.prototype);
// 函数包含构造函数 -> 所有引用类型其实都是构造函数
console.log(Number.prototype);
console.log(Object.prototype);
var result = Object.getOwnPropertyDescriptor(Object.prototype, 'constructor');
console.log(result);

• 获取原型

通过两种方式，来设置共存的属性和方法
构造函数的prototype属性
Object对象的getPrototype

function fn(){
    console.log('this is function');
}
// 使用访问对象的属性语法结构
console.log(fn.prototype);
console.log(fn['prototype']);
// Object类型提供getPrototypeOf()方法
console.log(Object.getPrototypeOf(fn));

• 原型的属性和方法

通过一下两种方式
单独定义原型的属性和方法
直接型定义个新对象

function fn(){
    console.log('this is function');
}
// 变量proto也是一个空对象
// var proto = fn.prototype;

// 新增属性或方法
// proto.name = '犬夜叉';
fn.prototype.name = '犬夜叉';
console.log(fn.prototype);
// defineProperty()
Object.defineProperty(fn.prototype, 'age', {
    value : 18,
    enumerable : true
});
console.log(fn.prototype);

2.原型属性

• 自有属性与原型属性

自有属性；对象引用增加属性，独立的属性函数本身的属性
原型属性；通过新增属性和方法并定义原型的属性

// 定义构造函数
function Hero(name){
    // 构造函数本身的属性 -> 自有属性
    this.name = name;
    this.sayMe = function(){
        console.log('this is function');
    }
}
// 通过构造函数Hero的prototype新增属性或方法
// 通过原型所定义的属性 -> 原型属性
Hero.prototype.age = 18;
/*
    通过构造函数Hero创建对象时
    * 不仅具有构造函数的自有属性
    * 还具有构造函数的原型属性
 */
var hero = new Hero('犬夜叉');

console.log(hero.name);// 犬夜叉
console.log(hero.age);// 16

var hero2 = new Hero('桔梗');
console.log(hero2.name);// 桔梗
console.log(hero2.age);// 16
// 为对象hero新增age属性
// hero.age = 80;
// console.log(hero.age);// 80
//
// console.log(hero);
//
// console.log(hero2.age);// 16

Hero.prototype.age = 80;

console.log(hero.age);
console.log(hero2.age);

• 检测自有或原型属性

有两种方式以hasOwnPrototype()来检测对象是否指定自有属性
以in关键字检测对象及原型链是否有属性

function Hero(){
    // this.name = '犬夜叉';// 自有属性
}
// Hero.prototype.name = '桔梗';

var hero = new Hero();
/*
  Object.hasOwnProperty(prop)方法
  判断当前指定属性是否为自有属性
  
  prop - 表示指定属性名称
  返回值 - 布尔值
  true - 表示存在指定的自有属性
  false - 表示不存在指定的自有属性
 */
// console.log(hero.hasOwnProperty('name'));// true
/*
  使用in关键字检测对象的属性
  作用 - 判断对象中是否存在指定属性(自有属性或原型属性)
  返回值 - 布尔值
  true - 表示存在指定的属性
  false - 表示不存在指定的属性
 */
console.log('name' in hero);

• 扩展属性或方法

以原型设置指定构造函数和对象扩展其属性和方法

Object.prototype.sayMe = function () {
    console.log('you my sayMe function')
}
var obj = new Object();

obj.sayMe();

Array.prototype.inArray = function (color) {

    for(var i = 0, len = this.length; i < len; i++){
        if(this[i] === color){
            return true;
        }
    }
    return false;
}
var arr = ["red", "green","blue"];
console.log(arr.inArray("yellow"));
console.log(arr.inArray("red"));

• 重写原型属性

将构造函数和对象，以自有属性重写远得属性

//定义构造函数
function Hero() {
    this.name = '犬夜叉'
}
Hero.prototype.name = '桔梗';
//构造函数原型
var hero = new Hero();
// 构造函数创建对象
console.log(hero.name);//犬夜叉
//自有属性与原型属性同名，默认访问是自有属性，自有属性优先级别高于原型属性
delete hero.name;
//删除对象属性
console.log(hero.name);//桔梗
//重新访问对象属性

• isPrototypeOF()方法

//通过初始化方式定义对象
var obj = {
    name : '犬夜叉'
}
function Hero() {}
//定义构造函数
Hero.prototype = obj;
//将对象obj赋值给构造函数Hero原型
var hero = new Hero();
//通过构造函数创建对象
var result = obj.isPrototypeOf(hero);
//判断指定对象是否是另一个对象原型
console.log(result);

3.扩展内建对象
内置对象的prototype属性设置扩展属性和方法

Object.prototype.sayMe = function () {
    console.log('you my sayMe function')
}
var obj = new Object();

obj.sayMe();

Array.prototype.inArray = function (color) {

    for(var i = 0, len = this.length; i < len; i++){
        if(this[i] === color){
            return true;
        }
    }
    return false;
}
var arr = ["red", "green","blue"];
console.log(arr.inArray("yellow"));
console.log(arr.inArray("red"));