新手理解的JS原型链

Mike617 发布于2019-08-23 14:49 / 1054人阅读

摘要：我们画张图来表示图中这条红色的线就是原型链。我们把方法放到实例的原型对象上面，也就是上面来供所有实例使用小明小红用图表示补充说一下我的经历，一开始理解原型链时，一直在在这个三个属性中绕来绕去。

一直以来对于JavaScript 的原型链的概念，始终有些东西有一种模糊感，最近刚好有时间就塌下心认真的把《JavaScript高级程序设计》中相关内容认真读了一遍，也查看了很多网上很多资料，以前很多不明白的地方也渐渐明白了起来。
写一篇文章记录一下最近学习的感悟。

字面量创建对象

我们通常创建一个对象无非就两种方式：

 1. var obj= new Object();//new 一个Object的实例
 2. var obj= {};//对象字面量

使用对象字面量和使用new的方式是一样的。
为了简便，一般推荐使用使用字面量：var o= {};

构造函数创建对象

当我们想要创建自定义的对象时，需要用到构造函数。
构造函数和普通函数有两个区别：

1. 便于和普通函数区分，函数名首字母大写。    
2. 使用 `new` 操作符调用，返回一个实例对象。

除此之外和普通函数一摸一样。
我们使用构造函数Person来创建两个实例对象：

function Person(name){
    this.name = name;
    this.sayName= function (){ alert(this.name) }
 }
var person1 = new Person("小明");
var person2 = new Person("小红");
console.log(person1);//{name: "小明", sayName: fun}
console.log(person2);//{name: "小红", sayName: fun}

上面的例子不难理解，虽然这两个实例对象都有sayName方法，而且他们两个的作用也是一样的，但却是两个方法，只是名字和作用一样。

画个图表示一下：

如果还不明白，我在打个比喻：
就像A街上有一间麦当劳，在B街上也开了一间麦当劳，它们都叫麦当劳，作用也是一样的。但是你总不能说他们是一间麦当劳吧？

person1.sayName === person2.sayName;//false

如果这样的话，我们每构造出来一个对象，都要多带带为这个对象创建出一个专属于它自己使用的sayName，这是很占用内存的。

那我们能不能让所有的实例对象都共同使用一个sayName方法，来节省内存，提升效率呢？这需要我们先理解原型对象的概念。

原型对象

我们先了解原型对象的概念。

每个对象都有原型对象（null除外），我们用__proto__表示，每个函数都有prototype属性，指向实例的原型对象。

对照这句话，按照我们上面的例子，也就是说Person.prototype指向person1的原型对象(__proto__),

Person.prototype === person1.__proto__; // true

为了便于理解，来看一张图。

恩~他们的关系大概就是这样。

原型链

原型链简单用一句话概括就是：

原型链就是 对象的__proto__所连接的链状结构

为了方便我们理解原型链，举一个简单的例子：

function F(){
    this.a = 1;
    this.b = 2;
}
F.prototype.b = 3;
F.prototype.c = 4;
var o = new F();// {a: 1, b: 2}
//原型链：
//o --> o.__proto__ --> o.__proto__.__proto__ --> null
// 其中的 --> 就表示 __proto__ 也就是原型链
console.log(o.a); // 1
// o上有a这个属性吗？有的，该属性的值为1

console.log(o.b); // 2
// o上有b这个属性吗？有的，该属性的值为2
// 原型上也有一个"b"属性,但是它不会被访问到.这种情况称为"属性遮蔽 "

console.log(o.c); // 4
// o上有c这个属性吗？没有，那看看原型上有没有
// o.__proto__上有c这个属性吗？有的，该属性的值为4

console.log(o.d); // undefined
// o上有d这个属性吗？没有,那看看原型上有没有
// o.__proto__ 上有d这个属性吗？没有，那看看它的原型上有没有
// o.__proto__.__proto__ 为 null，停止搜索
// 没有找到d属性，返回undefined。

我们画张图来表示：

图中这条红色的线就是原型链。
由此可见，实例对象可访问自己原型对象上的属性和方法，额..准确来说是:

当一个对象查找属性或方法时，自己有，停止查找，返回结果。

自己没有，顺着__proto__一直向上查找，如找到，停止查找，返回结果。

如果一直找到了原型链的最顶端(null)，还没有找到，返回undefined。

我们先回顾一下那个sayName的问题：
怎么让所有的实例对象都是用一个sayName方法呢。
现在我们可以使用原型对象来解决这个问题了。
我们把sayName方法放到实例的原型对象上面，也就是Person.prototype上面来供所有实例使用：

function Person(name){
    this.name = name;
 }
Person.prototype.sayName=function (){
    alert(this.name);
}
var person1 = new Person("小明");
var person2 = new Person("小红");
person1.sayName === person2.sayName;//true

用图表示：

补充

constructor
说一下我的经历，一开始理解原型链时，一直在prototype、__proto__、constructor在这个三个属性中绕来绕去。

为了便于理解，我把constructor放在最后了。
constructor字面意思就很容易理解，构造函数的意思。
一句话解释:

每个原型对象都有一个 constructor 属性指向 关联的构造函数。

还是上面那个例子：

console.log(Person.prototype.constructor);//Person(){ fun }

需要注意的一点是，实例对象上没有constructor属性。
但是：

console.log(person1.constructor) ;//Person(){ fun }

得出这个结果很简单:
实例上查找不到constructor属性 --> 顺着__proto__在原型对象上找 --> 找到并返回。

Object.prototype
刚才我们说了创建对象的两种方式：字面量创建对象和使用new操作符创建对象。
这两种方式创建出来的对象都会继承Object.prototyoe上的方法。
比如，我们使用字面量新创建一个对象o:

var o = {value: 1};
o.toString();//"[object Object]"
//查找过程： o --> o.__proto__ 找到返回
o.__proto__ === Object.prototype;//true

o这个的对象本身并没有toString这个方法，但它却可以使用toString方法。
因为它继承了Object.prototyoe上的toString的方法。

null
既然对象都会继承自Object.prototype上面的方法，那它自己的原型又是什么呢。答案是null

Object.prototype.__prototype__ === null;//true

以上仅自己学习所得，如有不当之处望指出。

私有云服务器托管 js原型链的继承原型原型链原型链原型链继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101194.html

JavaScript进阶学习（二）—— 基于原型链继承的js工具库的实现方法

摘要：一些额外的全局函数命名空间对象接口和构造函数与没有典型的关联，但却是有效的。最后有几点需要说明的是每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。文章来源：小青年原创发布时间：2016-07-03关键词：JavaScript，原型链，jQuery类库转载需标注本文原始地址: http://zhaomenghuan.githu...

陈伟 2019-08-19 18:41 评论0 收藏0
【JS基础】原型对象的那些事（二）

摘要：只是构造函数上的一个属性，它是一个指针，指向原型对象，并不表示就是原型对象。在上一个例子中，就是一个对象，这个对象可以说是原生构造函数的实例，所以也是一个对象，所以它也有属性，不过它的指向也就是原型链的顶端，再往上就没有了。上一篇讲了①原型对象是什么；②__proto__、prototype、constructor的关系；③原型对象的作用；④原型对象带来的一些需要注意的问题；没理解...

yanbingyun1990 2019-08-21 16:23 评论0 收藏0
几句话就能让你理解：this、闭包、原型链

摘要：也就是说这个外部函数的作用域就是闭包本身。无论通过何种手段直接或间接将内部函数传递到所在的词法作用域以外，它都会持有对原始定义作用域的引用，无论在何处执行这个函数都会使用闭包。以下是个人对这三个老大难的总结（最近一直在学习原生JS，翻了不少书，不少文档，虽然还是新手，但我会继续坚持走我自己的路）原型链所有对象都是基于Object.prototype，Object.prototyp...

LeoHsiun 2019-08-20 11:17 评论0 收藏0
学习设计模式前需要知道的事情

摘要：为什么要学习设计模式做事情之前问个为什么总是好的。设计模式的使用方法关于使用方式，像我这种初学者最容易犯的错误就是生搬硬套，但是模仿本来也是学习的一个过程，最重要的事情是在模仿中要学会思考。为什么要学习设计模式？做事情之前问个为什么总是好的。关于设计模式的好坏，我在知乎上也看过一些讨论，有知友对其提出过一些疑问，里面有一些关于设计模式的观点：设计模式有何不妥，所谓的荼毒体现在哪...

kviccn 2019-08-21 10:53 评论0 收藏0
JS专题之继承

摘要：构造函数所以，就有了畸形的继承方式原型链继承三原型链继承改变构造函数的原型对象继承了属性以上例子中，暴露出原型链继承的两个问题包含引用类型数据的原型属性，会被所有实例共享，基本数据类型则不会。前言众所周知，JavaScript 中，没有 JAVA 等主流语言类的概念，更没有父子类继承的概念，而是通过原型对象和原型链的方式实现继承。于是，我们这一篇讲一讲 JS 中的继承（委托）。 ...

rollback 2019-08-23 15:09 评论0 收藏0