17370845950

本文解析 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" 而非调用子类方法？

看这个关键示例：

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"

执行过程如下：

1. new Child() 触发 Parent 构造函数逻辑（隐式调用 super()），执行 this.method = "sss" → child 对象上创建自有属性 method: "sss"；
2. Child.prototype.method 虽然存在，但属性访问优先查找实例自身（自有属性），不会继续沿原型链查找同名方法；
3. 因此 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 类的关键一步。