原型链继承详解

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

1.开始: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。

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);

2.在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。

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);

 3.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。

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);

4.开始:dog的实例属性(type:dog),dog的原型对象(dog._proto_),

dog._proto_ :dog的原型对象属性(b1:b1),object的原型对象(object._proto_),

object._proto:object的方法,null。

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);

5.使用了原型继承,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。

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);

6.在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。

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);

7.由于均是在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。

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);

 8.由于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。

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);

posted @ 2019-01-29 11:47  苏小落  阅读(566)  评论(0编辑  收藏  举报