想要学习 “原型链” 必须要认识什么是 “原型” 和 “原型链”
先理解一下普通的继承和原型的区别,下面写一段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下的字段 这就是原型链的运行轨迹!!!