js的三种继承方式详解
1.js原型(prototype)实现继承
代码如下
<body>
<scripttype="text/javascript">
functionParent(name,age){
this.name=name;
this.age=age;
this.sayHi=function(){
alert("Hi,mynameis"+this.name+",myageis"+this.age);
}
}
//Child继承Parent
functionChild(grade){
this.grade=grade;
this.sayGrade=function(){
alert("Mygradeis"+this.grade);
}
}
Child.prototype=newParent("小明","10");///////////
varchi=newChild("5");
chi.sayHi();
chi.sayGrade();
</script>
</body>
2.构造函数实现继承
代码如下:
<body>
<scripttype="text/javascript">
functionParent(name,age){
this.name=name;
this.age=age;
this.sayHi=function(){
alert("Hi,mynameis"+this.name+",myageis"+this.age);
}
}
//Child继承Parent
functionChild(name,age,grade){
this.grade=grade;
this.sayHi=Parent;///////////
this.sayHi(name,age);
this.sayGrade=function(){
alert("Mygradeis"+this.grade);
}
}
varchi=newChild("小明","10","5");
chi.sayHi();
chi.sayGrade();
</script>
</body>
3.call,apply实现继承 -----很方便!
代码如下:
<body>
<scripttype="text/javascript">
functionParent(name,age){
this.name=name;
this.age=age;
this.sayHi=function(){
alert("Hi,mynameis"+this.name+",myageis"+this.age);
}
}
functionChild(name,age,grade){
this.grade=grade;
//Parent.call(this,name,age);///////////
//Parent.apply(this,[name,age]);///////////都可
Parent.apply(this,arguments);///////////
this.sayGrade=function(){
alert("Mygradeis"+this.grade);
}
//this.sayHi=function(){
//alert("Hi,mynameis"+this.name+",myageis"+this.age+",Mygradeis"+this.grade);
//}
}
varchi=newChild("小明","10","5");
chi.sayHi();
chi.sayGrade();
</script>
</body>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!