[Object]面向对象编程（高程版）（五）继承

最新推荐文章于 2015-05-20 20:37:49 发布

原创最新推荐文章于 2015-05-20 20:37:49 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#prototype

Web前端-JS语言核心专栏收录该内容

50 篇文章

订阅专栏

本文详细介绍了JavaScript中的三种主要继承方式：原型链继承、借用构造函数继承以及组合继承，并对比了它们的特点与适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者：zccst

一、原型链继承


function SuperType(){
	this.property = true;
}
SuperType.prototype.getSuperValue = function(){
	return this.property;
}


function SubType(){
	this.subproperty = false;//SubType有了一个属性subproperty，值为false
}

// 核心
SubType.prototype = new SuperType();
//SubType继承了SuperType的属性property，值为true，
//还继承了SuperType在prototype对象中定义的getSuperValue方法


SubType.prototype.getSubValue = function(){
	return this.subproperty;//SubType又有了一个在prototype对象中定义的getSubValue方法
}

//自此，SubType拥有4个属性，其中两个是真正的属性，另两个是方法。

//知识点1，重新父类的同名方法。会覆盖父类的同名方法。
//SubType.prototype.getSuperValue = function(){return false;}

//知识点2，原型链实现继承时，不能使用对象字面量创建原型方法。因为这样做会重写原型链
SubType.prototype = {
	saySubValue : function(){return this.subproperty;},
	sayOtherValue : function(){return false;}
};
//批注：运行上面代码时，会使SubType.prototype = new SuperType();无效


//console.log(SuperType);
//console.log(SubType);

var i = new SubType();  //创建一个实例

//alert(i.getSuperValue());
//alert( i instanceof Object);
//alert( i instanceof SuperType);
//alert( i instanceof SubType);

//该实例是三个对象的实例，他们是继承关系。
//alert(Object.prototype.isPrototypeOf(i));
//alert(SuperType.prototype.isPrototypeOf(i));
//alert(SubType.prototype.isPrototypeOf(i));


alert(i.getSuperValue());


4，obj4

//1，原型链的问题
function SuperType(){
	this.colors = ['red','blue','green'];
}
function SubType(){
}
SubType.prototype = new SuperType();

var i = new SubType();
i.colors.push('black');
alert(i.colors);
var j = new SubType();
alert(j.colors);//4。原因是j的prototype与i的一样。里面包含着父类的属性和prototype。

二、借用构造函数


function SuperType(){
	this.colors = ["red","blue","green"];
}

function SubType(){
	SuperType.call(this);//call相当于设置函数体内this对象的值。
}

var i = new SubType();
i.colors.push("black");
alert(i.colors); //"red","blue","green","black"

var i2 = new SubType();
alert(i2.colors); //"red","blue","green"

//批注：通过call借调了父类的构造函数，实际上是在子类创建实例时调用了父类的构造函数。


//1,传递参数
function SuperType(name){
	this.name = name;
}
function SubType(){
	SuperType.call(this, "Nicholas");
	this.age = 29;
}

var i = new SubType();
alert(i.name);
alert(i.age);

//2,问题：方法都在构造函数中，无法复用。

三、组合继承


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);
	this.age = age;
}

SubType.prototype = new SuperType();

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

var i = new SubType("nich",29);
i.colors.push("black");
//alert(i.colors);//"red","blue","green","black"
//i.sayName(); //"nich"
//i.sayAge();  //29

var i2 = new SubType("greg",27);
//alert(i2.colors);//"red","blue","green"
//i2.sayName(); //"greg"
//i2.sayAge();  //27

alert(i.name == i2.name);    //false
alert(i.age == i2.age);      //false
alert(i.colors == i2.colors);//false

alert(i.sayName == i2.sayName);//true 原因：sayName也是原型对象中定义的方法
alert(i.sayAge == i2.sayAge);  //true

//批注：该方法在实际中是使用最多的一种。

如果您觉得本文的内容对您的学习有所帮助，您可以微信：
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]