为何JavaScript实例字段属于实例而非其原型？

在ES6引入的JavaScript class 语法中（static 属性可通过类访问，instance 属性可通过实例访问）：

• static fields属于类本身
• static methods属于类本身
• instance methods属于实例的prototype
• this 定义的属性属于实例

我原本以为instance fields会和instance methods一样归属到实例的prototype，但实际并非如此——它们被特殊处理，和this属性一样直接属于实例。

示例验证 #

示例类代码 #

class A {
  static x;                   // static field
  static f() {}               // static method
  y;                          // instance field (特殊处理)
  g() {}                      // instance method
  constructor() {this.z = 0}  // this属性
}

执行结果 #

> Object.getOwnPropertyNames(A)
[ 'length', 'name', 'prototype', 'f', 'x' ]
> Object.getOwnPropertyNames(A.prototype)
[ 'constructor', 'g' ]
> Object.getOwnPropertyNames(new A)
[ 'y', 'z' ]

核心疑问 #

为何JavaScript实例字段属于实例而非其原型？

我认为的设计缺点 #

1. 无法直接在类声明中给实例的prototype添加非函数属性，只能在类声明后手动添加（或借助静态初始化块）：

> A.prototype.y2 = 0;
0
> Object.getOwnPropertyNames(A.prototype)
[ 'constructor', 'g', 'y2' ]

2. 声明实例属性已有this语法可用，instance fields的存在造成了语言特性的重复。

设计原因解析 #

JavaScript的类语法本质是原型继承的语法糖，instance fields设计为归属实例而非原型，主要基于以下几个核心考量：

1. 避免原型属性共享引发的bug #

原型上的属性会被所有实例共享，如果实例字段放在原型上，一旦字段是引用类型（比如对象、数组），修改其内部值时会影响所有实例（例如instance.arr.push(1)会让所有实例的arr都新增元素）。把实例字段放在实例自身，每个实例拥有独立的属性副本，完全符合开发者对“实例私有状态”的直觉，从根源规避这类容易踩坑的共享问题。

2. 与this属性行为保持一致 #

类的constructor中通过this定义的属性本来就属于实例，instance fields作为constructor内this赋值的语法糖，保持行为一致性能降低学习成本——开发者不用区分“constructor里的实例属性”和“类体里的实例字段”的差异，认知更统一。

3. 适配私有实例字段的扩展 #

后续ES标准新增了私有实例字段（如#privateField），这类字段必须属于实例本身才能保证私有性（放在原型会被所有实例共享，失去私有意义）。将普通instance fields设计为和私有字段同属实例，能保持语法与行为的一致性，为语言扩展铺路。

4. 性能优化 #

实例自身的属性访问无需遍历原型链，比原型属性访问更快。把实例字段放在实例上，能提升高频访问场景下的性能。

至于你提到的两个缺点：

• 关于“无法直接在原型声明非函数属性”，这是设计取舍的结果——标准制定者更倾向于让原型承载无状态、可共享的方法，有状态的属性则归属于实例。如果确实需要共享的非函数属性，类声明后手动添加到原型是合理的，毕竟这类场景相对少见。
• 关于“特性重复”，instance fields本质是语法便利优化：当需要声明多个带默认值的实例属性时，不用在constructor里写一堆this.xxx = ...，能让类的结构更清晰，并非完全重复的特性。

内容的提问来源于stack exchange，提问作者Géry Ogam