深入理解JavaScript类中的公共实例字段与原型链-js教程-PHP中文网

深入理解JavaScript类中的公共实例字段与原型链

霞舞

发布： 2025-09-26 09:47:46

原创

465人浏览过

深入理解javascript类中的公共实例字段与原型链

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属性会被直接添加到这个实例对象上。其内部机制可以理解为，这些字段的赋值操作被“烘焙”进了类的构造函数中。

文心大模型

百度飞桨-文心大模型 ERNIE 3.0 文本理解与创作

查看详情

换句话说，上面的类声明大致等价于：

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

登录后复制

从上述输出可以看出：