从一道题解读JS原型链

harryhappy 发布于2019-08-23 12:25 / 2085人阅读

摘要：明确重要的一点，这个连接存在于实例与构造函数的原型对象之间，而不是存在于实例与构造函数之间。相当于重新创建了，指向构造函数这一部分相当于是重新在原型对象中创建了一个属性，同时指向构造函数。

之前对js原型和原型链的理解一直觉得很绕，绕来绕去的，在看了《JavaScript高级程序设计》和各种文章之后，终于对原型和原型链有了初步的了解，可是还是没有很深入的了解，今次通过以前段时间遇到的一道题，分析一下，用自己的想法进行解读，加深自己对原型和原型链的理解。

一、题目

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

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

二、解读 1. 原型对象

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

function Animal() {
    this.name = "Animal";
}
Animal.prototype.changeName = function (name) {
    this.name = name;
}

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

function Cat() {
    this.name = "Cat";
}

2. 创建实例

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

// 将Cat的原型对象指向animal实例，获得animal中的属性，原有的属性丢失
Cat.prototype = animal;

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

// 相当于重新创建了constructor，指向Cat构造函数
Cat.prototype.constructor = Cat;

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

var cat = new Cat();   // 实例化一个Cat对象，跟实例化Animal相似

3. 调用方法

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。

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

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

console.log(cat.name)  // Cat

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

三、总结

通过这道题，加深了我对原型和原型链的理解，其实这道题也可以扩展到关于继承的知识点，在JavaScript中实现继承主要是依靠原型链来实现。之后等我再搞的更清楚一点再继续写吧。

此文章是本人自己对于原型和原型链的一点小小的理解，中间可能存在偏差或者错误的，请多多指点！！！

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

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

从一道面试题，到“我可能看了假源码”

摘要：返回的绑定函数也能使用操作符创建对象这种行为就像把原函数当成构造器。同时，将第一个参数以外的其他参数，作为提供给原函数的预设参数，这也是基本的颗粒化基础。今天想谈谈一道前端面试题，我做面试官的时候经常喜欢用它来考察面试者的基础是否扎实，以及逻辑、思维能力和临场表现，题目是：模拟实现ES5中原生bind函数。也许这道题目已经不再新鲜，部分读者也会有思路来解答。社区上关于原生bind的研...

Carson 2019-08-20 14:23 评论0 收藏0
从一道面试题，到“我可能看了假源码”

摘要：返回的绑定函数也能使用操作符创建对象这种行为就像把原函数当成构造器。同时，将第一个参数以外的其他参数，作为提供给原函数的预设参数，这也是基本的颗粒化基础。今天想谈谈一道前端面试题，我做面试官的时候经常喜欢用它来考察面试者的基础是否扎实，以及逻辑、思维能力和临场表现，题目是：模拟实现ES5中原生bind函数。也许这道题目已经不再新鲜，部分读者也会有思路来解答。社区上关于原生bind的研...

rockswang 2019-08-30 15:52 评论0 收藏0
从一道面试题，到“我可能看了假源码”

摘要：返回的绑定函数也能使用操作符创建对象这种行为就像把原函数当成构造器。同时，将第一个参数以外的其他参数，作为提供给原函数的预设参数，这也是基本的颗粒化基础。今天想谈谈一道前端面试题，我做面试官的时候经常喜欢用它来考察面试者的基础是否扎实，以及逻辑、思维能力和临场表现，题目是：模拟实现ES5中原生bind函数。也许这道题目已经不再新鲜，部分读者也会有思路来解答。社区上关于原生bind的研...

jlanglang 2019-08-01 16:21 评论0 收藏0
ES规范解读之赋值操作符&属性访问器

摘要：那么什么是基础对象组件呢，举两个例子我们再来看看属性访问器，就是括号操作符及点号操作符都做了什么属性访问器也就是说括号跟点号对解释器而言是一样的。 ES规范解读之赋值操作符&属性访问器原文:https://github.com/kuitos/kuitos.github.io/issues/24事情起源于某天某妹子同事在看angular文档中关于Scope的说明Understandin...

funnyZhang 2019-08-21 10:41 评论0 收藏0
一道简单的js继承面试题来查考你是否真的透彻的了解继承

摘要：但这两个对象的原型指向了同一个实例对象，这个实例对象同样是存在栈内存中的然后指向了一个对象。实际是在的实例对象增加一个属性，并将属性赋值为，但它并没有修改原型链上的属性。侧重理解的指向问题直接先贴题目吧 function A() { this.name = a this.color = [green, yellow] } function B() { ...

jcc 2019-08-22 15:55 评论0 收藏0