JavaScript原型继承与ES6类继承实战指南

1. JavaScript继承机制深度解析

作为一门基于原型的语言，JavaScript的继承实现方式与传统面向对象语言有着本质区别。我在实际项目中最常遇到的继承需求场景包括：UI组件库的基类扩展、业务模型的共性封装、插件系统的接口继承等。理解原型链的工作原理，能帮助我们避免90%以上的继承相关bug。

1.1 原型链继承的本质

每个JavaScript函数都有prototype属性，当使用new操作符创建实例时，实例内部的[[Prototype]]会指向构造函数的prototype对象。这种连接形成的链条就是原型链。在Chrome控制台执行以下代码可以直观看到：

javascript复制function Parent() {
  this.name = 'parent';
}
Parent.prototype.say = function() {
  console.log(this.name);
}

function Child() {}
Child.prototype = new Parent();

const child = new Child();
console.log(child.__proto__.__proto__ === Parent.prototype); // true

这里有个关键细节：Child.prototype被赋值为Parent的实例，这意味着Child.prototype.__proto__自然指向Parent.prototype，形成了原型链。当访问child.say()时，引擎会沿着这条链向上查找。

警告：直接修改Child.prototype会导致constructor属性丢失，正确的做法是：

javascript复制Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

1.2 构造函数继承的局限与突破

单纯使用原型链继承会面临引用类型共享的问题。我在早期项目中曾踩过这样的坑：

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'] 所有实例共享引用

解决方案是组合使用构造函数和原型链（组合继承）：

javascript复制function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue'];
}
Parent.prototype.say = function() {
  console.log(this.name);
}

function Child(name, age) {
  Parent.call(this, name); // 第二次调用Parent
  this.age = age;
}
Child.prototype = new Parent(); // 第一次调用Parent
Child.prototype.constructor = Child;

这种模式虽然经典，但存在效率问题（调用了两次父构造函数）。在现代JavaScript中，我们更推荐使用Object.create优化：

javascript复制Child.prototype = Object.create(Parent.prototype);

2. ES6类继承的底层实现

class语法糖让继承写法更直观，但理解其Babel转译后的代码尤为重要。以下是一个典型ES6类的继承：

javascript复制class Parent {
  constructor(name) {
    this.name = name;
  }
  say() {
    console.log(this.name);
  }
}

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

通过Babel转译后可以看到，extends关键字实际创建了以下关系：

1. 设置Child.proto = Parent
2. 设置Child.prototype.proto = Parent.prototype

这种双原型链结构使得静态方法也能被继承：

javascript复制Parent.staticMethod = function() {};
console.log('staticMethod' in Child); // true

2.1 super关键字的三种用法

1. 构造函数中：super()必须在使用this前调用
2. 方法中访问父类方法：super.parentMethod()
3. 静态方法中访问父类静态方法：super.staticMethod()

我曾遇到一个典型错误案例：

javascript复制class Child extends Parent {
  constructor() {
    this.age = 10; // ReferenceError
    super();
  }
}

这是因为引擎要求在super()调用前不能访问this，底层实现上，new操作符创建的实例上下文需要通过super()来绑定。

3. 高级继承模式实战

3.1 混入模式(Mixin)实现多继承

JavaScript本身不支持多继承，但可以通过混入模式模拟：

javascript复制const Serializable = Base => class extends Base {
  serialize() {
    return JSON.stringify(this);
  }
};

const Loggable = Base => class extends Base {
  log() {
    console.log(this);
  }
};

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

class Employee extends Serializable(Loggable(Person)) {
  constructor(name, salary) {
    super(name);
    this.salary = salary;
  }
}

const emp = new Employee('John', 50000);
emp.log(); // Person {name: "John", salary: 50000}
console.log(emp.serialize()); // "{"name":"John","salary":50000}"

这种函数式组合方式比传统的拷贝属性更优雅，且能维护完整的原型链。

3.2 寄生组合式继承的终极方案

结合原型链和构造函数继承的优点，同时避免各自的缺点：

javascript复制function inheritPrototype(child, parent) {
  const prototype = Object.create(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue'];
}
Parent.prototype.say = function() {
  console.log(this.name);
}

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

inheritPrototype(Child, Parent);

// 测试
const c1 = new Child('Tom', 10);
const c2 = new Child('Jerry', 8);
c1.colors.push('green');
console.log(c1.colors); // ["red", "blue", "green"]
console.log(c2.colors); // ["red", "blue"]
console.log(c1 instanceof Parent); // true

这种模式只调用一次父构造函数，避免在prototype上创建不必要的属性，同时保持原型链完整。

4. 继承中的典型问题与解决方案

4.1 方法重写的正确姿势

当子类需要覆盖父类方法时，常见的反模式是直接赋值：

javascript复制Child.prototype.say = function() {
  // 完全覆盖父类方法
}

更合理的做法是保留父类功能：

javascript复制Child.prototype.say = function() {
  // 子类特定逻辑
  Parent.prototype.say.call(this);
  // 更多子类逻辑
}

在ES6中可以使用super：

javascript复制class Child extends Parent {
  say() {
    // 子类逻辑
    super.say();
    // 更多逻辑
  }
}

4.2 原型链断裂的检测与修复

当意外修改原型链时会导致继承关系断裂：

javascript复制function Parent() {}
function Child() {}
Child.prototype = new Parent();

// 错误操作
Child.prototype = { someMethod() {} };

const child = new Child();
console.log(child instanceof Parent); // false

检测原型链完整性的方法：

javascript复制console.log(
  Child.prototype.__proto__ === Parent.prototype,
  Child.__proto__ === Parent
);

修复方案是重新建立连接：

javascript复制Object.setPrototypeOf(Child.prototype, Parent.prototype);

4.3 静态属性继承的陷阱

ES6的class语法默认会继承静态属性，但使用传统方式时需要注意：

javascript复制function Parent() {}
Parent.staticProp = 'parent';

function Child() {}
Child.prototype = Object.create(Parent.prototype);

console.log(Child.staticProp); // undefined

正确的静态属性继承方式：

javascript复制Object.setPrototypeOf(Child, Parent);
console.log(Child.staticProp); // 'parent'

5. 现代JavaScript继承最佳实践

5.1 使用Reflect API进行元编程

Reflect.construct允许我们在继承时更灵活地控制构造函数调用：

javascript复制class Parent {
  constructor(name) {
    this.name = name;
  }
}

class Child extends Parent {
  constructor(...args) {
    // 相当于super(...args)
    return Reflect.construct(Parent, args, new.target);
  }
}

const child = new Child('Tom');
console.log(child instanceof Child); // true
console.log(child instanceof Parent); // true

这在实现高级代理模式时特别有用。

5.2 使用Symbol避免属性冲突

当多个父类可能有同名属性时：

javascript复制const logSymbol = Symbol('log');
class Loggable {
  [logSymbol]() {
    console.log(this);
  }
}

class Serializable {
  // 使用不同Symbol
  [Symbol('serialize')]() {
    return JSON.stringify(this);
  }
}

class Person extends mix(Loggable, Serializable) {
  constructor(name) {
    super();
    this.name = name;
  }
  
  log() {
    this[logSymbol]();
  }
}

5.3 使用Proxy实现动态继承

通过Proxy可以创建具有动态行为的"抽象类"：

javascript复制class Abstract {
  constructor() {
    return new Proxy(this, {
      get(target, prop) {
        if (target[prop] === undefined) {
          throw new Error(`必须实现 ${prop} 方法`);
        }
        return target[prop];
      }
    });
  }
}

class Concrete extends Abstract {
  requiredMethod() {
    console.log('Implemented');
  }
}

const instance = new Concrete();
instance.requiredMethod(); // OK
instance.missingMethod(); // 抛出错误

这种模式在开发框架或库时特别有用，可以强制子类实现特定接口。