JavaScript

超轻量级php框架startmvc

js的三种继承方式详解

更新时间:2020-04-21 00:24 作者:startmvc
1.js原型(prototype)实现继承代码如下<body><scripttype="text/javascript">functionParent(name,age

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> 

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