横山专业做网站建设的公司,网页查询快捷键,长沙外贸建站哪里好,上海鹭城建设集团网站转载自 帮你彻底搞懂JS中的prototype、__proto__与constructor#xff08;图解#xff09; 作为一名前端工程师#xff0c;必须搞懂JS中的prototype、__proto__与constructor属性#xff0c;相信很多初学者对这些属性存在许多困惑#xff0c;容易把它们混淆#xff…转载自 帮你彻底搞懂JS中的prototype、__proto__与constructor图解 作为一名前端工程师必须搞懂JS中的prototype、__proto__与constructor属性相信很多初学者对这些属性存在许多困惑容易把它们混淆本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点__proto__属性的两边是各由两个下划线构成这里为了方便大家看清在两下划线之间加入了一个空格_ _proto_ _实际上该属性在ES标准定义中的名字应该是[[Prototype]]具体实现是由浏览器代理自己实现谷歌浏览器的实现就是将[[Prototype]]命名为__proto__大家清楚这个标准定义与具体实现的区别即可名字有所差异功能是一样的。
本文基于谷歌浏览器版本 72.0.3626.121的实验结果所得。
我们从如下一个简单的例子展开讨论并配以相关的图帮助理解
function Foo() {...};
let f1 new Foo();以上代码表示创建一个构造函数Foo()并用new关键字实例化该构造函数得到一个实例化对象f1。虽然是简简单单的两行代码然而它们背后的关系却是错综复杂的如下图所示 看到这图别怕让我们一步步剖析彻底搞懂它们
图的说明右下角为图例红色箭头表示__proto__属性指向、绿色箭头表示prototype属性的指向、棕色实线箭头表示本身具有的constructor属性的指向棕色虚线箭头表示继承而来的constructor属性的指向蓝色方块表示对象浅绿色方块表示函数这里为了更好看清Foo()仅代表是函数并不是指执行函数Foo后得到的结果图中的其他函数同理。图的中间部分即为它们之间的联系图的最左边即为例子代码。
首先我们需要牢记两点①\_\_proto\_\_和constructor属性是对象所独有的② prototype属性是函数所独有的。但是由于JS中函数也是一种对象所以函数也拥有__proto__和constructor属性这点是致使我们产生困惑的很大原因之一。上图有点复杂我们把它按照属性分别拆开然后进行分析 第一这里我们仅留下 __proto__属性它是对象所独有的可以看到__proto__属性都是由一个对象指向一个对象即指向它们的原型对象也可以理解为父对象那么这个属性的作用是什么呢它的作用就是当访问一个对象的属性时如果该对象内部不存在这个属性那么就会去它的__proto__属性所指向的那个对象可以理解为父对象里找如果父对象也不存在这个属性则继续往父对象的__proto__属性所指向的那个对象可以理解为爷爷对象里找如果还没找到则继续往上找…直到原型链顶端null此时若还没找到则返回undefined由以上这种通过__proto__属性来连接对象直到null的一条链即为我们所谓的原型链。 第二接下来我们看 prototype 属性 prototype属性别忘了一点就是我们前面提到要牢记的两点中的第二点它是函数所独有的它是从一个函数指向一个对象。它的含义是函数的原型对象也就是这个函数其实所有函数都可以作为构造函数所创建的实例的原型对象由此可知f1.__proto__ Foo.prototype它们两个完全一样。那prototype属性的作用又是什么呢它的作用就是包含可以由特定类型的所有实例共享的属性和方法也就是让该函数所实例化的对象们都可以找到公用的属性和方法。任何函数在创建的时候其实会默认同时创建该函数的prototype对象。 最后我们来看一下 constructor 属性 constructor属性也是对象才拥有的它是从一个对象指向一个函数含义就是指向该对象的构造函数每个对象都有构造函数本身拥有或继承而来继承而来的要结合__proto__属性查看会更清楚点如下图所示从上图中可以看出Function这个对象比较特殊它的构造函数就是它自己因为Function可以看成是一个函数也可以是一个对象所有函数和对象最终都是由Function构造函数得来所以constructor属性的终点就是Function这个函数。 这里解释一下上段中“每个对象都有构造函数”这句话。这里的意思是每个对象都可以找到其对应的constructor因为创建对象的前提是需要有constructor而这个constructor可能是对象自己本身显式定义的或者通过__proto__在原型链中找到的。而单从constructor这个属性来讲只有prototype对象才有。每个函数在创建的时候JS会同时创建一个该函数对应的prototype对象而函数创建的对象.__proto__ 该函数.prototype该函数.prototype.constructor该函数本身故通过函数创建的对象即使自己没有constructor属性它也能通过__proto__找到对应的constructor所以任何对象最终都可以找到其构造函数null如果当成对象的话将null除外。如下 总结一下
我们需要牢记两点①__proto__和constructor属性是对象所独有的② prototype属性是函数所独有的因为函数也是一种对象所以函数也拥有__proto__和constructor属性。 2.__proto__属性的作用就是当访问一个对象的属性时如果该对象内部不存在这个属性那么就会去它的__proto__属性所指向的那个对象父对象里找一直找直到__proto__属性的终点null然后返回undefined通过__proto__属性将对象连接起来的这条链路即我们所谓的原型链。prototype属性的作用就是让该函数所实例化的对象们都可以找到公用的属性和方法即f1.__proto__ Foo.prototype。constructor属性的含义就是指向该对象的构造函数所有函数此时看成对象了最终的构造函数都指向Function。
