js中的原型链

115 阅读2分钟

原型链

每一个对象都有原型,原型本身又是对象,所以原型又有原型,以此类推形成一个链式结构,称为原型链

原型对象 : 任何函数创建的时候,系统会自动创建与之对应的对象,称之为原型对象

image.png

image.png

1.要想看到函数的原型对象console.log打印不出来,必须用console.dir

image.png

image.png 可以给原型对象添加方法

image.png

image.png 创建的实例对象可以调用原型对象中的方法

为什么实例对象可以直接访问原型中的成员,本质是通过__proto__来访问的 __proto__ : 属于实例对象,指向原型对象 * 这个属性不是web标准属性,在实际开发中必须要省略。 但是在学习阶段为了理解,可以使用。

image.png

image.png p1.__proto__ === Person.prototype

image.png

constructor : 属于原型对象,指向构造函数 作用: 可以让实例对象知道自己是被哪个构造函数创建的

查看 构造函数、原型对象、实例对象三者关系 ,只需要两行代码

image.png

可以画一张图来理解就是:

prototype : 属于构造函数, 指向原型对象

__proto__ : 属于实例对象, 指向原型对象 让实例对象直接访问原型的成员

constructor : 属于原型对象,指向构造函数 可以让实例对象知道自己是被哪个构造函数创建的

image.png

然而原型也是对象,也有自己的原型,以此类推形成链式结构

image.png 对象访问原型链规则 : 就近原则 对象优先访问自己的属性,自己没有才会访问原型,原型也没有就访问原型的原型,

image.png

可以看一下p1原型的原型

image.png

image.png p1原型的原型是object

image.png

image.png Object的原型对象也有__proto__属性指向nullnull是原型链的顶端

总结

  • 一切对象都是继承自Object对象,Object 对象直接继承根源对象null
  • 一切的函数对象(包括 Object 对象),都是继承自 Function 对象
  • Object 对象直接继承自 Function 对象
  • Function对象的__proto__会指向自己的原型对象,最终还是继承自Object对象