js实现继承的方式总结

最近忙着憋论文好痛苦啊。。。。还要准备接下来的面试更痛苦啊。。。。好了，这里总结下js实现继承的方式，材料均来自网络。

ECMAScript没有明确的继承机制，而是通过模仿实现的，主要有以下几种：

1.使用对象冒充实现继承(该种实现方式可以实现多继承)

实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值

示例

function Parent(firstname)
{
this.fname=firstname;
this.age=40;
this.sayAge=function()
{
console.log(this.age);
}
}
function Child(firstname)
{
this.parent=Parent;
this.parent(firstname);
delete this.parent;
this.saySomeThing=function()
{
console.log(this.fname);
this.sayAge();
}
}
var mychild=new Child("李");
mychild.saySomeThing();

2.采用call方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链，则采用5混合模式)

实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象

示例

function Parent(firstname)
{
this.fname=firstname;
this.age=40;
this.sayAge=function()
{
console.log(this.age);
}
}
function Child(firstname)
{

this.saySomeThing=function(){    console.log(this.fname);    this.sayAge();}

this.getName=function()
{
return firstname;
}

}
var child=new Child("张");
Parent.call(child,child.getName());
child.saySomeThing();

3.采用Apply方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链，则采用5混合模式)

实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象

示例

function Parent(firstname)
{
this.fname=firstname;
this.age=40;
this.sayAge=function()
{
console.log(this.age);
}
}
function Child(firstname)
{

this.saySomeThing=function(){    console.log(this.fname);    this.sayAge();}this.getName=function(){    return firstname;}

}
var child=new Child("张");
Parent.apply(child,[child.getName()]);
child.saySomeThing();

4.采用原型链的方式实现继承

实现原理:使子类原型对象指向父类的实例以实现继承,即重写类的原型,弊端是不能直接实现多继承

示例

function Parent()
{

this.sayAge=function(){    console.log(this.age);}

}
function Child(firstname)
{
this.fname=firstname;
this.age=40;
this.saySomeThing=function()
{
console.log(this.fname);
this.sayAge();
}
}

Child.prototype=new Parent();
var child=new Child("张");
child.saySomeThing();

5.采用混合模式实现继承

示例

function Parent()
{

this.sayAge=function(){    console.log(this.age);}

}

Parent.prototype.sayParent=function()
{
alert("this is parentmethod!!!");
}

function Child(firstname)
{
Parent.call(this);
this.fname=firstname;
this.age=40;
this.saySomeThing=function()
{
console.log(this.fname);
this.sayAge();
}
}

Child.prototype=new Parent();
var child=new Child("张");
child.saySomeThing();
child.sayParent();
未完待续。。。（等我睡醒了，继续总结）

参考

1.js实现继承的5中方式[br]2.ES6 Class[br]3.js继承方式详解[br]4.前段开发必须知道的js(一)原型和继承

关键字：产品经理

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！