js重点--原型链继承详解

上篇说过了关于原型链继承的问题，这篇详解一下。

1.

       function animals(){
           this.type = "animals";
       }
       animals.prototype.a = "a";

       function dog(){
           this.type = "dog";
       }
       
       dog.prototype = new animals();
       
       var d = new dog();
       console.log(d);

开始：dog的实例属性（type：dog ）,dog的原型对象（dog._proto_），

dog._proto_ ：dog的原型对象属性（type:animals）,animals的原型对象（animals._proto_）,

animals._proto：animals的原型对象属性（a:a）,object的原型对象（object._proto_）,

object._proto：object的方法，null。

2.

        function animals(){
           this.type = "animals";
       }
       animals.prototype.a = "a";

       function dog(){
           this.type = "dog";
           animals.call(this);
       }
       
       dog.prototype = new animals();
       
       var d = new dog();
       console.log(d);

在dog的构造函数中调用了animals，此时dog构造函数中会拷贝animals中的所有构造函数属性，若有相同的属性，则会修改为animals中的属性值。

开始：dog的实例属性（type：animals）,dog的原型对象（dog._proto_），

dog._proto_ ：dog的原型对象属性（type:animals）,animals的原型对象（animals._proto_）,

animals._proto：animals的原型对象属性（a:a）,object的原型对象（object._proto_）,

object._proto：object的方法，null。

 3.

       function animals(type){
           this.type = type;
       }
       animals.prototype.a = "a";

       function dog(type){
           this.name = "dog";
           animals.call(this,type);
       }
       
       dog.prototype = new animals();
       
       var d = new dog("animals");
       console.log(d);

animals.call(this,type);此时传入了type参数，则在dog拷贝的实例属性type中值为传入的参数值，"animals"，在animals中值仍为undefined。

开始：dog的实例属性（name:dog,type:animals）,dog的原型对象（dog._proto_），

dog._proto_ ：dog的原型对象属性（type:undefined）,animals的原型对象（animals._proto_）,

animals._proto：animals的原型对象属性（a:a）,object的原型对象（object._proto_）,

object._proto：object的方法，null。

4.

        function animals(){
           this.type = "animals";
       }
       animals.prototype.a = "a";

       function dog(){
           this.type = "dog";
       }
       dog.prototype.b1 = "b1";
       
       var d = new dog();
       console.log(d);

开始：dog的实例属性（type:dog）,dog的原型对象（dog._proto_），

dog._proto_ ：dog的原型对象属性（b1:b1）,object的原型对象（object._proto_）,

object._proto：object的方法，null。

5.

        function animals(){
           this.type = "animals";
       }
       animals.prototype.a = "a";

       function dog(){
           this.type = "dog";
       }
       dog.prototype.b1 = "b1";
       
       dog.prototype = new animals();

       var d = new dog();
       console.log(d);

 

使用了原型继承，dog.prototype = new animals();，但此时在dog的原型对象属性中没有了b1:b1,那是因为在定义了dog.prototype.b1 = "b1"之后，又dog.prototype = new animals(),此时改变了dog原型对象指向，所以在它原来原型对象中存在的b1属性不再存在于新定义的dog原型对象中。

开始：dog的实例属性（type:dog）,dog的原型对象（dog._proto_），

dog._proto_ ：dog的原型对象属性（type:animals）,animals的原型对象（animals._proto_）,

animals._proto：animals的原型对象属性（a:a）,object的原型对象（object._proto_）,

object._proto：object的方法，null。

6.

       function animals(){
           this.type = "animals";
       }
       animals.prototype.a = "a";

       function dog(){
           this.type = "dog";
       }
       dog.prototype.b1 = "b1";
       
       dog.prototype = new animals();
       dog.prototype.b2 = "b2";

       var d = new dog();
       console.log(d);

在dog.prototype = new animals();之前定义的dog.prototype.b1 = "b1"不在现在的dog原型对象属性中，在dog.prototype = new animals();之后定义的dog.prototype.b2 = "b2"存在于现在的dog原型对象属性中。

开始：dog的实例属性（type:dog）,dog的原型对象（dog._proto_），

dog._proto_ ：dog的原型对象属性（b2:b2,type:animals）,animals的原型对象（animals._proto_）,

animals._proto：animals的原型对象属性（a:a）,object的原型对象（object._proto_）,

object._proto：object的方法，null。

7.

       function animals(){
           this.type = "animals";
       }
       animals.prototype.a = "a";

       function dog(){
           this.type = "dog";
       }
       
       
       dog.prototype = new animals();
       dog.prototype.b2 = "b2";
       dog.prototype.b1 = "b1";

       var d = new dog();
       console.log(d);

由于均是在dog.prototype = new animals();之后定义的，所以b1:b1,b2:b2均存在于dog的原型对象属性中。

开始：dog的实例属性（type:dog）,dog的原型对象（dog._proto_），

dog._proto_ ：dog的原型对象属性（b1:b1,b2:b2,type:animals）,animals的原型对象（animals._proto_）,

animals._proto：animals的原型对象属性（a:a）,object的原型对象（object._proto_）,

object._proto：object的方法，null。

 8.

       function animals(){
           this.type = "animals";
       }
       animals.prototype.a = "a";

       function dog(){
           this.type = "dog";
       }
       
       dog.prototype = new animals();
       dog.prototype.constructor = dog;

       var d = new dog();
       console.log(d);

由于dog.prototype = new animals();改变了dog原型对象指代的构造函数，此时为animals构造函数，增加dog.prototype.constructor = dog;可以将构造函数修改为dog。

开始：dog的实例属性（type:dog）,dog的原型对象（dog._proto_），

dog._proto_ ：dog的原型对象属性（type:animals）,animals的原型对象（animals._proto_）,

animals._proto：animals的原型对象属性（a:a）,object的原型对象（object._proto_）,

object._proto：object的方法，null。