浅谈原型式继承、借助构造函数、组合方式继承

原型式继承

原型式继承,就是一定一个函数,该函数中创建一个临时性的构造函数,将作为参数,传入的对象作为这个构造函数的原型,最后返回这个构造函数的实例对象

/*定义函数:用于实现对象之间的继承
    参数:
    obj:表示继承关系中的父级对象
    prop:对象格式,表示继承关系中的子级对象的属性和方法
*/
function fn(obj,porp){
    //定义一个临时的构造函数
    function Fun(){
       //遍历对象的属性和方法
       for(var attrName in porp){
           this[attrName]=porp[attrName];
       }
    }
    //将函数的参数作为构造函数的原型
    Fun.prototype=obj;
    //将构造函数创建的对象进行返回
    return new Fun();
}
var obj={
    name:'前端'
}
//调用函数
var result=fn(obj,{
    age:20,
    sayMe:function(){
        console.log('this is function');
    }
});
console.log(result.age);
result.sayMe();

利用Object.create()方法实现继承

var obj={
    name:'前端'
}
var newObj=object.create(obj,{
    age:{
        value:20
    },
    sayMe:{
        value:function(){
            console.log('this is function');
        }
    }
});
console.log(newObj.age);
newObj.sayMe();

借助构造函数

无论是原型链还是原型式继承,都具有相同的问题。想要解决这样的问题的话,可以借助构造函数(也可以叫做伪造对象或经典继承)。
这种方式实现非常简单,就是在子对象的构造函数中调用父对象的构造函数。具体可以通过调用apply()和call()方法实现。
apply()和call()方法都允许传递指定某个对象的this。对于继承来讲,可以实现在子对象的构造函数中调用父对象的构造函数时,将子对象的this和父对象的this绑定在一起

//定义父级对象的构造函数
function Parent(){
    this.parent='parent';
}

//定义子级对象的构造函数
function child(){
    //调用父级对象的构造函数:使用apply()或call()方法
    Parent.call(this);
    
    this.child='child';
}
//创建子级对象
var child=new Child();
console.log(child);

组合方式继承

组合继承,也叫做伪经典继承,指的是将原型链或原型式继承和借助构造函数的技术组合在一起,发挥二者长处的一种继承方式
具体实现的思路就是:

  • 使用原型链或原型式继承实现对原型的属性和方法的继承。
  • 通过借助构造函数实现对实例对象的属性的继承

这样,既通过在原型上定义方法实现了函数的重用,又可以保证每个对象都有自己的专有属性

function Parent(){
    //构造函数的自有属性
    this.name='前端';
}
//构造函数的原型属性
Parent.prototype.age=20;

function Child(){
    //继承父级构造函数中的自有属性
    Parent.call(this);
    
    this.job='IT';
}
//继承父级构造函数中的原型属性
Child.prototype=Parent.prototype;

var child=new Child();

console.log(child.job);
console.log(child.age);
console.log(child.name);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值