从一道题解读JS原型链

从一道题解读JS原型链 前端攻城小牛 2018-10-19 19:49:12

通过前段日子遇到的一道题，分析一下，用自己的想法进行解读，加深自己对原型和原型链的理解。如有错误的地方，请大家在评论区多多指正

一、题目

下面程序运行结果是什么？

function Animal() { this.name = 'Animal'; } Animal.prototype.changeName = function (name) { this.name = name; } function Cat() { this.name = 'Cat'; } var animal = new Animal(); Cat.prototype = animal; Cat.prototype.constructor = Cat; var cat = new Cat(); animal.changeName('Tiger'); console.log(cat.name) A. Animal

B. Cat

C. Tiger

D. 都不是

答案是 B Cat

从一道题解读JS原型链

Xml 代码行上显示

二、解读

1. 原型对象

无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。在默认情况下，所有的原型对象都会自动获得一个constructor（构造函数）属性，这个属性是一个指向prototype属性所在函数的指针。

下面用图来说明

function Animal() { this.name = 'Animal'; } Animal.prototype.changeName = function (name) { this.name = name; } 从一道题解读JS原型链

首先创建了一个Animal函数，Animal中含有一个prototype属性，指向Animal Prototype，而Animal.prototype.constructor指向Animal。这个时候由于name属性是在函数中定义的，所以不在Animal Prototype中，而changeName 函数是通过Animal.prototype.changeName定义的，所以我们可以通过这种方式，在实例化多个对象时，共享原型所保存的方法。

同理，当创建了Cat函数时，也是一样。

function Cat() { this.name = 'Cat'; } 从一道题解读JS原型链

1. 创建实例

当调用构造函数创建一个新实例后，该实例的内部将包含一个指针（内部属性），指向构造函数的原型对象。在ECMA-262第5版中管这个指针叫[[Prototype]]。虽然在脚本中没有标准的方式访问[[Prototype]]，但Firefox、Safari和Chrome在每个对象上都支持一个属性proto。明确重要的一点，这个连接存在于实例与构造函数的原型对象之间，而不是存在于实例与构造函数之间。

从一道题解读JS原型链

// 将Cat的原型对象指向animal实例，获得animal中的属性，原有的属性丢失 Cat.prototype = animal; 从一道题解读JS原型链

这一部分相当于是把Cat的原型对象的指针指向了animal实例，所以原来Cat原型对象中的constructor属性丢失，替换成了animal实例中的属性，包括name属性以及proto内部属性，同时proto属性也指向Animal.prototype，因此Cat也可以通过原型链查找调用到Animal中的属性和方法。

// 相当于重新创建了constructor，指向Cat构造函数 Cat.prototype.constructor = Cat; 本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。 最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。

从一道题解读JS原型链

这一部分相当于是重新在原型对象中创建了一个constructor属性，同时指向Cat构造函数。

var cat = new Cat(); // 实例化一个Cat对象，跟实例化Animal相似 从一道题解读JS原型链

1. 调用方法

animal.changeName('Tiger'); 当var animal = new Animal();实例化了一个Animal对象后，animal都包含一个内部属性，该属性指向了Animal.prototype；换句话说，animal与构造函数Animal没有直接的关系。可是，可以看到虽然在实例中不含changeName，但我们却可以调用animal.changeName(name)，这是通过查找对象属性的过程来实现的，即：

首先查找实例中实例中animal是否有changeName方法，如果没有则继续寻找，去到Animal.prototype寻找是否有changeName方法，如果有则调用，没有则继续寻找，到Object.prototype中寻找，最后没找到则会返回一个null。

本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。 最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。

很明显，在这里实例animal中没有changeName方法，所以需要到Animal.prototype寻找changeName方法，并调用成功修改了实例animal中的name属性，为Tiger。

这个时候由于Cat.prototype是指向实例animal的，因此Cat.prototype中的name属性也变为Tiger。

从一道题解读JS原型链

console.log(cat.name) // Cat 最后，获取cat.name，与查找方法同样，也是先去实例中cat查找是否含有name属性，在这里很明显是存在的，因此直接结束寻找，此时cat.name = ‘Cat’。