Javascript继承机制详解

网络编程 2024/11/19 佚名

3 1 2

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

javascript继承机制,js继承机制,Javascript继承机制详解

风云阁资源网 Design By www.bgabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

风云阁资源网 Design By www.bgabc.com

评论“Javascript继承机制详解”

暂无评论...

www.bgabc.com 风云阁资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

Javascript继承机制详解

Javascript创建类和对象详解

Vue2.x中的Render函数详解

评论“Javascript继承机制详解”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接