本文深入探讨JavaScript ES6类中公共实例字段（Public Instance Fields）的内部工作机制。揭示这些字段并非存储在类的原型链上，而是直接在每个实例创建时通过构造函数赋值，从而解释了为何它们不能通过原型链访问，并强调了它们作为实例独有属性的特性。
在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 Aconsole.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')); // 输出: falseconsole.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类的内部工作原理以及有效利用这一特性至关重要。
以上就是JavaScript类中的公共实例字段：深入理解其工作原理与原型链的关系的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1523254.html
微信扫一扫 
支付宝扫一扫 
