js实现继承的5种方式

js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式

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();  
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值