对JavaScript原型、原型链的理解

发布时间 2023-08-08 16:46:23作者: ridiculousknight

在JavaScript中,每个实例对象都有一个隐藏的[[prototype]]属性,它要么为 null,要么就是对另一个对象的引用。被引用的对象被称为原型对象原型

主流浏览器中,用__proto__代表[[prototype]]属性。

实例的构造函数有一个原型属性prototype,与实例的__proto__属性指向同一个对象。
同时,原型对象的constructor 指向构造函数本身。

image

当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会根据__proto__向该对象的原型查找,如果还是没有,就向原型的原型继续查找,依次层层向上搜索,直到找到一个名字匹配的属性或查到null。这就是原型链
image

原型链遵从以下两个准则

  1. Foo.prototype.constructor == Foo

    // 准则1:原型对象的 constructor 属性指向构造函数本身

  2. f1.__proto__ == Foo.prototype

    // 准则2:实例的 proto 属性指向原型对象

无论何时,只要创建一个函数,就会按照特定的规则为这个函数创建一个 prototype 属性(指向原型对象)。
默认情况下,所有原型对象自动获得一个名为 constructor 的属性,指回与之关联的构造函数。
——《JavaScript高级程序设计》


原型链的顶层:null (或者Object.prototype,如果不考虑null的话)
image


  • __proto__每个对象都有的一个属性,用于指向该对象的原型;(该属性已被弃用)
  • prototype函数对象独有的属性,用于指向该函数的原型,它的作用是给该函数定义的实例对象提供共享的属性和方法
  • constructor指向创造该对象的构造函数。此属性的值是对函数本身的引用,而不是一个包含函数名称的字符串
    image
    image


P.S. 从notion搬运到博客园好麻烦......图片要在notion下载然后在这边上传,格式也有不一致的地方
也许已经有这方面的自动化工具了,下次试试。实在不行咱还能自己写