在javascript中，es6的class语法被广泛视为一种语法糖，它在底层仍然基于原型继承机制运作。对于熟悉传统javascript对象模型的开发者而言，理解class如何将属性和方法映射到原型链上至关重要。然而，当涉及到公共实例字段（public instance fields）时，其行为模式与传统原型机制略有不同，这常常导致一些混淆。
JavaScript类与原型链的传统视图
首先，我们回顾一下JavaScript类中方法的传统处理方式。当我们在类中定义一个方法时，这个方法通常会被放置在类的原型对象上。例如：
class Foo {
// 这是一个原型方法
barMethod() {
console.log("This is a prototype method.");
}
}
// 这种定义方式在底层大致等同于：
// function Foo() {}
// Foo.prototype.barMethod = function() { console.log("This is a prototype method."); };
const instance1 = new Foo();
instance1.barMethod(); // 输出: This is a prototype method.
// 我们可以通过原型访问这个方法
console.log(Foo.prototype.barMethod); // 输出: [Function: barMethod]在这个例子中，barMethod被添加到Foo.prototype上，因此所有Foo的实例都可以通过原型链访问它。
公共实例字段的特殊性
然而，ES2022（ES13）引入的公共实例字段语法改变了这一模式。当我们在类中直接声明并初始化一个字段时，它的行为与原型方法截然不同。
class FooWithField {
// 这是一个公共实例字段
barField = "Hello World";
}
const instance2 = new FooWithField();
console.log(instance2.barField); // 输出: Hello World
// 尝试通过原型访问这个字段
console.log(FooWithField.prototype.barField); // 输出: undefined从上面的输出可以看出，FooWithField.prototype.barField的值是undefined。这表明barField这个属性并没有被放置在FooWithField的原型对象上。那么，它究竟存储在哪里呢？
立即学习“Java免费学习笔记（深入）”；
内部机制解析：字段与实例的绑定
答案在于，公共实例字段并非存储在原型上，而是直接在每个类实例创建时被赋值到该实例自身。在底层，当JavaScript引擎处理带有公共实例字段的类时，它会将其转换为在类构造函数中通过this关键字进行属性赋值的形式。
因此，以下两种类定义在功能上是等价的：
// 使用公共实例字段
class ClassA {
instanceProperty = "Value A";
}
// 等价于在构造函数中赋值
class ClassB {
constructor() {
this.instanceProperty = "Value B";
}
}
const objA = new ClassA();
const objB = new ClassB();
console.log(objA.instanceProperty); // 输出: Value A
console.log(objB.instanceProperty); // 输出: Value B这意味着，每当你通过new关键字创建一个类的实例时，公共实例字段的初始化代码就会在构造函数执行期间运行，并将该字段作为实例的自有属性（own property）直接添加到新创建的对象上。
实例属性与原型属性的区别
理解公共实例字段的关键在于区分实例属性和原型属性。
- 原型属性/方法：存储在类的prototype对象上，由所有实例共享。当访问一个属性或方法时，如果实例本身没有，JavaScript会沿着原型链向上查找。
- 实例属性：直接存储在实例对象本身上。每个实例都有其独立的副本。
由于公共实例字段是直接添加到每个实例上的，它们是实例的自有属性。这就是为什么FooWithField.prototype.barField会是undefined，而instance2.barField能够成功访问到值的原因。
我们可以通过Object.hasOwn()（或旧版hasOwnProperty()）方法来验证这一点：
class MyClass {
prototypeMethod() { /* ... */ }
instanceField = "Instance Value";
}
const myInstance = new MyClass();
// 验证实例字段是实例的自有属性
console.log(Object.hasOwn(myInstance, 'instanceField')); // 输出: true
// 验证原型方法不是实例的自有属性，而是来自原型
console.log(Object.hasOwn(myInstance, 'prototypeMethod')); // 输出: false
console.log(Object.hasOwn(MyClass.prototype, 'prototypeMethod')); // 输出: true注意事项与最佳实践
性能考量：对于每个实例都需要独立值的属性，使用公共实例字段是合适的。如果属性值在所有实例中都是相同的，并且不随实例状态变化，可以考虑将其作为静态属性（static）或常量。然而，对于绝大多数应用场景，公共实例字段的性能开销通常可以忽略不计。
-
this的绑定：公共实例字段与箭头函数结合使用时，可以简化this的绑定问题，特别是在事件处理或回调函数中：
class Counter { count = 0; // 使用箭头函数作为实例方法，this会正确绑定到Counter实例 increment = () => { this.count++; console.log(this.count); }; // 传统方法需要额外绑定或在调用时注意this decrement() { this.count--; console.log(this.count); } } const counter = new Counter(); const { increment, decrement } = counter; increment(); // 正确工作，输出 1 // decrement(); // 错误，this会指向全局对象或undefined（严格模式下） // counter.decrement(); // 正确工作 可读性与维护性：公共实例字段提供了一种更简洁、更声明式的方式来定义实例属性，提高了代码的可读性，尤其是在类中有很多实例属性时。
总结
JavaScript中的公共实例字段（Public Instance Fields）是一个现代的语言特性，它提供了一种直观的方式来定义类的实例属性。核心要点是：这些字段不会被放置在类的原型对象上，而是作为每个实例的自有属性，在实例创建时通过类似构造函数赋值的机制直接绑定到实例上。理解这一点对于深入掌握JavaScript类的内部工作原理以及有效利用这一特性至关重要。
