Javascript的ES5、ES6的7种继承详解

Javascript是一种面向对象的语言，继承是面向对象编程中的重要概念。ES5和ES6是Javascript中的两个版本，都提供了不同的继承方式。本攻略将介绍Javascript中ES5和ES6的7种继承方式。

1. 原型链继承

原型链继承是Javascript中最基本、最常用的继承方式。通过将父类的实例作为子类的原型，实现子类对父类成员变量和方法的继承。

实现示例

function Parent() {
    this.name = 'parent';
    this.play = [1, 2, 3];
}

function Child() {
    this.type = 'child';
}

Child.prototype = new Parent();

2. 构造函数继承

构造函数继承是通过在子类的构造函数中调用父类构造函数，实现对父类成员变量和方法的继承。

实现示例

function Parent() {
    this.name = 'parent';
    this.play = [1, 2, 3];
}

function Child() {
    Parent.call(this);
    this.type = 'child';
}

3. 组合继承

组合继承是将原型链继承和构造函数继承结合起来使用，实现继承。

实现示例

function Parent() {
    this.name = 'parent';
    this.play = [1, 2, 3];
}

function Child() {
    Parent.call(this);
    this.type = 'child';
}

Child.prototype = new Parent();

4. 原型式继承

原型式继承是使用一个中间对象作为父类实例的原型，实现对父类成员变量和方法的继承。

实现示例

function createObj(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

var parent = {
    name: 'parent',
    play: [1, 2, 3]
};

var child = createObj(parent);
child.type = 'child';

5. 寄生式继承

寄生式继承是在原型式继承的基础上，对中间对象进行扩展从而使其具有更多的功能。

实现示例

function createObj(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

function createChild(parent) {
    var child = createObj(parent);
    child.type = 'child';
    return child;
}

var parent = {
    name: 'parent',
    play: [1, 2, 3]
};

var child = createChild(parent);

6. 寄生组合式继承

寄生组合继承是在组合继承的基础上，将父类的原型赋值给中间对象，并将子类的原型指向中间对象，从而达到不重复调用父类构造函数，提高性能的效果。

实现示例

function Parent() {
    this.name = 'parent';
    this.play = [1, 2, 3];
}

function Child() {
    Parent.call(this);
    this.type = 'child';
}

(function() {
    var F = function() {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
})();

7. class继承

class继承是ES6新增的继承方式，通过使用class语法糖，实现对父类成员变量和方法的继承。

实现示例

class Parent {
    constructor() {
        this.name = 'parent';
        this.play = [1, 2, 3];
    }
}

class Child extends Parent {
    constructor() {
        super();
        this.type = 'child';
    }
}

以上就是Javascript中ES5和ES6的7种继承方式的详细讲解和示例，希望对您有所帮助。