Javascript继承机制详解
学完了javascript类和对象的创建之后,现在总结一下javascript继承机制的实现。javascript并不像java那样对继承机制有严格明确的定义,它的实现方式正如它的变量的使用方式那样也是十分宽松的,你可以设计自己的方法“模仿”继承机制的实现。有以下几种方法:
1、对象冒充
<script type="text/javascript"> function classa(str){ this.str=str; this.printstr=function(){ document.write(this.str); document.write("<br>"); } this.getstr=function(){ return this.str; } } function classb(name,str){ //下面这两句代码相当于将classa代码体中的内容搬到这里 this.newmethod1=classa; this.newmethod1(str); //注意,这里的写法 delete this.newmethod1; //新的方法和属性的定义须在删除了newmethod之后定义,因为可能覆盖超类的属性和方法。 this.name=name; this.sayname=function(){ document.write(this.name); document.write("<br>"); } } var a=new classb("amy","helloworld"); a.printstr(); alert(a.getstr()); a.sayname(); </script>
function定义的代码块就相当于一个类,你可以用而且它有this关键字,你可以用this为它添加属性和方法,上述代码中有以下两句:
this.newmethod1=classa;
this.newmethod1(str);
classb中定义了newmethod1变量,它是一个引用,指向了classa,并且还调用了classa,这两句代码的作用等同于直接将classa代码块中的内容直接复制到这里,这样创建的classb对像当然具有classa的属性和方法了。对象冒充还可以实现多继承,如下:
function classz() { this.newmethod = classx; this.newmethod(); delete this.newmethod; this.newmethod = classy; this.newmethod(); delete this.newmethod; }
不过,classy会覆盖classx中同名的属性和方法,如果设计没问题的话,classz也不应该继承具有相同属性和方法的不同类。
2、利用call()方法
<script type="text/javascript"> function classa(str){ this.str=str; this.printstr=function(){ document.write(this.str); document.write("<br>"); } this.getstr=function(){ return this.str; } } function classb(name,str){ //利用call方法实现继承 classa.call(this,str); this.name=name; this.sayname=function(){ document.write(this.name); document.write("<br>"); } } var a=new classb("amy","helloworld"); a.printstr(); alert(a.getstr()); a.sayname(); </script>
call()方法中第一个参数传递一个对象,这里的this指的是当前对象,后面的参数(可能有多个)是指传递给调用call()方法的类(函数)所需要的参数,classa.call()也是相当于直接将classa代码块中的内容直接复制到这里,classb的对象同样可以直接使用classb中的变量和方法。
3、原型链
<script type="text/javascript"> function ca(){}; ca.prototype.name="john"; ca.prototype.sayname=function(){ document.write(this.name); document.write("<br>"); } function cb(){}; cb.prototype=new ca(); cb.prototype.age=23; cb.prototype.sayage=function(){ document.write(this.age); document.write("<br>"); } var objb=new cb(); objb.sayage(); objb.sayname(); document.write("is objb the instance of ca "+(objb instanceof ca)); document.write("<br>"); document.write("is objb the instance of cb "+(objb instanceof cb)); document.write("<br>"); </script>
这里对类的定义要用prototype关键字,定义function时不带有参数,prototype后面的变量或方法相当于java中被static修饰后的属性和方法,是属于所有对象的,这里有个特殊之处:cb.prototype=new ca();该句话相当于将ca对象内容复制给cb,cb还可以追加自己的属性和方法。
4、混合方法
<script type="text/javascript"> function ca(name){ this.name=name; }; ca.prototype.sayname=function(){ document.write(this.name); document.write("<br>"); } function cb(name,age){ ca.call(this,name); this.age=age; }; cb.prototype=new ca(); cb.prototype.sayage=function(){ document.write(this.age); document.write("<br>"); } var objb=new cb("alan",27); objb.sayname(); objb.sayage(); document.write("is objb the instance of ca "+(objb instanceof ca)); document.write("<br>"); document.write("is objb the instance of cb "+(objb instanceof cb)); document.write("<br>"); </script>
这里可以将属性封装在类体内,而方法利用原型方式定义,个人感觉,这是一个很好的设计方法,利用prototype定义的函数可以为多个对象重用,这里需要注意两点:cb类体内有ca.call(this,name);同时还要将cb原型赋为cb对象,即:cb.prototype=new ca();ca.call(this,name)同样相当于将ca类块内的代码复制于此,后面一句话又将ca的方法添加给cb,同时cb还可以追加自己的属性和方法。
以上是本次对javascript继承机制的总结,不足之处望各位指正批评。
下一篇: 身体被榨干缺滋润,揪出凶手留住水份