一文读懂JavaScript原型链

见贤思齐

一文读懂JavaScript原型链前言什么是原型链每个对象（Object）都有一个私有属性指向另一个名为原型（prototype）的对象。原型对象也有一个自己的原型，层层向上直到一个对象的原型为null。根据定义，null没有原型，并作为这个原型链（prototypechain）中的最后一个环节。摘自：MDN-继承与原型链说明__proto__实际为[[Prototype]]属性的访问器，为了便于理解，本文以属性代称其访问器实质这里不使用class表达式是因为class表达式实际上是特殊的函数，更类似于将多个操作融合后的语法糖。使用Function来理解更为直观所有代码均已在Chrome浏览器v125.0.6422.142经过结果验证一、名词解释在开始了解原型链之前，先介绍两个名词prototype以及__proto__，举一个简单的例子更为直观定义一个函数Foo，而后创建一个Foo的实例对象o1。function Foo(){}const o1 = new Foo()（一）、原型对象(prototype)[!NOTE]所有的函数都是对象，拥有独有属性prototypeprototype原型对象，是函数的独有属性。该属性指向一个对象。当函数（如：Foo）被实例化成一个对象（如：o1）后，实例对象（o1）可以访问到函数（Foo）的原型对象(prototype)如：在Foo的prototype上增加属性propA，其值为'p1'，可以发现在o1上也可以获取到属性propA，其值同样为'p1'Foo.prototype.propA = 'p1'o1.propA // 'p1'那么o1是如何获取到Foo.prototype上的方法的呢，这就要介绍另一个概念，隐式原型__proto__（二）、隐式原型(__proto__)[!Note]所有非内置对象都是函数的实例，拥有独有属性__proto____proto__隐式原型，是对象的独有属性。对象（如：o1）的__proto__属性指向其构造函数（如：Foo）的原型对象(prototype)。所有非内置对象都是函数的实例，同时拥有一个构造函数。如：对象o1的构造函数为Foo内置对象如：Function、Date、Array、Object、Math、JSON等。如：o1上访问到的属性propA实际上是其构造函数Foo的prototype的属性propA。这里将Foo.prototype.propA设置为一个对象，来防止因基本类型的值比较方式导致结论误差o1.constructor === Foo // trueFoo.prototype.propA = {}o1.propA // {}o1.propA === o1.__proto__.propA // trueo1.__proto__.propA === Foo.prototype.propA // true二、原型链在介绍何为prototype以及__proto__后，接下来就开始介绍原型链了。仍以之前使用的例子来进行原型链的介绍function Foo(){}const o1 = new Foo()（一）、实例化关系首先一起来分析例子的实例化关系。可在Chrome中测试如下代码o1.constructor === Foo // trueFoo.constructor === Function // trueFunction.constructor === Function // true根据验证结果可分析出如下图结论o1的数据类型是对象，是函数Foo的实例化Foo的数据类型既是函数也是对象，也是Function的实例化Function既是函数也是对象，其是自身Function的实例化（二）、独有属性分析在实例化关系的基础上，继续分析每一级的属性关系。其中绿色代表函数独有属性，红色代表对象独有属性o1的数据类型为对象，拥有独有属性__proto__，由于prototype是函数独有属性，所以o1上的prototype为undefinedFoo的数据类型既是函数也是对象，所以其同时拥有属性prototype和__proto__Function的数据类型既是函数也是对象，所以其同时拥有属性prototype和__proto__（三）、隐式原型引用关系[!NOTE]对象的隐式原型(__proto__)属性指向其构造函数(constructor)的原型对象(prototype)o1.__proto__指向其构造函数Foo的原型对象(prototype)Foo.__proto__的指向其构造函数Function的原型对象(prototype)由于Function的构造函数是其自身，所以Function.__proto__指向其自身的原型对象(prototype)由于函数的原型对象(prototype)属性的数据类型为对象，因此同样具有对象的独有属性__proto__。如下图默认情况下，对象隐式原型(__proto__)指向其构造函数的原型对象(prototype)，那么Foo.prototype和Function.prototype的构造函数有指向哪里呢？[!NOTE]所有函数的原型对象(prototype)的构造函数均指向其自身可通过以下测试代码进行验证Foo.prototype.constructor === Foo // trueFunction.prototype.constructor === Function // true内置函数对象的原型对象(prototype)，其隐式原型(__proto__)也指向其自身RegExp.prototype.constructor === RegExp // trueDate.prototype.constructor === Date // trueMap.prototype.constructor === Map // trueArray.prototype.constructor === Array // trueNumber.prototype.constructor === Number // trueObject.prototype.constructor === Object // true然而一些内置对象由于其没有函数特征，所以其原型对象(prototype)属性为undefined，其自身的constructor指向Object。Math.prototype // undefinedMath.constructor === Object // trueJSON.prototype // undefinedJSON.constructor === Object // true言归正传，由于所有函数的原型对象(prototype)的构造函数均为其自身，则如若Foo.prototype.__proto__指向其构造函数的prototype，即Foo.prototype.__proto__指向Foo.prototype。那么原型链的查找将进入无限循环。为了避免这个问题，则将所有函数原型对象(prototype)的隐式原型(__proto__)均指向Object.prototype。可通过以下代码进行验证：Foo.prototype.__proto__ === Object.prototype // trueFunction.prototype.__proto__ === Object.prototype // true这里欠缺的有两个点Object既是函数也是对象，所以其拥有对象的独有属性(__proto__)，那么其隐式原型(__proto__)指向哪里Object.prototype的数据类型为一个对象，如果其隐式原型(__proto__)仍指向Object.prototype，那么原型链的查找将进入无限循环，那么其指向哪里针对第1点，Object自身既是函数又是对象，其作为对象的独有属性隐式原型(__proto__)应指向其构造函数的原型对象(prototype)。Object对象的构造函数为Function，所以其隐式原型(__proto__)指向Function.prototype。可通过以下测试代码进行验证Object.constructor === Function // trueObject.__proto__ === Function.prototype // true因此其指向关系如下图：针对第2点，文章起始什么是原型链已经给出了定义。原型对象也有一个自己的原型，层层向上直到一个对象的原型为null因此其最终指向为null三、总结：对象通过隐式原型(__proto__)属性指向其构造函数的原型对象(prototype)，进而通过原型对象(prototype)的隐式原型(__proto__)属性指向更高层级的原型对象(prototype)，最终指向null而停止所形成的链条，则称其为原型链。想了解更多转转公司的业务实践，点击关注下方的公众号吧！