JavaScript类中的公共实例字段（Public Instance Fields）并非存储于类的原型（prototype）上，而是直接在每个类实例被创建时，通过构造函数机制，将其作为实例自身的属性进行初始化。这意味着这些字段是实例特有的，无法通过类的原型链直接访问，与类方法存储在原型上的机制截然不同。
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 instanceconsole.log(obj2.instanceProperty); // I belong to the instanceobj1.incrementCounter(); // Counter for this instance: 1obj1.incrementCounter(); // Counter for this instance: 2obj2.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); // undefinedconsole.log(MyClass.prototype.prototypeMethod); // [Function: prototypeMethod]console.log("--- 验证属性所有权 ---");console.log(obj1.hasOwnProperty('instanceProperty')); // trueconsole.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类至关重要。它帮助我们区分哪些数据是所有实例共享的行为（原型方法），哪些是每个实例独有的状态（实例字段）。
以上就是深入理解JavaScript类中的公共实例字段与原型链的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1523139.html
微信扫一扫 
支付宝扫一扫 
