原型及原型链

2017-01-09

原型

概念

每个函数都有一个prototype属性，这个属性指向原型对象,每个原型对象都会有一个属性:constructor,这个属性指向函数,例如:

function Person() {
}

Person.prototype.name = "me";
Person.prototype.age = 21;

console.log(Person.prototype);  //{name: "me", age: 123, constructor: ƒ},指向Person的原型对象
console.log(Person.prototype.constructor);  //ƒ Person() {},指向Person函数

每个实例都有一个[[Prototype]]属性指向其原型对象,在Firefox、Safari、Chrome中为__proto__,通过__proto__可以访问实例的原型对象

isPrototypeOf()、Object.getPrototypeOf()

isPrototypeOf()用于检测实例的原型对象是否是指定的原型对象,返回值为Boolean类型,例如:console.log(Person.protorype.isPrototype(person1);
Object.getPrototypeOf()用于获取对象的原型,例如:console.log(Object.getPrototypeOf(person1); //返回person1的原型

搜索属性

在JavaScript中,搜索一个属性首先搜索实例中存在的属性,如果未搜索到就查找实例的原型对象,为实例添加属性时将屏蔽原型对象中的同名属性,使用delete操作符删除实例中的属性后,就能重新访问原型中的同名属性

hasOwnProperty()、in操作符、Object.getOwnPropertyDescriptor(s)

hasOwnProperty(),正如方法名称:”自己的属性”,所以该方法用于检测属性是否存在于实例中,若存在于实例中则返回true,存在于原型中或属性不存在返回false
in操作符可以访问到实例中或原型中的属性,与hasOwnProperty()方法结合使用可以知道属性是实例中的属性还是原型中的属性,例如:

var person1 = new Person();
person1.name = "hello"; //赋值后屏蔽了原型中的name属性

console.log("name" in person1);  //true

for(var i in person1) {//可枚举的属性
    console.log(i);  //name、age  访问到了所有的实例、原型中属性
}

Object.getOwnPropertyDescriptor(s)方法用于获取实例属性的描述符,若要获取原型对象的属性描述符就需要在原型对象上调用该方法,例如:

1
2
3

var person1Str = Object.getOwnPropertyDescriptors(person1);

var personStr = Object.getOwnPropertyDescriptors(Person.prototype);

原型链

概念

原型对象包含另一个原型,另一个原型又包含另一个原型,依次递推,实例和原型构成的结构就是原型链,原型链主要用于实现继承