JavaScript继承机制与7种实现方式详解

1. JavaScript继承机制全景解读

在JavaScript的世界里，继承是构建复杂应用的基础技能。与传统的类继承语言不同，JS通过原型链实现继承机制，这种独特的设计让许多开发者既爱又恨。我至今记得第一次用__proto__调试原型链时那种恍然大悟的感觉——原来JS对象间是这样传递能力的！

原型继承的本质是对象之间的关联关系。每个JS对象都有一个隐藏的[[Prototype]]属性（可通过__proto__访问），当访问对象属性时，如果当前对象没有该属性，引擎就会沿着原型链向上查找。这种机制看似简单，却衍生出七种各具特色的实现方式：

javascript复制// 基础原型链示例
function Animal() { this.species = '生物'; }
function Cat() { this.name = '咪咪'; }
Cat.prototype = new Animal(); // 关键继承步骤

const myCat = new Cat();
console.log(myCat.species); // 输出"生物"

2. 七种继承方式深度剖析

2.1 原型链继承：最原始的继承模式

原型链继承是JS最基础的继承方式，通过将子类的prototype指向父类实例实现。这种方式下，所有子类实例共享同一个父类实例，这既是优势也是陷阱。

典型问题场景：

javascript复制function Parent() { this.colors = ['red', 'blue']; }
function Child() {}
Child.prototype = new Parent();

const c1 = new Child();
c1.colors.push('green');

const c2 = new Child();
console.log(c2.colors); // ['red', 'blue', 'green'] 污染问题！

警告：引用类型属性会被所有实例共享，这在需要实例隔离的场景非常危险

2.2 构造函数继承：解决引用共享问题

通过call/apply在子类构造函数中执行父类构造函数，完美解决属性共享问题：

javascript复制function Child() {
  Parent.call(this); // 关键代码
  this.type = 'child';
}

优势对比表：

2.3 组合继承：经典解决方案

结合前两种方式的优点，成为ES5时代的黄金标准：

javascript复制function Child() {
  Parent.call(this); // 第二次调用Parent
}
Child.prototype = new Parent(); // 第一次调用Parent

虽然存在父类构造函数被调用两次的效率问题，但在大多数场景下仍是可靠选择。我在早期项目中90%的继承场景都采用此方案。

2.4 原型式继承：Object.create的魔法

Douglas Crockford提出的原型式继承，核心是利用空函数中转：

javascript复制function create(obj) {
  function F() {}
  F.prototype = obj;
  return new F();
}

这正是ES5中Object.create()的polyfill原理。适合不需要构造函数的简单对象继承。

2.5 寄生式继承：工厂模式加持

在原型式继承基础上增强对象：

javascript复制function createEnhance(obj) {
  const clone = Object.create(obj);
  clone.sayHi = function() {
    console.log('Hi');
  };
  return clone;
}

这种模式我在需要给第三方对象添加功能时经常使用，但要注意方法不能复用的问题。

2.6 寄生组合继承：终极完美方案

这是最理想的ES5继承方式，解决了组合继承的双重调用问题：

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

2.7 ES6 class继承：语法糖的优雅

ES6的class本质仍是原型继承的语法糖：

javascript复制class Child extends Parent {
  constructor() {
    super(); // 必须调用
    this.type = 'child';
  }
}

Babel转译后的代码显示，其底层实现正是寄生组合继承。我在现代项目中优先使用此方案。

3. 实战中的继承选择策略

3.1 性能关键型场景

在游戏引擎等性能敏感场景，经过我的实测对比：

1. 构造函数继承最快（无原型链查找）
2. 寄生组合继承次之
3. 组合继承最慢（双重初始化）

javascript复制// 性能测试代码示例
console.time('继承方式');
for(let i=0; i<100000; i++) {
  new Child();
}
console.timeEnd('继承方式');

3.2 复杂业务组件开发

对于UI组件库这类需要多重继承的场景，我的经验是：

1. 使用混入模式（Mixin）组合功能
2. 通过Object.assign()实现伪多继承
3. 或者采用组合优于继承的设计原则

javascript复制// Mixin实现示例
const Logger = {
  log() { console.log(this.name); }
};

class Button {
  constructor(name) {
    this.name = name;
  }
}

Object.assign(Button.prototype, Logger);

3.3 框架开发中的继承技巧

在编写Vue/React组件时，这些技巧很实用：

1. 高阶组件（HOC）模式
2. Render Props模式
3. 自定义Hooks（React）
4. Composition API（Vue3）

javascript复制// React HOC示例
function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component mounted');
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

4. 那些年我踩过的继承坑

4.1 原型污染事故

曾有一次在修改Array.prototype添加自定义方法，导致整个页面的数组遍历出错。教训是：

1. 永远不要修改内置对象原型
2. 如需扩展，创建子类继承
3. 或使用Symbol作为属性键

javascript复制// 安全扩展示例
class SafeArray extends Array {
  first() {
    return this[0];
  }
}

4.2 constructor丢失问题

在手动修改prototype时，经常会忘记重置constructor：

javascript复制Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child; // 必须补充

否则instance.constructor会指向Parent，导致类型判断错误。

4.3 super调用时机

在ES6 class中，必须先调用super才能使用this：

javascript复制class Child extends Parent {
  constructor() {
    // console.log(this); // 报错！
    super();
    console.log(this); // 正确
  }
}

这个限制源于JS底层对[[HomeObject]]的实现机制。

5. 现代JS继承最佳实践

经过多年实践，我的继承方案选择优先级是：

1. ES6 class（项目支持ES6+时）
2. 寄生组合继承（需要兼容ES5时）
3. 组合继承（简单场景快速实现）
4. 工厂函数+Object.assign（不需要完整继承链时）

对于TypeScript用户，这些额外建议：

typescript复制// TS继承示例
abstract class Animal {
  abstract makeSound(): void;
}

class Dog extends Animal {
  makeSound() {
    console.log('Woof!');
  }
}

在Vue3组合式API中，继承思维已转变为组合思维：

javascript复制// 组合式API示例
export default {
  setup() {
    const base = useBaseFeature();
    const extended = useExtendedFeature(base);
    return { ...extended };
  }
}