谈谈我对 js原型链的理解

想要学习 “原型链” 必须要认识什么是 “原型” 和 “原型链”

先理解一下普通的继承和原型的区别，下面写一段js代码来帮助理解：

var Animal = function(){ // 动物抽象类

　　this.name;
　　this.age;
　　this.sex;

　　this.skill = function(){}; 
　　this.die   = function(){};
};

var Dog = function(){};
var Cat = function(){};

Dog = new Animal(); // 这里Dog就是具体的动物对象 它拥有动物的公有属性 【 name, age, sex, func:sikll, func:die 】
Cat = new Animal(); // 这里Cat也是具体的动物对象 它呢也拥有动物的公有属性【 name, age, sex, func:sikll, func:die 】

Dog 和 Cat 同时继承了 Animal 也就是说他们都拥有 【 name, age, sex, func:sikll, func:die 】这些属性。 那么他们和原型的区别是什么呢？

区别就是：不管是 Dog继承或是Cat继承又或者是其它具体类继承了Animal ，各自都会复制一份 Animal内部的结构（大脑里构建一下这样的场景）， 试想一下，如果有几十个上百个具体类继承了Animal 难道还要复制几十个上百个Animal内部结构吗？

那怎么解决上面多复制的问题呢？ 那这就是“原型”要解决的问题咯， 对的就是说使用原型后不管有多少个类继承Animal 它内部的结构只复制一次。 够明白了吗？ 这就是原型的概念！

我们把上面的代码改动一下，看看原型的写法：

var Animal = function(){ // 动物抽象类

　　this.name;
　　this.age;
　　this.sex;

};

Animal.prototype.skill = function(){};
Animal.prototype.die  = function(){};

var Dog = function(){};
var Cat = function(){};

Dog.prototype = new Animal();
Cat.prototype  = new Animal();

这样写就可以继承Animal类下的所有字段和方法，但是这里有个小问题，就是说 skill 和 die 可以正常调用，因为他们是函数 。 但是name / age / sex 这三个字段只能读，如果你写 Dog.name = "旺财";  这样系统会认为name是 Dog下的name 而不是 Animal下的name (这句话如果看不懂等会看原型链就会懂的)。

为什么要说一下这个小问题呢， 因为有很多人认为他们是共享的只要修改了 dog 那么 cat 的name 也会改变， 这里纠正一下哈，以后不要这么认为了。

那么如果只想继承Animal类的原型 而不继承字段应该怎么办呢， 那我们在来改动一下代码：

var Animal = function(){ // 动物抽象类

　　this.name;
　　this.age;
　　this.sex;

};

Animal.prototype.skill = function(){};
Animal.prototype.die  = function(){};

var Dog = function(){};
var Cat = function(){};

Dog.prototype = Animal.prototype;
Cat.prototype  = Animal.prototype;

是的 Dog.prototype = Animal.prototype; 这样写就可以了，这样就可以有效的屏蔽Animal类的字段了，可以放心的使用它的原型函数了。

那原型链又是一个什么概念呢？其实js的原型链也很好理解我们先来看一个案例

var Animal = function(){ // 动物抽象类

　　this.name = "二哈";
　　this.age   = "1";
　　this.sex   =  "公狗";

};

Animal.prototype.skill = function(){};
Animal.prototype.die  = function(){};

var Dog = function(){};

Dog.prototype = new Animal();

Dog.name = "旺财";
Dog.shout = "汪汪汪";

console.log(Dog.name); // 输出的是 旺财 而不是 二哈
console.log(Dog.shout); // 输出的是 汪汪汪

console.log(Dog.sex); // 输出的是公狗

根据这个案例怎么来理解原型链呢？ 我们先来看 Dog.name 为什么会输出旺财 而不是二哈呢？ 因为js解析时会先找 dog下面是否有name ， 如果dog下面没有name就会去 dog的prototype原型里找 name 如果dog.prototype原型里也没有name 就会去object里去找，

如果还找不到那就是没有定义， 那么dog下面有个name 那么 animal下面也有个name js解析的时候会先找到最近的 dog下的name， 所以输出的是 旺财 而不是 二哈

理所当然 Dog.shout 输出的也是 dog下的 shout ， 但是 dog 下面没有找到 sex 属性，所以就去  dog.prototype下找到 sex 字段并输出；

理解原型链查找路线图  dog->animal->object  简而言之就是 先找dog下的字段， 再找 animal下的字段， 最后是 object下的字段  这就是原型链的运行轨迹！！！