JS原型链

prototype,称为原型属性,这个属性是一个指针,指向一个对象,这个对象的用途就是包含所有实例共享的属性和方法(我们把这个对象叫做原型对象),原型对象中有个属性constructor,属性中包含着一个指针,指向原型对象的构造方法。

对象具有属性__proto__,称为隐式原型。一个对象的隐式原型指向构造该对象的构造函数的原型(原型对象)。

 

  • Prototype属性

 


 

prototype是函数才有的一个属性。

1 function Person() {}
2 Person.prototype.name = 'AAA';
3 var person1 = new Person();
4 var person2 = new Person();
5 console.log(person1.name) // =>AAA
6 console.log(person2.name) // =>AAA
每个函数都有一个prototype属性,该属性指向一个对象,这个对象正是调用该构造函数而创建的实例的原型,也就是这个例子中person1和person2的原型。(原型:每一个js对象创建的时候都有与之对应的另外一个对象,该对象就是原型,且每个对象都可以从原型“继承”属性)。 这里的继承:比如给Person的原型赋name属性,实例person1和person2就可以继承name属性。
  • __proto__属性


 

1.上面的构造函数Person可通过prototype指向原型,实例化对象比如person也可以指向原型,看下面的例子:

1 function Person() {}
2 var person = new Person();
3 console.log(person.__proto__ === Person.prototype); // =>true

这里可见实例化对象person通过__proto__指向原型

2.当读取实例属性时候,如果找不到,就去继承原型中的属性,如果还查不到,就再去找原型的原型,知道找到最顶层为止。看下面的例子:

1 function Person() {}
2 Person.prototype.name = 'AAA';
3 var person = new Person();
4 console.log(person.name) // =>AAA
这里面的首先给实例原型赋属性值name为“Kevin”,实例化本身的name为空,所以访问的时候,就会往上一层寻找name属性,即通过prototype赋的name值,这时的值是“Kevin“。
那这里原型的值是通过__proto__属性被实例化对象继承的。
3.由于__proto__是任何对象都有的属性,所以会形成一条__proto__的链条,递归访问__proto__必须最终到头,且值为null。当js引擎查找对象属性时,先在本身原型查找,若不存在属性,则会在原型链查找。看下面的例子:
 1 var Person = function(){}; 
 2 var person = new Person(); 
 3 console.log(person.__proto__ === Person.prototype)// =>true
 4 console.log(person.__proto__.constructor === Person) // =>true
 5 console.log(Person.__proto__ === Function.prototype) // =>true
 6 console.log(Person.__proto__.constructor === Function) // =>true
 7 console.log(Function.__proto__ === Function.prototype) // =>true
 8 console.log(Object.__proto__ === Object.prototype) // =>false
 9 console.log(Object.__proto__ === Function.prototype) // =>true
10 console.log(Function.__proto__.constructor === Function) // =>true
11 console.log(Function.__proto__.__proto__) // =>object
12 console.log(Function.__proto__.__proto__ === person.__proto__.__proto__) // =>true
13 console.log(person.__proto__.__proto__.__proto__ === null) // =>true

从上面的例子可以看出,prototype对象也有__proto__属性,向上追溯一直到null。

 

posted @ 2019-06-23 11:43  计算机-前端小白  阅读(266)  评论(0编辑  收藏  举报