zoukankan      html  css  js  c++  java
  • Javascript继承机制的实现

    学完了Javascript类和对象的创建之后,现在总结一下Javascript继承机制的实现。Javascript并不像Java那样对继承机制有严格明确的定义,它的实现方式正如它的变量的使用方式那样也是十分宽松的,你可以设计自己的方法“模仿”继承机制的实现。有以下几种方法:

    1、对象冒充

     1 <script type="text/javascript">
     2     function classA(str){
     3         this.str=str;
     4         this.printstr=function(){
     5             document.write(this.str);
     6             document.write("<br>");
     7         }
     8         this.getstr=function(){
     9             return this.str;
    10         }        
    11     }
    12     function classB(name,str){
    13         //下面这两句代码相当于将classA代码体中的内容搬到这里
    14         this.newMethod1=classA;
    15         this.newMethod1(str);
    16         //注意,这里的写法
    17         delete this.newMethod1;
    18         //新的方法和属性的定义须在删除了newMethod之后定义,因为可能覆盖超类的属性和方法。
    19         this.name=name;
    20         this.sayName=function(){
    21             document.write(this.name);
    22             document.write("<br>");
    23         }
    24         
    25     }
    26     var a=new classB("Amy","helloworld");
    27     a.printstr();
    28     alert(a.getstr());
    29     a.sayName();
    30 </script>
    View Code

    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()方法

     1 <script type="text/javascript">
     2     function classA(str){
     3         this.str=str;
     4         this.printstr=function(){
     5             document.write(this.str);
     6             document.write("<br>");
     7         }
     8         this.getstr=function(){
     9             return this.str;
    10         }        
    11     }
    12     function classB(name,str){
    13     //利用call方法实现继承
    14         classA.call(this,str);
    15         this.name=name;
    16         this.sayName=function(){
    17             document.write(this.name);
    18             document.write("<br>");
    19         }
    20         
    21     }
    22     var a=new classB("Amy","helloworld");
    23     a.printstr();
    24     alert(a.getstr());
    25     a.sayName();
    26 </script>
    View Code

    call()方法中第一个参数传递一个对象,这里的this指的是当前对象,后面的参数(可能有多个)是指传递给调用call()方法的类(函数)所需要的参数,classA.call()也是相当于直接将classA代码块中的内容直接复制到这里,classB的对象同样可以直接使用classB中的变量和方法。

    3、原型链

     1 <script type="text/javascript">
     2     function cA(){};
     3     cA.prototype.name="John";
     4     cA.prototype.sayName=function(){
     5         document.write(this.name);
     6         document.write("<br>");
     7     }
     8     function cB(){};
     9     cB.prototype=new cA();
    10     cB.prototype.age=23;
    11     cB.prototype.sayAge=function(){
    12         document.write(this.age);
    13         document.write("<br>");
    14     }
    15     var objB=new cB();
    16     objB.sayAge();
    17     objB.sayName();
    18     document.write("is objB the instance of cA "+(objB instanceof cA));
    19     document.write("<br>");
    20     document.write("is objB the instance of cB "+(objB instanceof cB));
    21     document.write("<br>");
    22 </script>
    View Code

    这里对类的定义要用prototype关键字,定义function时不带有参数,prototype后面的变量或方法相当于java中被static修饰后的属性和方法,是属于所有对象的,这里有个特殊之处:cB.prototype=new cA();该句话相当于将cA对象内容复制给cB,cB还可以追加自己的属性和方法。

    4、混合方法

     1 <script type="text/javascript">
     2     function cA(name){
     3         this.name=name;
     4     };
     5     cA.prototype.sayName=function(){
     6         document.write(this.name);
     7         document.write("<br>");
     8     }
     9     function cB(name,age){
    10         cA.call(this,name);
    11         this.age=age;
    12     };
    13     cB.prototype=new cA();
    14     cB.prototype.sayAge=function(){
    15         document.write(this.age);
    16         document.write("<br>");
    17     }
    18     var objB=new cB("Alan",27);
    19     objB.sayName();
    20     objB.sayAge();
    21     document.write("is objB the instance of cA "+(objB instanceof cA));
    22     document.write("<br>");
    23     document.write("is objB the instance of cB "+(objB instanceof cB));
    24     document.write("<br>");
    25 </script>
    View Code

    这里可以将属性封装在类体内,而方法利用原型方式定义,个人感觉,这是一个很好的设计方法,利用prototype定义的函数可以为多个对象重用,这里需要注意两点:cB类体内有cA.call(this,name);同时还要将cB原型赋为cB对象,即:cB.prototype=new cA();cA.call(this,name)同样相当于将cA类块内的代码复制于此,后面一句话又将cA的方法添加给cB,同时cB还可以追加自己的属性和方法。

    以上是本次对Javascript继承机制的总结,不足之处望各位指正批评。

  • 相关阅读:
    flex布局语法
    sqlserver判断text字段是否有数据
    z-index设置后导致遮罩层显示跳动问题
    C# UpdatePanel加载完毕回调JS
    json日期字符串格式化时间
    钉钉考勤机开发需要注意的一个坑
    python bs4 + requests4 简单爬虫
    温故而知新: 关于 js Form 方式提交的一些新认知
    window 环境 Composer 安装 thinkphp5
    百度地图 绘制东莞东城地图示例
  • 原文地址:https://www.cnblogs.com/codeMedita/p/6920851.html
Copyright © 2011-2022 走看看