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中的继承模式。