理解javaScript原型、原型链

NSFish 发布于2019-08-26 18:13 / 1370人阅读

摘要：构造函数的属性指向原型对象原型对象的属性指向构造函数实例对象的指向原型对象所有引用类型默认都继承了，而这个继承也是通过原型链实现的。第一种方式是使用操作符，只要用这个操作符来测试实例与原型链中出现过的构造函数，结果就会返回。

理解对象
首先对象的定义是:“无序属性的集合，其属性可以包含基本值、对象或者函数。”严格来讲，
这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字，而每个名字都映射到一个值。正因为这样(以及其他将要讨论的原因)，我们可以把 ECMAScript 的对象想象成散列表:无非就是一组名值对，其中值可以是数据或函数。
原型对象理解
1.创建的每个函数都有一个 prototype(原型)属性，这个属性是一个指针，指向一个对象(原型对象)，而原型对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

2.创建一个新函数，会根据一组特定的规则为该函数创建一个 prototype 属性（原型属性），这个属性指向函数的原型对象。在默认情况下，所有原型对象都会自动获得一个 constructor (构造函数属性)属性，这个属性包含一个指向 prototype 属性所在函数的指针。就拿前面的例子来说， Person.prototype.constructor 指向 Person。而通过这个构造函数，我们还可继续为原型对象添加其他属性和方法

3.当调用构造函数创建一个新实例后，该实例的内部将包含一个指针(内部属性)，指向构造函数的原型对象。ECMA-262 第 5 版中管这个指针叫[[Prototype]]。虽然在脚本中没有标准的方式访问[[Prototype]]，但 Firefox、Safari 和 Chrome 在每个对象上都支持一个属性 proto;而在其他实现中，这个属性对脚本则是完全不可见的。不过，要明确的真正重要的一点就是，这个连接存在于实例与构造函数的原型对象之间，而不是存在于实例与构造函数之间。Person 的每个实例—— person1 和 person2 都包含一个内部属性，该属性仅仅指向了 Person.prototype;换句话说，它们与构造函数没有直接的关系。

4.实现中都无法访问到[[Prototype]]，

1>但可以通过 isPrototypeOf()方法来确定对象之间是否存在这种关系。

2>ECMAScript 5增加了一个新方法，叫Object.getPrototypeOf()，在所有支持的实现中，这个方法返回[[Prototype]]的值。例如:

理解prototype、__proto__与constructor

1>__proto__和constructor属性是对象所独有的；prototype属性是函数所独有的，因为函数也是一种对象，所以函数也拥有__proto__和constructor属性。
2>__proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（父对象）里找，一直找，直到__proto__属性的终点**null**，然后返回undefined，再往上找就相当于在null上取值，会报错。通过__proto__属性将对象连接起来的这条链路即我们所谓的**原型链**。
3>prototype属性的作用就是让该函数所**实例化的对象**们都可以找到公用的属性和方法，即f1.__proto__ === Foo.prototype。
4>constructor属性的含义就是指向该**对象的构造函数**，所有函数（此时看成对象了）最终的构造函数都指向Function。

原型链
原型链是实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
(构造函数)的prototype属性指向(原型对象)；
(原型对象)的constructor属性指向(构造函数);
(实例对象)的[[Prototype]]/__proto__指向(原型对象)

1.所有引用类型默认都继承了 Object，而这个继承也是通过原型链实现的。大家要记住，所有函数的默认原型都是 Object 的实例，因此默认原型都会包含一个内部指针，指向 Object.prototype。这也正是所有自定义类型都会继承 toString()、 valueOf()等默认方法的根本原因。所以，我们说上面例子展示的原型链中还应该包括另外一个继承层次

确定原型和实例的关系

可以通过两种方式来确定原型和实例之间的关系。第一种方式是使用 instanceof 操作符，只要用这个操作符来测试实例与原型链中出现过的构造函数，结果就会返回 true。以下几行代码就说明了这一点。

由于原型链的关系，我们可以说 instance 是 Object、SuperType 或 SubType 中任何一个类型的实例。因此，测试这三个构造函数的结果都返回了 true。
第二种方式是使用 isPrototypeOf()方法。同样，只要是原型链中出现过的原型，都可以说是该原型链所派生的实例的原型，因此 isPrototypeOf()方法也会返回 true，如下所示。

参考文章

云服务器 GPU云服务器原型原型链原型链 javascript原型原型链继承

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

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

如何理解JavaScript的原型和原型链？

摘要：之前有朋友问怎么去理解原型和原型链的问题。理解原型链的小技巧将箭头视作泛化子类到父类关系那么图中所有的虚线将构成一个继承层级，而实线表示属性引用。原型链是实现继承的重要方式，原型链的形成是真正是靠而非。之前有朋友问怎么去理解原型和原型链的问题。这个问题，在面试中，很多同学经常都会遇到。这里给大家讲讲，方便大家记忆。 JavaScript的特点JavaScript是一门直译式脚本...

xuexiangjys 2019-08-02 16:12 评论0 收藏0
如何理解JavaScript的原型和原型链？

摘要：之前有朋友问怎么去理解原型和原型链的问题。理解原型链的小技巧将箭头视作泛化子类到父类关系那么图中所有的虚线将构成一个继承层级，而实线表示属性引用。原型链是实现继承的重要方式，原型链的形成是真正是靠而非。之前有朋友问怎么去理解原型和原型链的问题。这个问题，在面试中，很多同学经常都会遇到。这里给大家讲讲，方便大家记忆。 JavaScript的特点JavaScript是一门直译式脚本...

adie 2019-08-23 16:54 评论0 收藏0
【5】JavaScript 函数高级——原型与原型链深入理解（图解）

摘要：探索是如何判断的表达式如果函数的显式原型对象在对象的隐式原型链上，返回，否则返回是通过自己产生的实例案例案例重要注意的显示原型和隐式原型是一样的。面试题测试题测试题报错对照下图理解原型与原型链深入理解（图解）原型（prototype）函数的 prototype 属性（图）每个函数都有一个prototype属性，它默认指向一个Object空对象（即称为：原型对象）原型对象中有...

马龙驹 2019-08-23 17:17 评论0 收藏0
关于javascript中的原型和原型链

摘要：先来一个构造函数构造一个人类实例化一个对象看看的名字是什么打印结果先说一个前提只要是函数，就会有一个属性，可以理解为子代的原型遗传基因只要是对象，就会有一个方法，可以理解为向上寻找原型的方法。关于javascript中的原型和原型链我GitHub上的菜鸟仓库地址：点击跳转查看其他相关文章文章在我的博客上的地址：点击跳转关于javascript中的原型和原...

SmallBoyO 2019-08-20 18:15 评论0 收藏0
深入理解JavaScript系列5:强大的原型和原型链

摘要：参考内容关于本文本文转自大叔的深入理解系列深入理解系列文章，包括了原创，翻译，转载，整理等各类型文章，原文是大叔的一个非常不错的专题，现将其重新整理发布。前言 JavaScript 不包含传统的类继承模型，而是使用 prototypal 原型模型。虽然这经常被当作是 JavaScript 的缺点被提及，其实基于原型的继承模型比传统的类继承还要强大。实现传统的类继承模型是很简单，但是...

frontoldman 2019-08-19 17:21 评论0 收藏0