javascript 类中相同的方法或变量名称的行为不同

Question

class Parent{
    method(){
        console.log("Parent");
    }
}
class Child extends Parent{
    method(){
        console.log("Parent");
    }
}
var child = new Child();
console.log(child.method);

子类中的控制台返回方法是预期的行为。

class Parent{
    method = "sss"
}
class Child extends Parent{
    method(){
        console.log("Child")
    }
}
var child = new Child();
console.log(child.method)

为什么控制台在父类中返回方法变量 - “sss”？

Answer 1

来自MDN

公共实例字段可以在基类的构造时（在构造函数主体运行之前）添加到实例中，也可以在子类中的 super() 返回之后添加到实例中。

即它屏蔽了该方法，因为它是在构造函数运行时分配的。

child.method是对象本身的属性（其值为字符串）。这掩盖了method原型上的函数。

下面的代码演示了。

您可以看到，在示例a（您的代码）中， 的字符串值method是其自身的属性child，但您可以深入原型链以从类中获取函数值。

在示例中b（删除了公共实例字段），该方法存在并且可以被调用，但不在其child本身上（因为它是类的实例，因此它可以自动搜索原型链，因为它没有被屏蔽）。

const a = () => {
  class Parent {
    method = "sss"
  }
  class Child extends Parent {
    method() {
      console.log("Child")
    }
  }
  var child = new Child();
  console.log("a: " + child.hasOwnProperty('method'));
  Object.getPrototypeOf(child).method();
};

a();

const b = () => {
  class Parent {}
  class Child extends Parent {
    method() {
      console.log("Child")
    }
  }
  var child = new Child();
  console.log("b: " + child.hasOwnProperty('method'));
  child.method();
};

b();