码迷,mamicode.com
首页 > Web开发 > 详细

JS继承

时间:2016-04-24 21:48:39      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:

一、原型链

见上一篇原型链;

原型链的问题:1.用原型链来实现继承时,最主要的问题来自包含引用类型值的原型。

function SuperType(){

  this.colors=[‘red‘,‘green‘];

}

function SubType(){}

SubType.prototype=new SuperType();

var instance1=new SubType();

instance1.colors.push(‘black‘);

alert(instance1.colors)//red,green,black

var instance2=new SubType();

alert(instance2.colors)//red,green,black

构造函数中定义的属性都是实例属性,原型中定义的属性由所有属性共享。

因为subtype继承了supertype,因此supertype中的属性colors变成了subtype的原型对象中的属性,因此在subtype的实例中,colors变成了共享的属性。

2.在创建子类型的实例时,不能向超类型的构造函数中传递参数。

 

二、借用构造函数

在子类型构造函数内部调用超类型构造函数。

function SuperType(){

  this.colors=[‘red‘,‘green‘];

}

function SubType(){

  SuperType.call(this);//调用超类型的构造函数

}

var instance1=new SubType();

instance1.colors.push(‘black‘);

alert(instance1.colors)//red,green,black

var instance2=new SubType();

alert(instance2.colors)//red,green

相对于原型链,借用构造函数的一个很大的优势是可以在子类型构造函数中向超类型构造函数传递参数。

function SuperType(name){

  this.name=name;

}

function SubType(){

  SuperType.call(this,‘Nic‘);

  this.age=29;//为了确保SuperType构造函数不会重写子类型的属性,可以在调用超类型构造函数之后再添加应该在子类型中定义的属性

}

var instance=new SubType();

alert(instance.name)//‘Nic‘

alert(instance.age)//29

存在的问题:

无法避免构造函数模式存在的问题,方法都在构造函数中定义,因此函数复用无从谈起。而且,在超类型的原型中定义的方法,对子类型而言也是不可见的,结果所有类型都只能使用构造函数模式。

 

三、组合继承

使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。

function SuperType(name){

  this.name=name;

  this.colors=[‘red‘,‘green‘];

}

SuperType.prototype.sayName=function(){alert(this.name)};

function SubType(name,age){

  SuperType.call(this,name);

  this.age=age;

}

SubType.prototype=new SuperType();

SubType.prototype.constructor=SubType;

SubType.prototype.sayAge=function(){alert(this.age)};

var instance1=new SubType(‘Nic‘,29);

instance1.colors.push(‘black‘);

alert(instance1.colors)//red,green,black

instance1.sayName();//Nic

instance1.sayAge()//29

var instance2=new SubType(‘Greg‘,27);

alert(instance2.colors)//red,green

instance2.sayName()//Greg

instance2.sayAge()//27

 

四、原型式继承

 

JS继承

标签:

原文地址:http://www.cnblogs.com/YangqinCao/p/5428215.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!