一图看懂JS的原型链

话不多说,直接上图!
一图看懂JS的原型链_第1张图片
请记住以下几个原则:

  • 1、对象内部具有[[Prototype]]属性,该属性不可直接访问,浏览器通过__proto__(两条‘_’)可以让用户读写该内部属性,最重要的是,该属性指向创建本对象的原型对象。
  • 2、每个原型对象内部都有一个独有属性constructor,指向该原型对象的构造函数。
  • 3、原型对象也是对象,因此它也有自己的__proto__属性,最终会指向Object.prototype

记住了?很好,现在开始根据这三个原则去理解原型链图。
一图看懂JS的原型链_第2张图片

  • 线(1):person1是Person的实例对象,根据原则1,person1的__proto__属性指向person1的原型对象,所以person1.__proto__ = Person.prototype
  • 线(2):根据原则2,原型对象Person.prototypeconstructor属性指向它的构造函数,也就是Person
  • 线(3):原型对象也是对象,它也有自己的原型链,因此它的__proto__属性指向创建它的原型对象,也就是Object.prototype
  • 线(4)不用解释了吧
  • 线(5)同线(2)
  • 线(6)同线(4)
  • 线(7)本质上,Object也是由Function创建的,因此Object.prototype指向Fucntion.prototype

一图看懂JS的原型链_第3张图片

  • 线(8)同线(4)
  • 线(9)Obect.prototype对象和Function.prototype对象都是浏览器创建的,它们并非谁的实例。通过__proto__属性将二者联系起来,从而使得函数也是对象。

一图看懂JS的原型链_第4张图片

  • 线(10)既然函数也是对象,那么构造函数Person也有自己的__proto__属性,而所有的函数本质上都可以写成new Function('...')的形式,因此构造函数PersonFunction的实例,所以Person.__proto__指向Function.prototype
  • 线(11)同线(4)
  • 线(12),有了Function.prototype后,才有了Function。而为了不产生混淆,就将Function.proto指向Function.prototype

一图看懂JS的原型链_第5张图片

综上,我们可以有以下结论:

  1. 并非所有的对象都是实例,但是实例却都是对象。如Function.prototype是对象,但却并非谁的实例。
  2. 实例对象和原型对象之间、原型对象和构造函数之间都有直接联系,而实例对象和构造函数没有直接联系。如person1Person.prototype有直接联系,Person.prototypePerson有直接联系,但person1Person没有直接联系。
  3. 实例对象内部的__proto__属性指向创建该对象的原型对象,而原型对象也是对象,它也有自己的原型对象并继承其属性,这就构成了原型对象链

一图看懂JS的原型链_第6张图片

你可能感兴趣的:(原型链,javascript)