JavaScript 中的继承:ES3、ES5 和 ES6

6,042

选择一种继承方式

JavaScript 是一门动态语言,动态意味着高灵活性,而这尤其可以体现在继承上面。JavaScript 中的继承有很多种实现方式,可以分成下面四类:

  1. Mixin 模式,即属性混入,从一个或多个对象中复制属性到新的对象中
  2. 方法借用模式,即通过 call 或 apply 实现方法的重用
  3. 原型模式,使用 Object.create 方法直接以一个对象为原型创造新的对象
  4. 类模式,实际上是使用构造函数或 ES6 class

前三种有一个共同点,就是没有“类”的概念,它们在适当的场景下非常有用,不过也因为没有类,缺失了很多经典面向对象继承的要素。例如父子对象之间没有严格的传承关系,即不一定是 is-a 的关系,这决定了无法将它们直接应用在面向对象分析与设计方面,可以说它们并不是真正的继承,而是介于继承和组合之间的代码复用方案。

而第四种,类式继承,无论是使用构造函数还是 ES6 加入的 class,都能表达明确的继承关系,在需要对继承重度使用的场景下,应该使用类式继承。接下来,本文讨论的都是类式继承。

有一点需要牢记:继承是一种强耦合,应该谨慎使用。

如何学习 JavaScript 中的继承

理解 JavaScript 里面的类继承实现方式,我认为最好的方法是——找一门面向对象机制更为完善的语言,去理解其中的继承。实际上,JavaScript 中以前就有的 new 和 ES6 加入的 class,都是参考自 Java 语言。

不过,这样的对照学习是有前提条件的,即首先掌握 JavaScript 中的原型、原型链和作用域,否则很容易误解 JavaScript 本质的执行机制。如果已经理解了这些前置知识,就可以探索一下 JavaScript 中的继承了。

用 ES3 实现继承

实现要点:

  1. 利用 Person.call(this) 执行“方法借用”,获取 Person 的属性
  2. 利用一个空函数将 Person.prototype 加入原型链
function Person(name) {
  this.name = name;
}

Person.prototype.printName = function() {
  console.log(this.name);
};

function Bob() {
  Person.call(this, "Bob");
  this.hobby = "Histroy";
}

function inheritProto(Parent, Child) {
  var Fn = function() {};
  Fn.prototype = Parent.prototype;
  Child.prototype = new Fn();
  Child.prototype.constructor = Child;
}

inheritProto(Person, Bob);

Bob.prototype.printHobby = function() {
  console.log(this.hobby);
};

console.dir(new Bob());

dir 输出:

Bob
  |-- hobby:"Histroy"
  |-- name:"Bob"
  |-- __proto__:Person
      |-- printHobby:ƒ ()
      |-- constructor:ƒ Bob()
      |-- __proto__:
          |-- printName:ƒ ()
          |-- constructor:ƒ Person(name)
          |-- __proto__:Object

用 ES5 实现继承

实现要点:

  1. 利用 Person.call(this) 执行“方法借用”,获取 Person 的属性
  2. 利用 ES5 增加的 Object.create 方法将 Person.prototype 加入原型链
function Person(name) {
  this.name = name;
}

Person.prototype.printName = function() {
  console.log(this.name);
};

function Bob() {
  Person.call(this, "Bob");
  this.hobby = "Histroy";
}

Bob.prototype  = Object.create(Person.prototype, {
  constructor: {
    value: Bob,
    enumerable: false,
    configurable: true,
    writable: true
  }
});

Bob.prototype.printHobby = function() {
  console.log(this.hobby);
};

console.dir(new Bob());

dir 输出:

Bob
  |-- hobby:"Histroy"
  |-- name:"Bob"
  |-- __proto__:Person
      |-- printHobby:ƒ ()
      |-- constructor:ƒ Bob()
      |-- __proto__:
          |-- printName:ƒ ()
          |-- constructor:ƒ Person(name)
          |-- __proto__:Object

用 ES6 实现继承

实现要点:

  1. 利用 ES6 增加的 class 和 extends 实现比以前更完善的继承
class Person {
  constructor(name) {
    this.name = name;
  }

  printName() {
    console.log(this.name);
  }
}

class Bob extends Person {
  constructor() {
    super("Bob");
    this.hobby = "Histroy";
  }

  printHobby() {
    console.log(this.hobby);
  }
}

console.dir(new Bob());

dir 输出:

Bob
  |-- hobby:"Histroy"
  |-- name:"Bob"
  |-- __proto__:Person
      |-- constructor:class Bob
      |-- printHobby:ƒ printHobby()
      |-- __proto__:
          |-- constructor:class Person
          |-- printName:ƒ printName()
          |-- __proto__:Object

从 class 和 super 看 JavaScript 与 Java 的继承

编写代码时,ES6 class 带来的最明显的两个便利是:

  1. 隐藏原型链的拼接过程,将代码的重点放在类型之间的传承
  2. 使用 super 来实现更简化、更灵活的多态方法

实际上,ES6 围绕 class 增加了很多新功能,比如继承这件事情上,与之前不同的是:用 class 实现的继承,既包括类实例的继承关系,也包括类本身的继承关系。这里的类其实是特殊的 JavaScript 函数,而在 JavaScript 中,函数是对象的子类型,即函数对象,所以也能够体现出原型继承。

例如,用前面的代码来说明就是:

// 类实例的继承关系
Bob.prototype.__proto__ === Person.prototype // true

// 类本身的继承关系
Bob.__proto__ === Person // true

再来看 ES6 中的 super,子类的方法想借助父类的方法完成一部分工作时,super 就可以派上用场了,这是比继承更为细粒度的代码复用,不过耦合性也也变得更强了。实际上 super 也有很多功能,既可以当作函数使用,也可以当作对象使用。将 class 和 super 结合起来看,就可以领会一下 JavaScript 与 Java 在继承上的异同了。

与 Java 相同或非常类似的是:

  • 在子类构造方法中调用父类的构造方法。ES6 中,子类的构造器中必须调用父类的构造器来完成初始化,子类的实例是基于父类实例的加工。正是因此,父类的所有行为都可以继承。所以,ES6 中可以继承原生数据结构的完整功能,在此基础上定义自己的数据结构。就像 Java 中继承 HashMap 类,JavaScript 可以继承 Number、Array 等构造函数。

与 Java 不同的是:

  • 在普通方法中,super 可以调用的是父类的原型对象上的方法(可以理解为 super 此时指向父类的原型对象);在静态方法中,super 可以调用父类的静态方法(可以理解为 super 此时指向父类)。而在 Java 中,通过 super 可以访问父类中被覆盖的同名变量或者方法,要访问静态方法则是通过“类名.方法名”或“对象名.方法名”。

比较后可见,真的是和 Java 非常类似。

结合前面的内容,可以发现从 ES3 到 ES6,JavaScript 中的面向对象部分一直是在向 Java 靠拢的。尤其增加了 class 和 extends 关键字之后,靠拢了一大步。但这些并没有改变 JavaScript 是基于原型这一实质。Java 中的类就像对象的设计图,每次调用 new 创建一个新的对象,就产生一个独立的对象占用独立的内存空间;而在 JavaScript,继承所做工作实际上是在构造原型链,所有子类的实例共享的是同一个原型。所以 JavaScript 中调用父类的方法实际上是在不同的对象上调用同一个方法,即“方法借用”,这种行为实际上是“委托(delegation)”调用。

扩展阅读

  1. ECMAScript 6 入门:Class 的继承 - super 关键字

参考资料

  1. 《JavaScript模式》- 类式继承 vs 现代继承模式
  2. 《JavaScript高级程序设计(第3版)》- 面向对象的程序设计
  3. 《你不知道的JavaScript》- this和对象原型