javascript中实现对象继承的五种方式详解

javascript中实现对象继承的五种方式(javascript中没有extend关键字实现继承)

第一种方式：对象冒充
function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
alert(this.color);
};
}
function ClassB(sColor，sName) {
this.newMethod = ClassA; //
在子对象中定义一个方法
this.newMethod(sColor); //传递和父对象相同的参数
delete this.newMethod;
this.name = sName;
this.sayName = function () {
alert(this.name);
};
}
注意：所有新属性和新方法都必须在删除了新方法的代码行后定义。否则，可能会覆盖超类的相关属性和方法：
第二种方式：call（）方法
call()方法是Function中的方法。因此我们定义的每个函数都拥有这个call()方法。

（1）与对象冒充机制一起使用：
function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
alert(this.color);
};
}
function ClassB(sColor, sName) {
//this.newMethod = ClassA;
//this.newMethod(color);
//delete this.newMethod;
ClassA.call(this,
sColor); //等价于上面对象冒充的三条语句
//this代表的是ClassB对象. sColor代表的是ClassB的参数。
this.name = sName;
this.sayName = function () {
alert(this.name);
};
}

（2）单独使用
function sayColor(sPrefix,sSuffix) {
alert(sPrefix +
this.color + sSuffix);
};
var obj = new Object();
obj.color = "blue";
sayColor.call(obj, "The color is ", "a very nice color indeed.");
//第一个参数是 obj，说明应该赋予 sayColor()
函数中的 this 关键字值是 obj
//第二、三个参数是字符串与 sayColor()
函数中的参数sPrefix和sSuffix匹配
第三种方式：apply（）方法
apply()方法是Function中的方法。因此我们定义的每个函数都拥有这个apply()方法。
（1）与对象冒充机制一起使用：
function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
alert(this.color);
};
}
function ClassB(sColor, sName) {
//this.newMethod = ClassA;
//this.newMethod(color);
//delete this.newMethod;
ClassA.apply(this, new Array(sColor)); //this代表的是ClassB对象.
sColor代表的是ClassB的参数。
this.name = sName;
this.sayName = function () {
alert(this.name);
};
}

（2）单独使用
function sayColor(sPrefix,sSuffix) {
alert(sPrefix +
this.color + sSuffix);
};
var obj = new Object();
obj.color = "blue";
sayColor.apply(obj, new Array("The color is ", "a very nice color indeed."));
//第一个参数是 obj，说明应该赋予 sayColor()
函数中的 this 关键字值是 obj
//第二个参数是字符串数组，与 sayColor()
函数中的参数sPrefix和sSuffix匹配
第三种方式：原型链方式
function ClassA() {
}
ClassA.prototype.color = "blue";
ClassA.prototype.sayColor = function () {
alert(this.color);
};
function ClassB() {
}
ClassB.prototype = new ClassA();
// 把ClassB的prototype属性设置成 ClassA
的实例。这很有意思，
因为想要 ClassA
的所有属性和方法，但又不想逐个将它们
ClassB
的 prototype 属性。
ClassB.prototype.name = "aaa";
ClassB.prototype.sayName = function () {
alert(this.name);
};
注意：使用原型链方式是无法传参数
第四种方式：混合方式（构造函数/原型方式创建对象,call方法/apply方法和原型链共同实现继承）
function ClassA(sColor) {
this.color = sColor;
}
ClassA.prototype.sayColor = function () { //保证父对象的方法只生成一次
alert(this.color);
};
function ClassB(sColor, sName) {
ClassA.call(this, sColor); //或者使用ClassA.apply(this,new
Array(sColor))
this.name = sName;
}
ClassB.prototype = new ClassA();
ClassB.prototype. sayColor = function () { //重写父对象的sayColor()方法
alert(“the color is ”+this.color);
};
ClassB.prototype.sayName = function () { //保证子对象的方法只生成一次
alert(this.name);
};
注意：能够传递参数，解决了原型链方式无法传参数的问题。
以上的标记为红色的是在javascript实际的对象继承上最常用的。