JS中的prototype、__proto__与constructor是怎么用的

本篇文章给大家分享的是有关JS中的prototype、__proto__与constructor是怎么用的,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

创新互联建站坚信:善待客户,将会成为终身客户。我们能坚持多年,是因为我们一直可值得信赖。我们从不忽悠初访客户,我们用心做好本职工作,不忘初心,方得始终。10年网站建设经验创新互联建站是成都老牌网站营销服务商,为您提供网站设计、成都网站建设、网站设计、H5技术、网站制作、品牌网站设计、成都微信小程序服务,给众多知名企业提供过好品质的建站服务。

1. 前言
  作为一名前端工程师,必须搞懂JS中的prototype、__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点,__proto__属性的两边是各由两个下划线构成(这里为了方便大家看清,在两下划线之间加入了一个空格:_ _proto_ _),实际上,该属性在ES标准定义中的名字应该是[[Prototype]],具体实现是由浏览器代理自己实现,谷歌浏览器的实现就是将[[Prototype]]命名为__proto__,大家清楚这个标准定义与具体实现的区别即可(名字有所差异,功能是一样的)。本文基于谷歌浏览器(版本 72.0.3626.121)的实验结果所得。
   现在正式开始! 让我们从如下一个简单的例子展开讨论,并配以相关的图帮助理解:
 

function Foo() {...};
let f1 = new Foo();

以上代码表示创建一个构造函数 Foo(),并用new关键字实例化该构造函数得到一个实例化对象 f1。这里稍微补充一下 new 操作符将函数作为构造器进行调用时的过程:函数被调用,然后新创建一个对象,并且成了函数的上下文(也就是此时函数内部的this是指向该新创建的对象,这意味着我们可以在构造器函数内部通过this参数初始化值),最后返回该新对象的引用。虽然是简简单单的两行代码,然而它们背后的关系却是错综复杂的,如下图所示:
JS中的prototype、__proto__与constructor是怎么用的

看到这图别怕,让我们一步步剖析,彻底搞懂它们!
  图的说明:右下角为图例,红色箭头表示__proto__属性指向绿色箭头表示prototype属性的指向棕色实线箭头表示本身具有的constructor属性的指向棕色虚线箭头表示继承而来的constructor属性的指向蓝色方块表示对象,浅绿色方块表示函数(这里为了更好看清,Foo()仅代表是函数,并不是指执行函数Foo后得到的结果,图中的其他函数同理)。图的中间部分即为它们之间的联系,图的最左边即为例子代码。


2. _ _ proto _ _ 属性


  首先,我们需要牢记两点:①__proto__和constructor属性是对象所独有的;② prototype属性是函数所独有的。但是由于JS中函数也是一种对象,所以函数也拥有__proto__和constructor属性,这点是致使我们产生困惑的很大原因之一。上图有点复杂,我们把它按照属性分别拆开,然后进行分析:JS中的prototype、__proto__与constructor是怎么用的

3. prototype属性

  第二,接下来我们看 prototype 属性:JS中的prototype、__proto__与constructor是怎么用的

 JS中的prototype、__proto__与constructor是怎么用的

JS中的prototype、__proto__与constructor是怎么用的

 JS中的prototype、__proto__与constructor是怎么用的

以上就是JS中的prototype、__proto__与constructor是怎么用的,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


分享题目:JS中的prototype、__proto__与constructor是怎么用的
文章分享:http://bzwzjz.com/article/psoioh.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 自适应网站建设 成都网站制作 网站建设公司 网站建设改版 LED网站设计方案 成都网站建设 成都网站设计 温江网站设计 高端网站设计 四川成都网站建设 网站设计制作报价 企业网站设计 定制网站设计 成都网站建设公司 泸州网站建设 成都网站建设 外贸网站建设 品牌网站建设 高端品牌网站建设 网站建设公司 达州网站设计 成都网站建设公司