在最近的开发者社区讨论中，一个看似简单的 JavaScript 类属性问题引发了广泛关注：“Why does a custom class work correct in a static class property but not in an instance property?”（为什么自定义类在静态类属性中能正常工作，但在实例属性中却不行？）这个问题背后隐藏着 JavaScript 原型链与类语法糖的微妙差异，让不少初级甚至中级开发者感到困惑。本文将对这一技术现象背后的原理进行深入剖析，并提供实用的规避建议。
问题重现：同样的类，不同“命运”
假设我们有一个简单的自定义类 MyClass，它包含一个数组作为属性。当我们尝试在类的静态属性中使用该数组时，一切如常；但换成实例属性后，却会出现意想不到的行为——比如所有实例共享同一个数组引用，导致数据污染。这种“静态正常、实例翻车”的现象，本质上是 JavaScript 中属性定义方式与原型继承机制共同作用的结果。
让我们看一个典型例子：
class MyClass {
static arr = [1, 2, 3]; // 静态属性
arr = [1, 2, 3]; // 实例属性
}
静态属性 static arr 属于类本身，所有实例通过 MyClass.arr 访问的是同一个数组。而实例属性 arr 本应属于每个实例独立拥有，但若开发者不小心在原型上定义了该属性（例如通过 MyClass.prototype.arr = [1,2,3]），则所有实例会共享这个原型属性，直到某个实例为其创建了自有属性。
技术深度解析：类字段语法 vs 原型链
在 ES6 引入的 class 语法中，实例字段（如 arr）实际上是在构造函数中通过 this.arr = ... 赋值的，每次 new 都会创建新的数组。但很多开发者误以为类字段是“声明式”地挂在原型上，实则不然。下面两种写法在行为上等价：
class MyClass {
arr = [];
}
// 等价于
class MyClass {
constructor() {
this.arr = [];
}
}
而静态属性 static arr 则直接挂载在类构造函数上，不存在实例间共享的问题。问题往往出现在开发者试图用原型方式共享一个可变对象时：
class MyClass {}
MyClass.prototype.arr = []; // 所有实例共享同一个数组
此时如果某个实例修改了 arr（例如 instance.arr.push(4)），由于 arr 是引用类型，所有实例都会看到这个修改。而静态属性虽然也是共享，但开发者通常不会通过实例去修改静态属性，因此很少产生副作用。
为何静态属性“看起来正常工作”？
静态属性之所以不容易出错，是因为开发者通常只通过类名访问它，比如 MyClass.arr，不会轻易在实例上重新赋值。即便有多个实例，它们也不会因为意外修改静态属性而互相影响——除非你故意通过 instance.constructor.arr 去操作。而实例属性如果误写为原型共享，就会在多个实例之间泄漏数据，尤其在 React 组件、缓存列表等场景中极易引发隐藏的 bug。
实践建议：如何避免踩坑？
- 明确区分静态和实例属性：静态属性用于存储与类相关的常量或类级状态，实例属性用于存储每个对象独有的数据。对于可变对象（数组、对象等），永远不要将它们放在原型上。
- 使用类字段语法而非原型赋值：尽量在类体内使用
arr = []的写法，它会确保每个实例拥有独立的副本。 - 警惕“属性提升”误区：在类中声明字段时，不会发生变量提升，要注意初始化顺序。
- 工具检查：使用 ESLint 的
no-prototype-builtins规则或unicorn/no-array-instanceof等插件辅助检测潜在的原型污染。
结语
JavaScript 的类虽然提供了更接近传统面向对象的语法，但其底层依然是原型继承。理解静态属性与实例属性在原型链上的不同位置，是构建健壮应用的基础。这个看似简单的问题，实际上敲响了“属性继承”迷思的警钟。下一次当你发现自定义类在实例中表现异常时，不妨先检查一下：是原型在作祟吗？