js 的继承怎么理解

JavaScript的继承机制可以通过原型链继承、构造函数继承、组合继承、ES6类继承等方式实现。 在这其中，ES6类继承是目前最推荐的方式，因为它语法简洁，易于理解和维护。下面我们详细展开介绍ES6类继承的具体实现。

一、原型链继承

原型链继承是JavaScript最基础的继承方式，它利用对象的原型（prototype）来实现继承。

1.1 原型链的基础概念

在JavaScript中，每个对象都有一个__proto__属性，指向它的原型对象。原型对象本身也有一个__proto__属性，指向它的原型，这样一层一层直到null为止，这种层层连接的链条就是原型链。

function Parent() {
    this.name = 'parent';
}
Parent.prototype.getName = function() {
    return this.name;
}
function Child() {
    this.age = 18;
}
Child.prototype = new Parent();
let child = new Child();
console.log(child.getName());  // 输出 'parent'

1.2 原型链继承的优缺点

优点：

简单易懂，代码量少。

缺点：

所有实例共享父类的引用属性，一旦一个实例修改了引用类型的值，其他实例也会受到影响。
无法向父类构造函数传参，实例化时不能定制化。

二、构造函数继承

构造函数继承是通过在子类的构造函数中调用父类的构造函数来实现的。

2.1 构造函数继承的实现

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}
let child1 = new Child('child1', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'blue', 'green', 'black']
let child2 = new Child('child2', 20);
console.log(child2.colors);  // ['red', 'blue', 'green']

2.2 构造函数继承的优缺点

优点：

解决了原型链继承中引用类型共享的问题。
可以向父类构造函数传参。

缺点：

方法都在构造函数中定义，每次创建实例都会创建一遍方法，无法实现函数复用。

三、组合继承

组合继承结合了原型链继承和构造函数继承的优点，是一种常见的继承方式。

3.1 组合继承的实现

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.getName = function() {
    return this.name;
}
function Child(name, age) {
    Parent.call(this, name);  // 第二次调用 Parent
    this.age = age;
}
Child.prototype = new Parent();  // 第一次调用 Parent
Child.prototype.constructor = Child;
let child1 = new Child('child1', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'blue', 'green', 'black']
console.log(child1.getName());  // 'child1'
let child2 = new Child('child2', 20);
console.log(child2.colors);  // ['red', 'blue', 'green']
console.log(child2.getName());  // 'child2'

3.2 组合继承的优缺点

优点：

避免了引用类型属性共享的问题。
可以传参，方法可以复用。

缺点：

调用了两次父类构造函数，产生了不必要的性能开销。

四、ES6类继承

ES6引入了class关键字，提供了更为简洁和清晰的语法来实现继承。

4.1 ES6类继承的实现

class Parent {
    constructor(name) {
        this.name = name;
        this.colors = ['red', 'blue', 'green'];
    }
    getName() {
        return this.name;
    }
}
class Child extends Parent {
    constructor(name, age) {
        super(name);  // 调用父类的构造函数
        this.age = age;
    }
}
let child1 = new Child('child1', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'blue', 'green', 'black']
console.log(child1.getName());  // 'child1'
let child2 = new Child('child2', 20);
console.log(child2.colors);  // ['red', 'blue', 'green']
console.log(child2.getName());  // 'child2'

4.2 ES6类继承的优缺点

优点：

语法简洁清晰，易于理解和维护。
支持调用父类的构造函数和方法。

缺点：

某些低版本的浏览器不支持，需要使用Babel等工具进行转码。

五、不同继承方式的对比

综合来看，各种继承方式各有优缺点，选择哪种方式需要根据具体需求来决定。

5.1 原型链继承 vs 构造函数继承

原型链继承适合不需要传参和定制化实例的场景，而构造函数继承则适合需要传参和避免引用类型共享的场景。

5.2 组合继承 vs ES6类继承

组合继承虽然解决了原型链继承和构造函数继承的缺点，但存在调用两次父类构造函数的问题。而ES6类继承则提供了更为简洁和高效的解决方案，是目前最推荐的继承方式。

六、实际应用中的注意事项

在实际应用中，继承机制不仅仅是代码实现的问题，更涉及到设计模式和架构设计。

6.1 避免过度继承

过度使用继承会导致代码复杂度增加，维护困难。应根据实际需求选择合适的继承方式，避免过度设计。

6.2 组合优于继承

在许多情况下，组合（composition）比继承更灵活和易于维护。通过组合不同的模块和功能，可以实现更为灵活的架构设计。

class Engine {
    start() {
        console.log('Engine started');
    }
}
class Car {
    constructor(engine) {
        this.engine = engine;
    }
    drive() {
        this.engine.start();
        console.log('Car is driving');
    }
}
let myEngine = new Engine();
let myCar = new Car(myEngine);
myCar.drive();

通过以上方式，我们可以在不使用继承的情况下，实现模块化和复用性强的设计。

七、结论

JavaScript的继承机制丰富多样，每种方式都有其优缺点。对于现代开发来说，ES6类继承是最推荐的方式，它不仅语法简洁、易于理解和维护，还能充分利用父类的功能。在实际应用中，我们还需根据具体需求和设计模式，灵活选择和应用不同的继承方式或组合方式，以实现最优的代码结构和性能表现。