Javascript继承机制的详细介绍

这篇文章主要介绍“Javascript继承机制的详细介绍”,在日常操作中,相信很多人在Javascript继承机制的详细介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Javascript继承机制的详细介绍”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创新互联公司长期为近1000家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为漳浦企业提供专业的成都网站制作、成都做网站,漳浦网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

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

1、对象冒充

 
   function classA(str){
     this.str=str;
     this.printstr=function(){
       document.write(this.str);
       document.write("
");      }      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("
");      }          }    var a=new classB("Amy","helloworld");    a.printstr();    alert(a.getstr());    a.sayName();  

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

 
   function classA(str){
     this.str=str;
     this.printstr=function(){
       document.write(this.str);
       document.write("
");      }      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("
");      }          }    var a=new classB("Amy","helloworld");    a.printstr();    alert(a.getstr());    a.sayName();  

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

3、原型链

 
   function cA(){};
   cA.prototype.name="John";
   cA.prototype.sayName=function(){
     document.write(this.name);
     document.write("
");    }    function cB(){};    cB.prototype=new cA();    cB.prototype.age=23;    cB.prototype.sayAge=function(){      document.write(this.age);      document.write("
");    }    var objB=new cB();    objB.sayAge();    objB.sayName();    document.write("is objB the instance of cA "+(objB instanceof cA));    document.write("
");    document.write("is objB the instance of cB "+(objB instanceof cB));    document.write("
");  

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

4、混合方法

 
   function cA(name){
     this.name=name;
   };
   cA.prototype.sayName=function(){
     document.write(this.name);
     document.write("
");    }    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("
");    }    var objB=new cB("Alan",27);    objB.sayName();    objB.sayAge();    document.write("is objB the instance of cA "+(objB instanceof cA));    document.write("
");    document.write("is objB the instance of cB "+(objB instanceof cB));    document.write("
");  

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

到此,关于“Javascript继承机制的详细介绍”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


分享文章:Javascript继承机制的详细介绍
本文地址:http://pwwzsj.com/article/jeghec.html