ES5实现组合继承的原理

ES5实现继承的原理

一、创建父构造函数

function Phone(name,price){
    this.name = name;
    this.price = price;
}
//父构造函数的方法
Phone.prototype.play = function(){
    console.log("玩游戏");
}

二、创建子构造函数

• 先调用父级构造函数里的初始化代码
• 通过call方法改变父构造函数的this值，让他指向子构造函数的this
• 传入参数，就可以完成初始化了
• 最后初始化子类独有的属性

function SmartPhone(name,price,color){
    //调用父级构造函数里的初始化代码
    //通过call方法改变Phone的this值，传入参数并初始化了
    Phone.call(this,name,price);
    //初始化子类独有的属性
    this.color = color;
}

三、设置子构造函数的原型

• SmartPhone这个实例对象就会继承到父级的play方法
• 让SmartPhone的构造函数重新指回自己

SmartPhone.prototype = new Phone;
SmartPhone.prototype.constructor = SmartPhone;

四、声明子类的方法

SmartPhone.prototype.photo = function(){
    console.log("我可以拍照");
}

五、实例化子构造函数

const huawe = new SmartPhone('Nova6','2500','黑色');
console.log(huawe);//Object { name: "Nova6", price: "2500", color: "黑色" }

• 子属性继承没有问题

• 子类自身的方法

• 继承到的父类方法
  

总结

在ES6以前js通过prototype和改变构造函数this指向实现组合继承