原型链

作者: 我才是大田田 | 来源:发表于2018-01-27 16:11 被阅读10次

一、写在最前面

刚学原型链总被搞蒙,什么__proto__,prototype,有点乱。自己画了图便于自己理解记忆。

二、原型链例子

刚开始学习数组时,知道数组有许多自带的方法,学了原型链之后发现原来是通过原型链来继承这些方法的。
首先记住,被构造的实例有__proto__属性,构造它的函数有prototype属性。

1、例子a

看下面的简单代码:

function People (name){
  this.name = name;
}
People.prototype.walk = function(){
  console.log(this.name + ' is walking');  
}
var p1 = new People('大田田1');
var p2 = new People('大田田2');

代码解释:
(1)People是自定义的构造函数,定义了对象的“name”属性,并把这个属性赋给了this对象。
(2)在People的prototype上添加了walk方法,输出this.name is walking
(3)创建两个新实例p1和p2,给它们的“name”属性赋值。

结果分析:
p1和p2作为People的两个实例,在创建时只赋了name属性值,并没有添加walk方法,但是p1.walk()和p2.walk()都能正确输出。原因是给People.prototype上添加了walk方法。

这就涉及到下面这张原型图了。


原型图-jianshu.png

开头说到,被构造的实例有__proto__属性,构造它的函数有prototype属性。
(1)左上角的People是自定义构造函数,里面有name,prototype。
(2)右上角是People的原型对象,里面有prototype,constructor,__proto__。
(3)下面两个框p1和p2是两个实例,有name的属性及值和__proto__。

它们之间的关系如下:
People的prototype指向原型对象的prototype,原型对象的constructor指向People。实例的__proto__指向原型对象的prototype。
用公式表示就是:p1.__proto__==People.prototype

所以,当调用p1.walk()方法时,会在p1本身里面找改方法,找不到的话就往上去原型的prototype方法中找,即在People.prototype中找。而本例子中给People.prototype添加了walk方法。因此p1和p2作为People的实例,都可以调用walk方法。

2、例子b

理解了上面的代码之后,看以下Array这个原生构造函数的例子。

arr1 = new Array(1,2,34,5)

arr1=[1,2,34,5]。Array是原生构造函数。arr1作为一个数组,具有很多方法,如下图。这些方法都是继承而来的。


屏幕快照 2018-01-27 15.34.25.png

arr1.__proto__如下图,因为arr1由Array构造的,所以constructor是Array。


屏幕快照 2018-01-27 15.34.49.png

可以看见最后一行还有一个__proto__。嗯?什么情况,点开看看,arr1.__proto__.__proto__如下图,constructor是Object。这是因为Array.prototype是一个原型对象,所以它也是对象Object的一个实例。


屏幕快照 2018-01-27 15.35.03.png

这里就可以做一个公式推导了。
1)arr1是Array的一个实例,所以arr1.__proto__==Array.prototype
2)由于Array.prototype是一个原型对象,所以它也是Object的一个实例,所以Array.prototype.__proto__==Object.prototype。
3)所以arr1.__proto__.__proto__==Object.prototype。

由上面几个图可以看到,数组的toString方法就是在arr1.__proto__.__proto__上的。

三、最后三句话

1、构造函数的prototype==被创建实例的__proto__
2、一切函数都由Function创建
3、一切函数的原型对象都由Object创建

这三句话可以解释很多很多例子。

相关文章

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • 原型、原型链

    (什么是原型、原型链?有什么作用) JavaScirpt深入之从原型到原型链 图解 Javascript 原型链 ...

  • 原型链&查找规则&作用域链

    原型链(隐式原型链) 属性的查找规则(原型链的查找规则) 作用域链

  • 关于原型原型链的理解

    什么是原型? 什么是原型链? 为什么需要原型,和原型链?

  • 原型链实现继承

    原型链 原型链示意图 使用原型链实现继承 这是怎么回事呢? 原型链在哪? 听我细细道来~ 首先 Teacher 实...

  • 继承

    原型链直接继承 原型链直接继承prototype 原型链继承_prototype属性 继承_构造函数绑定

  • js中的实现继承的几种方式

    大纲:原型链借用构造函数组合继承原型式继承寄生式继承寄生组合式继承 1、原型链: 什么是原型链? 原型链的基本思想...

  • 【原型和原型链】什么是原型和原型链

    【原型和原型链】什么是原型和原型链https://blog.csdn.net/xiaoermingn/articl...

  • js原型链

    目录 1.对象的原型和原型链1.1什么是原型1.2查看原型1.3对象的原型链 2.使用构造函数2.1 函数的原型链...

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

网友评论

    本文标题:原型链

    本文链接:https://www.haomeiwen.com/subject/tzunaxtx.html