js的三种继承方式详解

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>

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

# js继承方式 # 三种继承方式 # 6种JavaScript继承方式及优缺点(小结) # JavaScript的六种继承方式(推荐) # 重新理解JavaScript的六种继承方式 # 浅谈js中的三种继承方式及其优缺点 # Javascript中的几种继承方式对比分析 # 浅析2种JavaScript继承方式 # Javascript编程中几种继承方式比较分析 # JavaScript中的继承方式详解 # js的2种继承方式详解 # javascript学习笔记（九）javascript中的原型(prototype)及原型链的继承方 # JavaScript 常见的继承方式汇总 # 小明 # 很方便 # script # gt # body # javascript # function # type # text # lt # js # prototype # strong # brush # xhtml # pre # class # Parent # nbsp # chi

返回目录在线咨询

上一篇：如何在 AWS EC2 实例上正确部署 Go Web 服务器并对外提供服务
下一篇：南通低价网站设计制作招聘,南通女子遭遇“杀猪盘”，两百万投资*网站被骗惨, 你怎么看？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

js的三种继承方式详解

您的项目需求