JavaScript 中的继承
Prototype
在《JavaScript中的对象(下)》一文中,我们了解到任何prototype的属性和方法都会被传递到该类的所有实例中,利用这一特性,使用prototype也能实现继承。
function ClassA() {
}
ClassA.prototype.id = 1998;
ClassA.prototype.sayId =function(){
alert(this.id);
};
functionClassB(){
}
ClassB.prototype=newClassA();
ClassB.prototype.name="";
ClassB.prototype.sayName=function(){
alert(this.name);
}
}
ClassA.prototype.id = 1998;
ClassA.prototype.sayId =function(){
alert(this.id);
};
functionClassB(){
}
ClassB.prototype=newClassA();
ClassB.prototype.name="";
ClassB.prototype.sayName=function(){
alert(this.name);
}
需要注意的是,这种实现继承的方法不能将参数传入到ClassA的构造器中,是一个缺陷。ClassB的所有属性和方法必需在将ClassB的prototype对象指向ClassA的实例之后进行附值。这样做是因为,prototype指向一个新的对象,在此之前prototype的属性和方法都被覆盖销毁。
对代码进行测试:
var obj1 = new ClassA();
var obj2 = new ClassB();
obj1.id = 1998;
obj2.id= 2000;
obj2.name ="悉尼奥运会";
obj1.sayId(); //输出"1998"
obj2.sayId(); //输出"1998"
obj2.sayName(); //输出"悉尼奥运会"
alert(obj2instanceofClassA); //输出"true"
alert(obj2 instanceofClassB); //输出"true"
var obj2 = new ClassB();
obj1.id = 1998;
obj2.id= 2000;
obj2.name ="悉尼奥运会";
obj1.sayId(); //输出"1998"
obj2.sayId(); //输出"1998"
obj2.sayName(); //输出"悉尼奥运会"
alert(obj2instanceofClassA); //输出"true"
alert(obj2 instanceofClassB); //输出"true"
在上述代码中可以看出,使用prototype实现继承,instanceof操作符出现了另外的用途,在用构造起定义类实现继承时,instanceof不会出现这种效果。但是使用prototype不能支持多重继承。
在《JavaScript中的对象(下)》和上文的论述中可以了解到,使用构造器定义类实现继承和使用prototype实现继承均存在各自的缺陷,要避免出现这些情况,只有将两者混合使用。
混合方法
《JavaScript中的对象(下)》一文中曾经论述,创建一个类的最佳方法,是使用构造器的方法去定义属性,使用prototype定义方法。在继承中同样如此。
function ClassA(id) {
this .id = id;
}
ClassA.prototype.sayId = function() {
alert(this.id);
};
function ClassB(id, name) {
ClassA.call(this, id);
this.name =name;
}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName=function(){
alert(this.name);
}
this .id = id;
}
ClassA.prototype.sayId = function() {
alert(this.id);
};
function ClassB(id, name) {
ClassA.call(this, id);
this.name =name;
}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName=function(){
alert(this.name);
}