本文解析 javascript 类中同名字段（如 `method = "sss"`）与方法（如 `method() {}`）在继承时的行为差异：前者作为实例自有属性被初始化，后者定义在原型上；当子类重写同名方法时，实例属性优先于原型方法，导致看似“覆盖失效”的现象。
在 JavaScript 类中，看似相同的名称（如 method）可能代表完全不同的语言特性——类字段（Class Fields） 与 类方法（Class Methods），它们在内存布局、属性归属和继承行为上存在本质区别。
? 核心区别：实例属性 vs 原型方法
-
类字段语法（method = "sss"） 是 constructor 中赋值的语法糖：
class Parent { method = "sss"; // 等价于 constructor() { this.method = "sss"; } }✅ 它会在每次 new Parent() 或 new Child() 时，直接在实例对象上创建一个自有属性（own property）。
✅ 因此 child.hasOwnProperty("method") 返回 true。 -
类方法语法（method() { ... }） 则被定义在类的 prototype 上：
class Parent { method() { console.log("Parent"); } } // 等价于 Parent.prototype.method = function() { ... };❌ 它不会出现在实例自身上，而是通过原型链访问。
❌ child.hasOwnProperty("method") 返回 false，但 Parent.prototype.hasOwnProperty("method") 为 true。
? 混合场景：为什么 child.method 输出 "sss" 而非调用子类方法？
看这个关键示例：
立即学习“Java免费学习笔记（深入）”；
class Parent {
method = "sss"; // ← 实例属性：child.method = "sss"
}
class Child extends Parent {
method() { console.log("Child"); } // ← 原型方法：Child.prototype.method
}
const child = new Child();
console.log(child.method); // 输出: "sss"执行过程如下：
- new Child() 触发 Parent 构造函数逻辑（隐式调用 super()），执行 this.method = "sss" → child 对象上创建自有属性 method: "sss"；
- Child.prototype.method 虽然存在，但属性访问优先查找实例自身（自有属性），不会继续沿原型链查找同名方法；
- 因此 child.method 取到的是字符串 "sss"，而非可调用的函数 —— 此时它已不是函数，而是数据属性。
⚠️ 注意：若尝试调用 child.method()，将抛出 TypeError: child.method is not a function。
? 验证属性归属的完整示例
class Parent {
prop = "parent value";
method() { console.log("Parent"); }
}
class Child extends Parent {
prop() { return "child value"; }
method() { console.log("Child"); }
}
const child = new Child();
console.log(child.hasOwnProperty("prop")); // true ← 字段：实例自有
console.log(child.hasOwnProperty("method")); // false ← 方法：在原型上
console.log(Child.prototype.hasOwnProperty("prop")); // false
console.log(Child.prototype.hasOwnProperty("method")); // true
console.log(Parent.prototype.hasOwnProperty("method")); // true此时 child 的完整结构等效于：
{
prop: "parent value", // ← 来自 Parent 构造器赋值（类字段）
__proto__: {
prop() { return "child value"; },
method() { console.log("Child"); },
__proto__: {
method() { console.log("Parent"); } // ← Parent.prototype
}
}
}✅ 最佳实践建议
- 避免同名冲突：切勿在父类中用字段声明 xxx = ...，又在子类中用 xxx() {} 定义方法（或反之），极易引发静默覆盖/类型错乱；
-
明确意图：
- 用 method() {} 表达可复用的行为（共享于所有实例）；
- 用 field = value 表达每个实例独立的状态值（如 id, name, isLoading）；
- 需动态绑定函数？ 使用箭头函数字段（handler = () => {...}）可确保 this 绑定到实例，但注意它仍是实例属性，不参与原型继承。
理解类字段与方法的底层机制，是写出可维护、可预测的 JavaScript 类的关键一步。
