JavaScript 中的继承

继承是面向对象语言基本特征之一,通过继承可以将父类所具有的特性遗传到子类。ECMAScript中的继承不像Java、C++等语言那么明显,直接通过关键字来实现,通常它是通过模拟方式来实现继承功能的,并且实现方式有多种。

    在继承中引入this关键字,使用构造器方法定义类来实现继承。一个构造器是一个函数,因此可以将父类的构造器作为子类的一个方法使用并进行调用。
function  ClassA(id)  {
    
this .id = id;
    
this .sayId = function() {
        alert(
this.id);
    }
;
}


function  ClassB(id, name)  {
    
this .newMethod = ClassA;
    
this .newMethod(id);
    
delete this.newMethod;

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

    注意,子类中所有新的属性和方法都必需在删除newMethod后引入,否则,可能存在用父类的属性和方法重写子类属性和方法的危险。另外,使用这种方法还可以实现多重继承,此时如果两个父类具有相同的属性或方法时,最后的类具有优先级。由于这种继承方法比较流行,ECMAScript第三版引入了两个 Function对象:call()和apply()。

    call()

    call()方法是最接近上述继承方式的方法,它的第一个参数是this指向的对象,所有的其他参数都直接传到function。
function  sayMessage(first, last)  {
    alert(first 
+ this.logic +last);
}
;

varobj 
= new  Object();
obj.logic 
=   " or " ;

sayMessage.call(obj,
" Coffee  " " Tea " );  // 输出"Coffee or Tea"

    用call()方法来实现继承,只需要this.newMethod相关的三行代码。
function  ClassB(id, name)  {
    
//this.newMethod = ClassA;
    //this.newMethod(id);
    //delete this.newMethod;
    ClassA.call(this, id); //this指向ClassB的对象

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

    apply()

    apply()方法需要两个参数:this所指向的对象,和传到function的由参数组成的array。
function  sayMessage(first, last)  {
    alert(first 
+ this.logic +last);
}
;

var  obj  =   new  Object();
obj.logic 
=   " or " ;

sayMessage.apply(obj, 
new  Array( " Coffee  " "  Tea " ));  // 输出"Coffee or Tea"

    同样,使用 apply() 实现继承可以通过如下方法实现。
function  ClassB(id, name)  {
    
//this.newMethod = ClassA;
    //this.newMethod(id);
    //delete this.newMethod;
    ClassA.apply(thisnew Array(id)); //this指向ClassB的对象

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

    当父类构造器的参数和子类构造器参数的顺序一致时,可以使用子类的arguments对象作为第二个参数。否则,必需创建一个array来传递参数,或是使用call()方法。

    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的构造器中,是一个缺陷。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"

    在上述代码中可以看出,使用prototype实现继承,instanceof操作符出现了另外的用途,在用构造起定义类实现继承时,instanceof不会出现这种效果。但是使用prototype不能支持多重继承。

    使用构造器定义类实现继承和使用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);
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值