您的位置:首页> 前端教程> JS教程
文章导航

JavaScript 原型链

2018-11-23 17:34| 作者: admin| 查看: 1108| 评论: 1|来自: 蚂蚁部落

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

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

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

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

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

两个知识点可以参阅如下两篇文章:

(1).prototype参阅JavaScript prototype 原型一章节。

(2).__proto__参阅 __proto__属性一章节。

一.什么是原型链:

对于铁链大家应该很熟悉,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/23/173534vswvuerer0m7nu9v.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

同样的道理,原型链是通过某种方式将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);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/23/173605zxq0l0l6ka110zkv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(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);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/23/173635ui3ei60we33ioidh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

aid[2561]

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

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

简单图示如下:

aid[2562]

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

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

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

2

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

发表评论

最新评论

引用 前端小咸鱼 2019-10-10 10:04

查看全部评论(1)

返回顶部