js的三种继承方式详解

2019-11-19 17:50:37

字体：大中小

来源：转载

供稿：网友

1.js原型（prototype）实现继承

代码如下

<body> <script type="text/javascript">  function Parent(name,age){   this.name=name;   this.age=age;   this.sayHi=function(){    alert("Hi, my name is "+this.name+", my age is "+this.age);   }  }//Child继承Parent  function Child(grade){   this.grade=grade;   this.sayGrade=function(){    alert("My grade is "+this.grade);   }  }  Child.prototype=new Parent("小明","10");///////////   var chi=new Child("5");  chi.sayHi();  chi.sayGrade();</script> </body>

2.构造函数实现继承

代码如下:

<body> <script type="text/javascript">  function Parent(name,age){   this.name=name;   this.age=age;   this.sayHi=function(){    alert("Hi, my name is "+this.name+", my age is "+this.age);   }  }//Child继承Parent   function Child(name,age,grade){   this.grade=grade;   this.sayHi=Parent;///////////   this.sayHi(name,age);   this.sayGrade=function(){    alert("My grade is "+this.grade);   }  }  var chi=new Child("小明","10","5");  chi.sayHi();  chi.sayGrade();</script> </body>

3.call , apply实现继承 -----很方便！

代码如下:

<body> <script type="text/javascript">  function Parent(name,age){   this.name=name;   this.age=age;   this.sayHi=function(){    alert("Hi, my name is "+this.name+", my age is "+this.age);   }  }  function Child(name,age,grade){   this.grade=grade;   // Parent.call(this,name,age);///////////    // Parent.apply(this,[name,age]);/////////// 都可   Parent.apply(this,arguments);///////////    this.sayGrade=function(){    alert("My grade is "+this.grade);   }  // this.sayHi=function(){   //  alert("Hi, my name is "+this.name+", my age is "+this.age+",My grade is "+this.grade);   // }  }  var chi=new Child("小明","10","5");  chi.sayHi();  chi.sayGrade();</script> </body>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：详解Angualr 组件间通信

下一篇：微信小程序天气预报开发实例代码源码