JavaScript类与原型链基础
在深入探讨公共实例字段之前，我们首先回顾JavaScript类与原型链的基本关系。ES6引入的class语法糖，其本质是基于原型链的继承机制的一种更简洁的表达方式。例如，一个包含方法的类：
class Foo {
barMethod() {
console.log("This is a prototype method.");
}
}在底层，这大致等同于传统的构造函数和原型赋值：
function Foo() {}
Foo.prototype.barMethod = function() {
console.log("This is a prototype method.");
};这意味着barMethod是Foo构造函数的原型对象Foo.prototype上的一个属性。因此，所有Foo的实例都可以通过原型链访问到这个方法，并且Foo.prototype.barMethod可以直接访问到该函数。
const instance1 = new Foo(); instance1.barMethod(); // "This is a prototype method." console.log(Foo.prototype.barMethod === instance1.barMethod); // true
公共实例字段的特性与内部机制
然而，当我们在类中声明公共实例字段时，情况就有所不同了。考虑以下示例：
立即学习“Java免费学习笔记（深入）”；
class Foo {
barField = "Hello World"; // 公共实例字段
}如果你尝试像访问原型方法那样访问Foo.prototype.barField，你会发现它是undefined：
console.log(Foo.prototype.barField); // undefined
这是因为公共实例字段barField并没有被添加到Foo.prototype上。相反，当Foo类的一个新实例被创建时，barField属性会被直接添加到这个实例对象上。其内部机制可以理解为，这些字段的赋值操作被“烘焙”进了类的构造函数中。
换句话说，上面的类声明大致等价于：
class Foo {
constructor() {
this.barField = "Hello World"; // 在构造函数中为实例添加属性
}
}因此，要访问barField，你必须首先创建一个Foo的实例：
const instance2 = new Foo(); console.log(instance2.barField); // "Hello World"
每个通过new Foo()创建的实例都会拥有自己独立的barField副本。
示例代码与对比
为了更清晰地展示公共实例字段与原型方法的区别，我们来看一个综合示例：
class MyClass {
// 公共实例字段
instanceProperty = "I belong to the instance";
instanceCounter = 0;
// 原型方法
prototypeMethod() {
console.log("I am a method on the prototype.");
}
// 另一个原型方法，修改实例属性
incrementCounter() {
this.instanceCounter++;
console.log(`Counter for this instance: ${this.instanceCounter}`);
}
}
// 创建两个实例
const obj1 = new MyClass();
const obj2 = new MyClass();
console.log("--- 访问实例属性 ---");
console.log(obj1.instanceProperty); // I belong to the instance
console.log(obj2.instanceProperty); // I belong to the instance
obj1.incrementCounter(); // Counter for this instance: 1
obj1.incrementCounter(); // Counter for this instance: 2
obj2.incrementCounter(); // Counter for this instance: 1 (obj2有自己的instanceCounter)
console.log("--- 访问原型方法 ---");
obj1.prototypeMethod(); // I am a method on the prototype.
obj2.prototypeMethod(); // I am a method on the prototype.
console.log("--- 尝试通过原型访问 ---");
console.log(MyClass.prototype.instanceProperty); // undefined
console.log(MyClass.prototype.prototypeMethod); // [Function: prototypeMethod]
console.log("--- 验证属性所有权 ---");
console.log(obj1.hasOwnProperty('instanceProperty')); // true
console.log(obj1.hasOwnProperty('prototypeMethod')); // false (它在原型上)
console.log(MyClass.prototype.hasOwnProperty('prototypeMethod')); // true从上述输出可以看出：
- instanceProperty和instanceCounter是实例obj1和obj2各自拥有的属性，通过hasOwnProperty可以验证。
- prototypeMethod则存在于MyClass.prototype上，实例通过原型链访问。
注意事项与总结
- 独立性： 公共实例字段为每个实例提供了独立的属性副本，这对于存储实例特有的状态（如计数器、名称、配置等）非常有用。
- 初始化： 这些字段在实例创建时（即构造函数执行期间）被初始化。
- 非原型属性： 它们不参与原型链继承，无法通过ClassName.prototype.fieldName访问。
- 与构造函数的关系： 可以将公共实例字段视为constructor内部this.fieldName = value;的语法糖，它提供了更简洁的声明方式。
理解公共实例字段与原型方法的这种根本区别，对于编写高效、可维护的JavaScript类至关重要。它帮助我们区分哪些数据是所有实例共享的行为（原型方法），哪些是每个实例独有的状态（实例字段）。
