JS 继承全解析：七大经典继承模式大揭秘

在JavaScript中，继承是实现代码复用和构建复杂对象结构的关键机制。不同于传统的基于类的语言，如Java或C++，JavaScript采用基于原型的继承模型。然而，随着ES6的引入，类的概念被加入到语言中，使得面向对象编程更为直观。在JavaScript中实现继承的多种手段各有其特点和适用场景，本文将探索七种不同的继承模式，从原型链继承到ES6的类继承。

1. 原型链继承

原型链继承是最基本的继承方式，利用JavaScript对象的__proto__属性（ 在JavaScript中通常使用Object.getPrototypeOf方法 ）来实现。每个对象都有一个指向其原型对象的链接，而这个原型对象又可能有它自己的原型，如此递归形成一条原型链。

• 实现方式：

function Parent() {
    this.name = 'Tom'
    this.like = [1, 2, 3]
}
function Child() {
    this.type = 'children'
}

Child.prototype = new Parent()
// s1.__proto__ === s2.__ptoto__
let s1 = new Child()
let s2 = new Child()

s1.like.push(4)

优点：

• 简单，易于理解和实现。
• 子类可以访问父类的所有原型方法。

缺点：

• 子类实例共享父类原型的引用类型属性。
• 每次创建子类实例时，父类构造函数会被调用一次，造成不必要的性能开销。
• 子类的constructor属性会指向父类构造函数，需要手动修正。
• 注意：
• 但此处的使用的 push 方法不一样，实例对象调用 push 方法是实例对象访问了原型上的值，并且帮原型调用 push 方法，所以可以修改原型上的值，此时其他的实例对象访问原型上的值也会访问到修改后的值。

2. 构造函数继承

构造函数继承通过在子构造函数内部调用父构造函数，允许子对象访问父对象的属性。

• 实现方式：

function Parent(name) {
    this.name = name;
    this.arr = [];
}

function Child(name) {
    Parent.call(this, name);
}

优点：

• 每个子类实例都有自己的属性副本，不会共享引用类型属性，不会相互影响。
• 可以向父类构造函数传参。
  缺点：
• 方法没有被复用，每个子类实例都会有自己的一份方法。
• 无法实现原型链上的方法继承。
  注意：
• 调用 call 方法，可以让实例对象显示继承父类上的值，此时子类实例调用 push 方法不管用，调用的 push 方法是调用子类实例自己的 push 方法。

3. 组合继承

组合继承结合了原型链继承和构造函数继承的优点，即可以访问父类的方法，同时也能拥有自己的属性。

• 实现方式：

function Parent(name) {
    this.name = name;
    this.arr = [];
}

Parent.prototype.getName = function() {
    return this.name;
};

function Child(name) {
    Parent.call(this, name);
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

优点：

• 子类实例有自己的属性副本。
• 可以访问父类原型上的方法。
• 可以向父类构造函数传参。
  缺点：
• 父类构造函数会被调用两次，一次在子类构造函数中，一次在设置子类原型时，性能开销大。
• 子类的constructor属性会指向父类构造函数，需要手动修正。

4. 寄生继承

寄生继承创建一个新对象，修改这个对象，然后返回这个对象。这种方式通常用于封装创建过程，使对象的创建更加灵活

• 实现方式：

Parent.prototype.getName = function() {
  return this.name
}
function Parent() {
  this.name = 'Tom'
  this.like = [1, 2, 3]
}

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

Child.prototype = Object.create(Parent.prototype) // new Parent()
Child.prototype.constructor = Child

let s1 = new Child()
let s2 = new Child()

• 优点：
• 可以在克隆的原型上扩展新属性和方法。
• 缺点：
• 需要额外的封装，不适合大规模的继承场景。
• 子类的constructor属性会指向父类构造函数，需要手动修正。

5. 原型式继承

原型式继承允许创建一个新对象，该对象具有指定对象的属性。这是通过使用Object.create方法实现的，该方法接受一个对象作为参数，并创建一个新对象，其原型设置为传入的对象。

• 实现方式：

let parent = {
  name: 'Tom',
  age: 40,
  like: [1, 2]
}

function clone(obj) {
    let clone = Object.create(obj)
    clone.getLike = function() {
      return this.like
    }
    return clone
}

let child = clone(parent)
let child2 = clone(parent)

• 优点：
• 简单，不需要定义构造函数。
• 缺点：
• 无法向父类传参。
• 不适合创建多个实例，因为所有实例都会共享相同的原型，会相互影响。

6. 寄生组合继承

寄生组合继承是一种优化的组合继承，避免了两次调用父构造函数的问题，而是通过借用构造函数来创建一个新对象，然后将其属性复制给子对象的原型。

实现方式：

function Parent(name) {
    this.name = name;
    this.arr = [];
}

Parent.prototype.getName = function() {
    return this.name;
};

function Child(name) {
    Parent.call(this, name);
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

• 优点：
• 解决了组合继承中父类构造函数被调用两次的问题。
• 具备组合继承的所有优点。
• 缺点：
• 需要额外的函数封装，代码略显复杂。
• 子类的constructor属性会指向父类构造函数，需要手动修正。

7. ES6 类继承

ES6引入了类语法，虽然它们本质上仍然是基于原型的，但提供了更接近传统类语言的语法糖。类继承使用extends关键字和super关键字来实现。

• 实现方式：

class Parent {
    constructor(name) {
        this.name = name;
    }
    
    getName() {
        return this.name;
    }
}

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

• 优点：
• 语法糖，使代码更接近传统OOP语言的写法。
• 易于阅读和维护。
• 缺点：
• 在早期的浏览器中可能需要转译支持。
• 性能上可能略逊于原型链继承，但差异通常很小。

每种继承方式都有其适用场景，选择哪一种取决于具体需求和对性能的考量。但在现代JavaScript开发中，ES6类继承因其简洁性和易读性而成为首选。希望本文能帮助你更好地理解和应用JavaScript中的继承模式。