JavaScript几种继承方式
程序员文章站
2023-08-19 09:11:52
我们先构建一个Person的构造函数 然后通过构建Student构造函数演示几种继承方式 1.通过原型链方式进行继承 注意:使用此方式进行继承,在Student构造函数中添加原型方法应注意在改变原型指向后添加方法,上述代码中Student实例化后,Student的方式Study1调用失败study2 ......
我们先构建一个person的构造函数
function person(name) { this.name=name; } person.prototype.sayhi=function () { console.log(this.name+",您好"); }
然后通过构建student构造函数演示几种继承方式
1.通过原型链方式进行继承
function student(age){ this.age=age; }
student.prototype.study1=function () { console.log("我热衷于学习"); }
student.prototype=new person(“张三”);//改变原型指向,指向person的实例对象的__proto__ student.prototype.study2=function () { console.log("我热衷于敲代码"); }
注意:使用此方式进行继承,在student构造函数中添加原型方法应注意在改变原型指向后添加方法,上述代码中student实例化后,student的方式study1调用失败study2才可调用成功
存在缺点:person的实例化对象时name属性固定为“张三”,当多次实例化student对象时,导致继承的name属性一直为“张三”;
2.在构造student函数中使用call方式进行继承
function student(age,name) { this.age=age; person.call(this,name);//通过call方式改变this指向 } student.prototype.study=function () { console.log("学习"); }
存在缺点:此方式在student实例化对象,可以调用student原有方法study,但是无法调用person构造函数中的方法
3.组合继承
function student(age,name) { this.age=age; person.call(this,name);//通过call方式改变this指向 } student.prototype=new person();//改变原型的指向 student.prototype.study=function () { console.log("学习"); }
解决了上述两种方式出现的问题
4.拷贝继承
var obj1={ name:"张三", age:16, sayhi:function () { console.log(this.name+",您好"); } } var obj2={}; for(var key in obj1){ obj2[key]=obj1[key]; } console.dir(obj2); console.dir(obj1);
下一篇: Javascript获取元素的xpath