JavaScript面向对象编程：原型继承与类语法实现

一、原型机制与原型链查找核心原理

在 JavaScript 中，对象并不是从类实例化的模板拷贝，而是通过隐藏的内部指针与其他对象建立委托关联。每个普通 JavaScript 函数在被声明时，解释器都会为其默认挂载一个 prototype 对象属性；而使用 new 运算符调用的函数即为“构造函数”。

当执行 const instance = new Constructor() 时，引擎在内存中完成四项底层工作：

1. 在内存中开辟一个新的空对象；
2. 将该新对象的内部隐式原型 [[Prototype]]（在浏览器环境中通常暴露为 __proto__）指向构造函数的 prototype 属性；
3. 将构造函数内部的执行上下文 this 绑定到这个新对象上，并执行构造函数体中的初始化代码；
4. 若构造函数显式返回了一个引用对象，则返回该对象；否则默认返回该新创建的对象。

原型链查找遵循确定性规则：当访问 instance.property 时，引擎首先检查当前实例自身是否拥有该自有属性（通过 hasOwnProperty 判定）。若未命中，则沿着 __proto__ 向上检索其原型对象；若仍未找到，继续沿原型的 __proto__ 向上检索，直到最顶层的 Object.prototype。若在 Object.prototype.__proto__（即 null）处依然未检索到，则表达式求值结果为 undefined。

图1：构造函数、原型对象与实例的三角度量及原型链拓扑模型

二、经典继承模式演进与寄生组合式继承实现

在 ES6 面世之前，JavaScript 开发者探索过多代继承实现模式。回顾这些探索不仅有助于看懂旧工程，更是理解面向对象内存机制的最佳途径：

• 原型链继承（Prototype Chain）：直接令 Child.prototype = new Parent()。缺陷在于父类包含的引用属性（如数组、对象）会被所有子类实例共享，且创建子类实例时无法向父类构造函数传参。
• 借用构造函数继承（Constructor Stealing）：在子类构造函数中执行 Parent.call(this, args)。虽然解决了引用隔离与传参问题，但无法复用父类原型上定义的方法，所有函数都必须写在构造函数内，造成严重内存冗余。
• 组合继承（Combination Inheritance）：结合上述两者。但其致命缺陷在于父类构造函数被强制调用了两次（一次在设置子类原型时，另一次在子类实例化执行 Parent.call 时），导致子类原型上存在一份毫无意义的父类实例属性副本。

寄生组合式继承的标准实现

为解决组合继承的两次调用缺陷，Douglas Crockford 提出了“寄生组合式继承”（Parasitic Combination Inheritance）。其核心思想是：不通过调用父类构造函数来为子类提供原型，而是借助一个纯净的空对象作为中介，切片继承父类的 prototype。

以下为工业级标准实现代码：

// 1. 父类构造函数
function SuperType(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

SuperType.prototype.sayName = function() {
  return this.name;
};

// 2. 寄生切片继承核心工具函数
function inheritPrototype(subType, superType) {
  // 使用 Object.create 以 superType.prototype 为原型创建一个无自有属性的新对象
  const prototype = Object.create(superType.prototype);
  // 修正因覆盖原型而丢失的 constructor 指向
  prototype.constructor = subType;
  // 将新原型对象赋值给子类原型
  subType.prototype = prototype;
}

// 3. 子类构造函数
function SubType(name, age) {
  // 借用父类构造函数：继承实例自有属性并完成初始化
  SuperType.call(this, name);
  this.age = age;
}

// 建立原型链关联
inheritPrototype(SubType, SuperType);

// 4. 扩展子类自有原型方法（必须在 inheritPrototype 之后声明）
SubType.prototype.sayAge = function() {
  return this.age;
};

图2：寄生组合式继承分步推导与内存指针建立流程

三、ES6 Class 语法实现与底层映射

ECMAScript 2015 (ES6) 引入了 class、extends 与 super。需要明确的是，class 在 JavaScript 内部本质上依然是一个函数（typeof MyClass === 'function'），但它受到更严格的语言规范约束：

• 类不存在变量提升（Hoisting）：与 let/const 行为一致，必须先声明后使用；
• 类内部默认运行在严格模式（strict mode）：无需手动书写 "use strict"；
• 必须使用 new 调用：直接调用 MyClass() 会抛出 TypeError；
• 类中定义的原型方法不可枚举：其属性描述符的 enumerable 默认为 false（与 ES5 手动向 prototype 挂载方法不同）。

ES6 继承语法示例

class SuperType {
  constructor(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
  }

  // 原型方法
  sayName() {
    return this.name;
  }

  // 静态方法（属于类本身）
  static getVersion() {
    return '1.0.0';
  }
}

class SubType extends SuperType {
  constructor(name, age) {
    // 关键点：必须在访问 this 之前首先调用 super()
    super(name);
    this.age = age;
  }

  sayAge() {
    return this.age;
  }
}

核心机制：为什么必须先调用 super()？

在 ES5 的继承实现中，过程是“先创建子类实例的 this，然后通过 SuperType.call(this) 借用父类构造函数对其进行修饰”。

而在 ES6 的 extends 继承体系中，机制彻底颠倒：是先由父类构造函数完成实例 this 的创建与初始化，子类构造函数再对其进行修饰。因此，如果不调用 super()，子类根本获取不到合法可用的 this 引用，任何在 super() 之前访问 this 的语句都会直接抛出 ReferenceError。

ES6 双原型链机制

与 ES5 寄生组合式继承相比，ES6 的 extends 在底层还多建立了一条链路：

1. 实例方法链：SubType.prototype.__proto__ === SuperType.prototype，确保子类实例能够沿着原型链继承父类的原型方法。
2. 静态方法链：SubType.__proto__ === SuperType，使子类构造函数本身直接委托给父类构造函数，从而让父类的静态方法与静态属性（如 SuperType.getVersion()）能够直接通过 SubType.getVersion() 被子类调用。

图3：ES6 Class 语法结构与底层双原型链映射架构

四、实践常见陷阱与避坑指南

在实际编写或维护面向对象 JavaScript 代码时，由于对原型引用机制和执行上下文的忽视，常引发以下几类隐蔽故障：

1. 原型上定义引用类型数据导致多实例意外污染

若在 prototype 对象或直接在原型上赋默认值：MyClass.prototype.tags = []，该数组将被所有实例共享。当某个实例执行 this.tags.push('js') 时，它并未在自身创建新属性，而是直接修改了原型对象中的数组，导致其余全部实例的 tags 均被意外改写。

2. 对象解构或回调传递中丢失 this 上下文

在类中声明的方法其内部 this 默认指向调用它的对象。如果将方法作为事件监听器或定时器回调传递，例如 setTimeout(instance.sayName, 100)，调用时函数体内的 this 将退化为 undefined（类内部处于严格模式）。

解决方案通常有三种：

• 在构造函数中使用 bind 固化绑定：this.sayName = this.sayName.bind(this);
• 使用类公有字段结合箭头函数语法：sayName = () => { return this.name; }（需注意该方法会被挂载在每个实例自身而非原型上，存在微量内存开销）；
• 在回调处包裹箭头函数：setTimeout(() => instance.sayName(), 100)。

3. 原型重写导致 constructor 丢失

在进行原型扩展时，切忌使用字面量对象直接覆写整个原型：

// 错误示范：完全覆盖了现有 prototype 对象
Person.prototype = {
  run() { console.log('running'); }
};
// 此时 Person.prototype.constructor 已丢失，直接回退指向 Object

如果确需通过对象字面量一次性挂载多个方法，必须在字面量中显式保留 constructor: Person，或使用 Object.assign(Person.prototype, { ... })。

五、全景总结与技术选型建议

下表将 JavaScript 面向对象发展历程中的主要继承实现方案进行系统化横向度量，便于在技术选型与旧代码维护时做出明确的技术判断：

图4：JavaScript 面向对象实现方案全景对比与技术选型矩阵

总结而言，在现代前端与 Node.js 工业级开发中，应无条件优先采用 ES6 class 与 extends 语法。这不仅提供了清晰易读的语法表达，更使现代 JavaScript 引擎（如 V8）能够针对类结构进行更高效的隐藏类（Hidden Classes）和内联缓存（Inline Caching）优化；而在需要深入剖析框架源码、排查高难度内存泄漏或封装底层脚手架时，牢固掌握原型链与寄生组合式继承的底层机制，则是每位中高级工程师不可或缺的基本功。