从一道题解读JS原型链

以前对js原型和原型链的理解一直以为很绕，绕来绕去的，在看了《JavaScript高级程序设计》和各类文章以后，终于对原型和原型链有了初步的了解，但是仍是没有很深刻的了解，今次经过之前段时间遇到的一道题，分析一下，用本身的想法进行解读，加深本身对原型和原型链的理解。

1、题目

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

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

2、解读

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'。

3、总结

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

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