ES6类与原型对应关系解析

ES6的class并非JavaScript引入的新面向对象范式，而仅仅是构造函数与原型机制的语法糖——它让基于原型的继承写起来更接近传统OOP语言，但底层逻辑丝毫未变：class声明生成构造函数并自动挂载实例方法到prototype上，静态方法直接绑定构造函数自身，继承则通过双层__proto__链接（实例原型链与构造函数原型链）协同实现，连getter/setter和私有字段等新特性也依然扎根于原型描述符或闭包/内部插槽机制；真正掌握class，关键在于看透其背后不变的原型本质。

ES6的class语法本质上是构造函数和原型机制的语法糖，它没有引入新的面向对象模型，只是让基于原型的继承写起来更像传统OOP语言。理解class背后如何映射到原型链，是掌握JavaScript继承本质的关键。

class声明 → 构造函数 + 原型对象

一个class声明会自动创建一个构造函数，并把方法挂载到该函数的prototype上：

class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    return `Hello, ${this.name}`;
  }
}

等价于：

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  return `Hello, ${this.name}`;
};

• Person本身是一个函数（typeof Person === 'function'），可直接调用
• Person.prototype对象上存在sayHello方法，所有实例共享该方法
• constructor属性依然指向Person函数，未被覆盖

静态方法 → 构造函数自身属性

static方法不会出现在prototype上，而是直接作为构造函数的属性：

class Person {
  static createAnonymous() {
    return new Person('Anonymous');
  }
}

等价于：

Person.createAnonymous = function() {
  return new Person('Anonymous');
};

• Person.createAnonymous()可直接调用，但new Person().createAnonymous是undefined
• 静态方法不参与实例继承，也不在原型链中查找

继承（extends）→ 原型链 + 构造函数委托

class Child extends Parent会完成两件事：

• 设置Child.prototype.__proto__ === Parent.prototype（方法继承）
• 设置Child.__proto__ === Parent（静态方法继承）
• 子类构造函数中必须调用super()，即执行Parent.call(this, ...)来初始化实例属性

这确保了：实例方法沿[[Prototype]]向上查找，静态方法沿构造函数的[[Prototype]]查找。

getter/setter、私有字段等新特性仍基于原型或闭包机制

虽然class支持get/set、#private等，但它们的底层实现仍依赖原型描述符或词法环境：

• get age() { return this._age; }会被定义为Object.defineProperty(Person.prototype, 'age', {...})
• #name私有字段实际通过隐藏的WeakMap或内部插槽（如[[PrivateNames]]）管理，不暴露在原型上
• 所有这些增强都不改变“对象通过[[Prototype]]链接查找属性”的核心机制

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《ES6类与原型对应关系解析》文章吧，也可关注golang学习网公众号了解相关技术文章。