JavaScript类与原型链的基础
在JavaScript中，ES6的class语法实际上是基于其现有的原型继承机制提供的一种语法糖。这意味着，虽然我们使用更简洁的面向对象语法，但其底层仍然是基于函数和原型链来构建的。对于类中定义的方法，这一机制表现得尤为明显。
考虑以下类的定义：
class Foo {
// 这是一个方法
greet() {
console.log("Hello from Foo!");
}
}当我们定义一个方法greet()时，它会被放置在Foo构造函数的原型对象（即Foo.prototype）上。这使得所有Foo的实例都能通过原型链访问到这个方法，并且这些实例共享同一个方法定义，从而节省内存。在底层，这等同于：
function Foo() {}
Foo.prototype.greet = function() {
console.log("Hello from Foo!");
};我们可以通过Foo.prototype.greet直接访问到这个方法：
立即学习“Java免费学习笔记（深入）”；
console.log(typeof Foo.prototype.greet); // function
公共实例字段的特殊性
然而，当我们在类中定义公共实例字段（Public Instance Fields）时，其行为与方法有所不同。公共实例字段是一种在类体中直接声明并赋值的属性，例如：
class Bar {
// 这是一个公共实例字段
message = "Hello World";
}与方法不同，这个message属性并不会被添加到Bar.prototype上。如果你尝试访问Bar.prototype.message，你会发现它是undefined：
console.log(Bar.prototype.message); // undefined
那么，这个message属性究竟存放在哪里呢？
实例字段的内部机制
公共实例字段的真正位置在于每个通过new关键字创建的类实例上。当一个类的实例被创建时，JavaScript引擎会在其内部构造过程中，将这些公共实例字段直接赋值给新创建的实例对象。
这实际上等同于在类的constructor方法中，使用this关键字为实例添加属性：
class BarEquivalent {
constructor() {
this.message = "Hello World"; // 在构造函数中为实例赋值
}
}因此，每个Bar或BarEquivalent的实例都会拥有自己独立的message属性副本。
const instance1 = new Bar();
const instance2 = new Bar();
console.log(instance1.message); // "Hello World"
console.log(instance2.message); // "Hello World"
// 它们是各自实例的属性
console.log(instance1.hasOwnProperty('message')); // true
console.log(Bar.prototype.hasOwnProperty('message')); // false这意味着，message属性是instance1和instance2各自独有的，而不是通过原型链继承而来。
示例与对比
为了更清晰地展示方法和公共实例字段的区别，我们来看一个综合示例：
class MyClass {
// 公共实例字段
instanceProperty = "我是实例属性";
// 方法
greet() {
console.log("Hello from method!");
}
// 另一个方法，访问实例属性
displayInstanceProperty() {
console.log(`实例属性的值是: ${this.instanceProperty}`);
}
}
// 创建一个实例
const myInstance = new MyClass();
// 1. 访问方法
console.log("--- 访问方法 ---");
console.log(typeof MyClass.prototype.greet); // function
myInstance.greet(); // Hello from method!
// 2. 访问公共实例字段
console.log("\n--- 访问公共实例字段 ---");
console.log(MyClass.prototype.instanceProperty); // undefined (不在原型上)
console.log(myInstance.instanceProperty); // 我是实例属性 (在实例上)
// 3. 方法可以访问实例属性
myInstance.displayInstanceProperty(); // 实例属性的值是: 我是实例属性
// 4. 验证属性归属
console.log("\n--- 属性归属验证 ---");
console.log(myInstance.hasOwnProperty('instanceProperty')); // true
console.log(MyClass.prototype.hasOwnProperty('greet')); // true
console.log(Object.getOwnPropertyDescriptor(MyClass.prototype, 'greet')); // { value: [Function: greet], writable: true, enumerable: false, configurable: true }
console.log(Object.getOwnPropertyDescriptor(myInstance, 'instanceProperty')); // { value: '我是实例属性', writable: true, enumerable: true, configurable: true }从上述示例中，我们可以清楚地看到：
- greet方法存在于MyClass.prototype上，并且实例通过原型链访问它。
- instanceProperty字段直接存在于myInstance对象上，而不是MyClass.prototype上。
注意事项与总结
- 内存与性能： 由于公共实例字段是直接添加到每个实例上的，如果一个类有大量实例且每个实例都有大量实例字段，可能会比将所有成员都放在原型上消耗更多的内存。然而，对于大多数实际应用场景，这种差异通常可以忽略不计。
- 继承行为： 当子类继承父类时，父类的公共实例字段会通过调用父类的构造函数（super()）被添加到子类实例上。
- 何时使用： 当你需要每个实例拥有自己独立的数据副本时，公共实例字段是理想的选择。例如，每个用户实例有自己的用户名、邮箱等。当所有实例共享相同的行为或常量时，方法和静态属性更合适。
理解公共实例字段与原型链之间的这种区别，对于深入掌握JavaScript的面向对象编程至关重要。它帮助我们更准确地预测代码行为，并编写出更健壮、更易于维护的JavaScript类。
