欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Javascript继承机制详解

程序员文章站 2022-06-20 16:18:22
学完了javascript类和对象的创建之后,现在总结一下javascript继承机制的实现。javascript并不像java那样对继承机制有严格明确的定义,它的实现方式...

学完了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继承机制的总结,不足之处望各位指正批评。