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> 

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

声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#nhooo.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。