JavaScript继承的进化

JavaScript继承延展（透彻）

内容有点多，耐心看完一定有收获

数据 --父类

// 父类
function Father(vehicle){
    this.name = 'Father';
    this.vehicle = vehicle;
    this.trait = ['高富帅', 180];
}
// 父类原型上的方法
Father.prototype.eat = function(){
    console.log(this.name + '一天能吃两大碗');
}

原型链继承

// 子类
function Son(){
    this.name = 'Son';
}

Son.prototype = new Father('迈巴赫');

const son1 = new Son();
const son2 = new Son();

son1.trait.push('兜里有货');

console.log('son1：', son1);
console.log('son2：', son2);

缺点：

• 引用类型的值被私有子类共享：我只修改了son1里面的trait，但是son2里面的也被修改了
• 创建Son实例的时候就无法在修改Father里的参数：明明Father有很多车，但是你和你兄弟只能共同继承一辆迈巴赫，气不气

回到顶部 目录

借助构造函数继承

// 子类
function Son(vehicle){
    this.name = 'Son';
    Father.call(this, vehicle);
}

const son1 = new Son('迈巴赫');
const son2 = new Son('红旗');

son1.trait.push('兜里有货');

console.log('son1：', son1);
console.log('son2：', son2);

优点：改良了原型链继承的所有缺点
缺点：

• 把父类的属性和方法全部继承在构造函数上面，这时每创建一个实例对象，都会创建一遍
• 父类的原型上的方法无法继承

回到顶部 目录

组合继承

是时候双剑合璧了：原型链继承 + 借助构造函数继承

// 子类
function Son(vehicle){
    this.name = 'Son';
    Father.call(this, vehicle);
}

Son.prototype = new Father();
Son.prototype.constructor = Son;

const son1 = new Son('迈巴赫');
const son2 = new Son('红旗');

son1.trait.push('兜里有货');

console.log('son1：', son1);
console.log('son2：', son2);

优点：融合原型链继承和借助构造函数继承两种继承方式的优点，是JavaScript最常见的一种继承方式
缺点：仔细发现Son继承了两遍Father的构造函数，给你的车子过户的时候整两遍程序，开不开心

回到顶部 目录

原型式继承

也就是ES5中的Object.crate()：

const obj = {
    name: 'Father',
    trait: ['高富帅', 180],
}

function createObj(obj){
    function Fn(){}
    Fn.prototype = obj;
    return new Fn();
}

const son1 = createObj(obj);
const son2 = createObj(obj);

son1.trait.push('兜里有货');

console.log('son1：', son1);
console.log('son2：', son2);

• 原型式继承和原型链继承没有本质上的区别
• 优点：可以实现基于一个对象的简单继承，不必创建构造函数
• 缺点：和原型链继承的第一点一模一样

回到顶部 目录

寄生式继承

和原型式继承没有什么区别，主要就是多了一点，可以创建自己的方法

function createObj(obj){
    let fn = Object.create(obj);
    
    fn.log = function(){
        console.log('并没有什么用');
    }
    return fn;
}

• 寄生式继承和原型式继承，就到继承对象上面玩玩就行了
• 在给对象添加函数时，无法做到函数的复用

回到顶部 目录

组合式继承

组合继承的升级版

// 子类
function Son(vehicle){
    Father.call(this, vehicle); // 放在构造函数最上面，防止重名
    this.name = 'Son';
}

function Fn(){}
Fn.prototype = Father.prototype
const f = new Fn();
f.constructor = Son;
Son.prototype = f;

const son1 = new Son('迈巴赫');
const son2 = new Son('红旗');

son1.trait.push('兜里有货');

console.log('son1：', son1);
console.log('son2：', son2);

• 改良了组合继承的创建两次构造函数
• 此方法为最终版本，E6以前最常用的继承方法

回到顶部 目录

混入方式继承

其实就是拷贝：详谈JavaScript深浅拷贝

ES6的extends继承

// 父类
class Father{
    constructor(vehicle){
        this.name = 'Father';
        this.vehicle = vehicle;
        this.trait = ['高富帅', 180];
    }

    eat(){
        console.log(this.name + '一天能吃两大碗');
    }
}

// 子类
class Son extends Father{
    constructor(vehicle){
        super(vehicle);
        this.name = 'Son';
    }
}

const son1 = new Son('迈巴赫');
const son2 = new Son('红旗');

son1.trait.push('兜里有货');

console.log('son1：', son1);
console.log('son2：', son2);

• 一个extends和一个super(vehicle)就解决了继承问题
• 其实就是组合式继承的语法糖
• 我估摸着以后继承的天下就是它了

回到顶部 目录