JavaScript类中同名字段和方法有什么不同？

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《JavaScript 类中同名字段与方法区别解析》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

在 JavaScript 类中，同名的实例字段（如 `method = "sss"`）和原型方法（如 `method() {}`）会共存于不同对象层级：前者作为实例自身的可枚举属性存在，后者位于原型链上；访问时始终优先返回实例属性，导致看似“覆盖失败”的行为。

JavaScript 类中，字段声明（Class Fields） 与 方法定义（Method Definitions） 虽然语法相似、名称相同，但底层机制截然不同，直接决定了属性查找时的行为差异。

? 根本区别：实例属性 vs 原型方法

• ✅ method = "sss" 是 公共类字段（Public Class Field），等价于在 constructor() 中执行 this.method = "sss"。
  → 它会在每次实例化时（即 new Child()）为该实例创建一个自有属性（own property），存在于实例对象自身上。

• ✅ method() { ... } 是 原型方法（Prototype Method），会被定义在 Child.prototype 或 Parent.prototype 上，不占用实例内存，所有实例共享该函数引用。

可通过 hasOwnProperty() 清晰验证：

class Parent {
  method = "sss";
  parentMethod() { console.log("Parent"); }
}

class Child extends Parent {
  method() { console.log("Child"); }
}

const child = new Child();

console.log(child.hasOwnProperty("method"));        // true  ← 字段优先存在实例上
console.log(child.hasOwnProperty("parentMethod"));  // false ← 方法在原型上
console.log(Child.prototype.hasOwnProperty("method"));     // false
console.log(Child.prototype.hasOwnProperty("parentMethod")); // false
console.log(Parent.prototype.hasOwnProperty("parentMethod")); // true

⚠️ 关键后果：字段永远“遮蔽”同名原型方法

当 child.method 被读取时，JavaScript 引擎按 属性访问规则 查找：

1. 先检查 child 自身是否有 method 属性（有 → "sss"）；
2. 若无，才沿 __proto__ 向上查找（即 Child.prototype → Parent.prototype）。

因此，即使 Child 类定义了同名方法 method() {}，它也仅存在于 Child.prototype.method，而 child.method 仍指向实例上的字符串 "sss" —— 这不是“覆盖失败”，而是字段与方法根本不在同一查找层级。

? 类比理解：child.method 就像 child["method"]，访问的是数据属性；而 child.method() 的调用之所以报错（"sss" is not a function），正是因为取到的是字符串而非函数。

✅ 正确实践建议

• ❌ 避免在父子类中对同一标识符混用字段与方法（如 method = ... 和 method() {}），易引发隐式遮蔽和逻辑混乱。
• ✅ 若需“重写”行为，请统一使用方法定义：

  class Parent {
    method() { console.log("Parent"); }
  }
  class Child extends Parent {
    method() { console.log("Child"); } // ✅ 正确覆盖：子类方法在原型链更高层
  }

• ✅ 若需实例独有数据，请使用语义明确的字段名（如 methodName = "sss"），与方法名严格区分。

? 总结

掌握这一机制，是写出可维护、可预测的 JavaScript 类的关键基础。更多细节可参考 MDN：Public class fields。

今天关于《JavaScript类中同名字段和方法有什么不同？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！