JavaScript模拟实现继承的方法
本文实例讲述了JavaScript模拟实现继承的方法。分享给大家供大家参考。具体分析如下:
我们都知道,在JavaScript中只能模拟实现OO中的"类",也就意味着,在JavaScript中没有类的继承。我们也只能通过在原对象里添加或改写属性来模拟实现。
先定义一个父类,
//父类
functionParentClass(){
this.className="ParentClass";
this.auth="Auth";
this.version="V1.0";
this.parentClassInfo=function(){
returnthis.className+"\n"+this.auth+"\n"+this.version;
}
}
一、prototype实现:
//子类
//1、prototype继承
functionChildClassByPrototype(){
this.date="2013-07-26";
this.classInfo=function(){
returnthis.parentClassInfo()+"\n"+this.date;
}
}
ChildClassByPrototype.prototype=newParentClass();
varcctest1=newChildClassByPrototype();
cctest1.parentClassInfo();
cctest1.classInfo();
这种方式很简单,只需把父类的实例赋值给子类的prototype属性就行了,然后子类就可以使用父亲的方法和属性了。这里其实是用到了原型链向上查找的特性,比如这个例子中的cctest1.parentClassInfo()方法,JavaScript会先在ChildClassByPrototype的实例中查找是否有parentClassInfo()方法,子类中没有,所以继续查找ChildClassByPrototype.prototype属性,而其prototype属性的值是ParentClass的一个实例,该实例有parentClassInfo()方法,于是查找结束,调用成功。
二、apply实现:
//2、apply继承
functionChildClassByApply(){
ParentClass.apply(this,newArray());
//ParentClass.apply(this,[]);
this.date="2013-07-26";
this.classInfo=function(){
returnthis.parentClassInfo()+"\n"+this.date;
}
}
JavaScript中的apply可以理解为用A方法替换B方法,第一个参数为B方法的对象本身,第二个参数为一个数组,该数组内的值为需要传递给A方法对应的参数列表,如果参数为空,即没有参数传递,可通过newArray()、[]来传递。
三、call+prototype实现:
//3、call+prototype继承
functionChildClassByCall(){
ParentClass.call(this,arguments);
this.date="2013-07-26";
this.classInfo=function(){
returnthis.parentClassInfo()+"\n"+this.date;
}
}
ChildClassByCall.prototype=newParentClass();
call和apply作用类似,即都是用A方法替换B方法,只是传递的参数不一样,call方法的第一个参数为B方法的对象本身,后续的参数则不用Array包装,需直接依次进行传递。既然作用差不多,为何多了一句原型赋值呢?这是因为call方法只实现了方法的替换而没有对对象属性进行复制操作。
每种方法都有其适用环境,比如,如果父类带有有参构造函数:
functionParentClass(className,auth,version){
this.className=className;
this.auth=auth;
this.version=version;
this.parentClassInfo=function(){
returnthis.className+"\n"+this.auth+"\n"+this.version;
}
}
这种情况下,prototype就不适用了,可选用apply或call;
functionChildClassByApply(className,auth,version){
ParentClass.apply(this,[className,auth,version]);
this.date="2013-07-26";
this.classInfo=function(){
returnthis.parentClassInfo()+"\n"+this.date;
}
}
functionChildClassByCall(className,auth,version){
ParentClass.call(this,arguments[0],arguments[1],arguments[2]);
//ParentClass.call(this,className,auth,version);
this.date="2013-07-26";
this.classInfo=function(){
returnthis.parentClassInfo()+"\n"+this.date;
}
}
ChildClassByCall.prototype=newParentClass();
实例化:
varcctest2=newChildClassByApply("ParentClass","Auth","V1.0");
varcctest3=newChildClassByCall("ParentClass","Auth","V1.0");
在apply和call中,又该如何取舍呢?在OO的继承中,子类继承于父类,那么它应该也是父类的类型。即,ChildClassByCall、ChildClassByApply应该也是ParentClass类型,但我们用"instanceof"检测一下就会发现,通过apply继承的子类,并非ParentClass类型。所以,我们建议用call+prototype来模拟实现继承。据说,GoogleMapAPI的继承就是使用这种方式哟。
希望本文所述对大家的javascript程序设计有所帮助。