17370845950

原型链继承的几种方式_ES6类与原型继承的对比
JavaScript继承基于原型链,ES6前用构造函数和原型实现,如原型链继承、构造函数继承、组合继承及寄生组合继承;其中寄生组合继承为最优方案,避免重复调用父类构造函数。ES6引入class和extends语法,使继承更直观,但底层仍基于原型链,仅是语法糖。class支持static定义静态方法,提升可读性与生态兼容性,现代框架广泛采用。核心原理始终为原型机制。

JavaScript 中的继承机制是理解面向对象编程的关键。在 ES6 之前,主要依赖原型链来实现继承;ES6 引入了 class 语法,让继承更直观。下面分别介绍原型链继承的几种方式,并对比 ES6 类与原型继承的区别。

原型链继承的常见方式

在 ES5 及更早版本中,没有 class 关键字,开发者通过操作构造函数和原型对象来实现继承。以下是几种典型的原型链继承方式:

1. 原型链继承(经典继承)

将子类的原型指向父类的实例。

function Parent() {
  this.name = 'parent';
}

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

function Child() {
  //...
}

Child.prototype = new Parent(); // 核心:子类原型等于父类实例
Child.prototype.constructor = Child;

缺点:父类的引用类型属性会被所有子类实例共享,一个实例修改会影响其他实例。

2. 构造函数继承(伪造继承)

在子类构造函数中调用父类构造函数,使用 call 或 apply。

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

优点:可以传递参数,每个实例都有独立的属性。
缺点:无法继承父类原型上的方法。

3. 组合继承(最常用)

结合原型链继承和构造函数继承。

function Child(name) {
  Parent.call(this, name); // 第二次调用 Parent
}

Child.prototype = new Parent(); // 第一次调用 Parent
Child.prototype.constructor = Child;

优点:兼具属性独立和方法复用。
缺点:父类构造函数被调用两次,效率略低。

4. 寄生组合继承(最佳实践)

优化组合继承,避免重复调用父类构造函数。

function inherit(Child, Parent) {
  const prototype = Object.create(Parent.prototype);
  prototype.constructor = Child;
  Child.prototype = prototype;
}

这种方式只调用一次父类构造函数,同时保持原型链完整,是 ES5 时代的最佳方案。

ES6 类与原型继承的对比

ES6 引入了 class 和 extends 关键字,让 JavaScript 的继承语法更接近传统面向对象语言。

1. 语法更清晰

ES6 使用 class 定义类,extends 实现继承,super 调用父类方法或构造函数。

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

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
}

代码结构更清晰,易于理解和维护。

2. 底层仍是原型继承

class 并没有引入新的继承模型,它只是语法糖,底层依然基于原型链。

上述 Child 类的本质,仍然是设置 Child.prototype 的 [[Prototype]] 指向 Parent.prototype,并通过 Object.setPrototypeOf 设置构造器之间的关系。

3. 更好的静态方法支持

ES6 支持 static 关键字定义静态方法,可以直接在类上调用,无需实例化。

class Parent {
  static sayHello() {
    console.log('Hello');
  }
}

这种特性在原型模式中需要手动挂载到构造函数上,不够直观。

4. 兼容性与可读性提升

class 语法更容易被熟悉 Java、C++ 等语言的开发者接受,降低了学习门槛。
现代框架如 React、Vue 的类组件都基于此语法,生态支持更好。

基本上就这些。虽然写法变了,但核心原理没变——JavaScript 的继承始终建立在原型机制之上。ES6 的 class 让我们写得更舒服,而寄生组合继承等模式则帮助我们深入理解语言本质。不复杂但容易忽略。