js的三种继承方式详解
编程学习 2021-07-04 19:20www.dzhlxh.cn编程入门
本文主要介绍了js的三种继承方式。具有一定的参考价值，狼蚁网站SEO优化跟着长沙网络推广一起来看下吧
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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持狼蚁SEO！
上一篇：详解Angualr 组件间通信
下一篇：微信小程序 天气预报开发实例代码源码