JavaScript 原型链

小灰灰 2020-06-01 16:19 824阅读 0赞

# JavaScript 原型链

原型链是JavaScript中最重要的概念之一。

对于它的深刻理解是必须的，否则开发工作将难以进行。

很多初学者感觉某一个概念难以理解，其实并不是概念本身有多难。

而是对与此概念相关的周边知识没有良好的掌握。

理解原型链关键在于对于prototype 与 __proto__掌握。

**一.什么是原型链：**

对于铁链大家应该很熟悉，图示如下：

![](/images/1591028296587.png)

上面是生活中常见的铁链，通过某种方式将铁环串接在一起。

同样的道理，原型链是通过某种方式将prototype原型对象串接起来。

**二.如何将原型串接起来：**

构造函数具有prototype原型对象，它所创建的实例会继承此原型对象。

代码实例如下：

```javascript
function Antzone(webName,address){
  this.webName=webName;
  this.address=address;
}  
Antzone.prototype.age=6;
let ant=new Antzone("蒲公英云","青岛市南区");
console.log(ant.age);
```

代码分析如下：

（1）.构造函数Antzone具有prototype原型对象，并为此对象添加一个age属性。

（2）.由构造函数创建的对象ant会继承原型中的属性/方法。

（3）.对象实例还具有__proto__属性，它指向创建此对象实例的构造函数的prototype原型对象。

代码验证如下：

```javascript
function Antzone(webName,address){
  this.webName=webName;
  this.address=address;
}  
Antzone.prototype.age=6;
let ant=new Antzone("蒲公英云","青岛市南区");
console.log(ant.__proto__===Antzone.prototype);
```

返回值为true，印证了结论的正确性，图示如下：

![](/images/1591028278886.png)

ant通过__proto__属性指向构造函数的原型对象。

原型对象也是一个普通对象，也具有__proto__属性，指向创建原型对象的构造函数的prototype对象。

简单图示如下：

![](/images/1591028266250.png)

这样一层一层将原型对象串接成一个原型链，上面仅是一个演示，还可以更长。

当在一个对象上查找指定属性或者方法的时候，如果没有查找到，那么就会在原型链上一层一层查找。

原型链的最后的终点是Object.prototype，因为Object.prototype.__proto__指向null。

发表评论取消回复

表情：

评论列表（有 0 条评论，824人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript原型链

JavaScript原型链 1. 原型链是什么? 2. 常用方法 2.1 通过isPrototypeOf确定对象之间的关系 2.2

傷城~/ 2022年12月27日 08:27/ 0 赞/ 81 阅读

相关 javascript原型与原型链

javascript原型与原型链 ===================================================================

蔚落/ 2022年12月24日 04:57/ 0 赞/ 245 阅读

相关 JavaScript原型与原型链

原型任何一个对象都有原型 1.创建一个对象 function Preson () { this.name = 'zs'; thi

偏执的太偏执、/ 2022年12月19日 14:24/ 0 赞/ 200 阅读

相关 JavaScript原型&原型链

原型链图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

傷城~/ 2022年08月31日 07:23/ 0 赞/ 249 阅读

相关 JavaScript原型链

一坑未填，又起一坑前记：尽管es6已经实现了class，但是原型链也伴随着我不少时间了，自己捋顺捋顺。一个自定义的构造函数第一次写一个JavaScript的类长

朱雀/ 2022年06月10日 09:22/ 0 赞/ 204 阅读

相关 JavaScript原型与原型链

JavaScript原型与原型链原型 1、每个函数都有一个prototype属性，它默认指向一个Object空对象(即称为: 原型对象)，原型对象中有一个cons

女爷i/ 2022年05月19日 04:54/ 0 赞/ 303 阅读

相关 JavaScript原型到原型链

强烈推荐作者系列教程：[https://segmentfault.com/a/1190000008959943][https_segmentfault.com_a_119000

妖狐艹你老母/ 2022年04月14日 02:50/ 0 赞/ 334 阅读

相关 javascript之原型，原型链

1.定义：原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。 2.利用原型特点

╰半夏微凉°/ 2022年03月15日 12:04/ 0 赞/ 302 阅读

相关 JavaScript原型链

作者： kim 来源： kimshareclub微信公众号一图了解JavaScript原型链 ![在这里插入图片描述][watermark_type_ZmFuZ3p

本是古典何须时尚/ 2021年09月17日 02:46/ 0 赞/ 384 阅读

相关 JavaScript 原型链

JavaScript 原型链原型链是JavaScript中最重要的概念之一。对于它的深刻理解是必须的，否则开发工作将难以进行。很多初学者感觉某一个概念难以理解，其...

小灰灰/ 2020年06月01日 16:19/ 0 赞/ 825 阅读