JavaScript类中公共实例属性与原型的关联机制解析

我们都知道JavaScript里的类本质就是函数，是基于原型继承的语法糖。比如定义类方法时：

class foo {
  bar() {}
}

会被引擎转换成：

function foo() {}
foo.prototype.bar = function() {};

此时所有foo的实例都会共享原型上的bar方法，因为原型属性是实例间共享的。

但如果定义公共实例属性：

class foo {
  bar = "Hello World";
}

你会发现foo.prototype.bar返回undefined，必须创建实例才能访问该属性：

const instance = new foo();
console.log(instance.bar); // "Hello World"

内部实现机制解析 #

这种类字段形式的公共实例属性，引擎会将其初始化逻辑注入到类的构造函数中。上面的代码等价于：

class foo {
  constructor() {
    this.bar = "Hello World";
  }
}

对应的底层函数实现是：

function foo() {
  this.bar = "Hello World";
}

也就是说，属性是在实例创建的阶段，通过this绑定到每个新生成的实例对象上的，而非挂载到foo.prototype原型对象。

设计逻辑原因 #

• 保证实例状态独立性：公共实例属性通常承载的是每个实例独有的状态（比如用户ID、订单编号），每个实例需要拥有自己的属性副本。如果放到原型上，修改一个实例的属性会影响所有实例（引用类型属性的问题会更突出）。
• 支持动态初始化：公共实例属性可以基于构造函数参数或动态逻辑初始化，比如userName = this.getUserNameFromParams()，这类逻辑只能在实例创建时执行，无法提前挂载到原型。
• 与私有字段逻辑统一：ES6后续引入的私有字段（如#bar）也是绑定到实例的，公共实例属性的设计和私有字段保持一致，统一在实例层面管理状态数据。

内容的提问来源于stack exchange，提问作者whoisit