视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JS的继承方法--案例说明
2020-11-27 19:32:37 责编:小采
文档


一、原型链:利用原型让一个引用类型继承另一个引用类型的属性和方法

每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。

实现原性链的基本模式:

function SuperType(){
 this.colors =[“red”, “blue”, “green”];
}
function SubType(){
}
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push(“black”);
alert(instance1.colors); //red, blue, green, black
var instance2 = new SubType();
alert(instance2.colors); //red, blue, green, black

最后的结果:intance指向SubType的原型,而SubType的原型又指向SuperType的原型,SuperType继承了Object

所有函数的默认原型都是Object的实例

问题:会产生引用类型值的问题

比如,创建了一个子类的实例,如果对子类实例的属性进行了修改,那么创建其他子类的时候都会收到影响,代码如下:

function SuperType(){
 this.colors =[“red”, “blue”, “green”];
}
function SubType(){
}
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push(“black”);
alert(instance1.colors); //red, blue, green, black
var instance2 = new SubType();
alert(instance2.colors); //red, blue, green, black

以上结果说明会影响其他实例的属性值

二、借用构造函数:在子类型构造函数的内部调用超类型构造函数

function SuperType(){
 this.colors =[“red”, “blue”, “green”];
}
function SubType{}(
 SuperType.call(this); //继承了SuperType。通过调用SuperType的构造函数,借用其构造结构
}
var instance1 = new SubType();
instance1.colors.push(“black”);
alert(intance1.colors); //red,blue,green,black
var instance2 = new SubType();
alert(instance2.colors); //red,blue,green

使用该方法可以在子类构造函数中向超类型构造函数传递参数,如下:

function SuperType(name){
 this.name = name;
}
function SubType(){
SuperType.call(this,“Nicholas”); //传入参数,利用这个参数初始化父类构造函数中的name
this.age = 29;
}
var instance = new SubType();
alert(instance.name); //Nicholas
alert(instance.age); //29

问题:不方便复用

三、组合式继承:使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承

示例代码:

function SuperType(name){
this.name = name;
this.colors = [“red”, “blue”,“green”];
}
SuperType.prototype.sayName = function(){ //定义了一个方法,该方法在继承的子类中也可以用
 alert(this.name);
}
function SubType(name, age){
SuperType.call(this, name); //继承SuperType的一部分,this指SubType,
this.age = age; //自己新定义的属性age也可以进行赋值
}
SubType.prototype = new SuperType(); //利用原型继承,可以使用父类的方法(见原型链继承)
SubType.prototype.sayAge = function(){ //定义SubType特有的新方法
 alert(this.age);
}
var instance1 = new SubType(“Martin”, 10);
instance1.colors.push(“black”);
alert(instance1.colors); //red,blue,green,black
instance1.sayName(); //Martin
instance1.sayAge(); //10
var instance2 = new SubType(“Greg”, 27);
alert(instance2.colors); //red,blue,green
instance2.sayName(); //Greg
instance2.sayAge(); //27

下载本文
显示全文
专题