JavaScript 类中的相同方法或变量名称的行为不同-解网

问：

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)

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

JavaScript 类 ES6-Class

@Wimanicesir——我们陷入了术语的泥潭。Method 是值为函数的属性的有用术语。假装方法在某种程度上是特殊的是没有用的。它们肯定没有提供一种同时同时成为字符串和函数的方法。（我们不要讨论向函数添加方法，然后将其赋值为属性值的可能性，因为这不是问题所在）。child.methodtoString

答：

2赞 Quentin 7/24/2023 #1

来自 MDN

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

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

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

下面的代码演示了。

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

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

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();

在变体中，将设置为创建的实例的自有属性（）。method = "sss"methodnew Child()
```
child.hasOwnProperty("method") //=> true
```
而定义普通方法不会设置为实例的自有属性。相反，它被设置在原型链上。method() { console.log("Parent") }
```
Parent.prototype.hasOwnProperty("method") //=> true
```
构造函数代码仅在初始化实例时运行。这意味着在定义 and 类后（每当您使用创建实例时）将始终运行。this.method = "sss"ParentChildnew

class Parent {
    prop = "parent value";
    // aka
    // constructor() {
    //   this.prop = "parent value";
    // }
    method() {
        console.log("Parent");
    }
}

class Child extends Parent {
    prop() {
      return "child Value";
    }
    method() {
        console.log("Child");
    }
}

const child = new Child();

const log = (jsString) => console.log(jsString, '//=>', eval(jsString));
log(`child.hasOwnProperty("prop")`);
log(`child.hasOwnProperty("method")`);
log(`Parent.prototype.hasOwnProperty("prop")`);
log(`Parent.prototype.hasOwnProperty("method")`);

最终的子实例结构如下所示：

new Child()
// returns
Child{ // Child instance depicted using object notation
  // own properties
  prop: "parent value", // set by the Parent constructor

  // prototype chain depicted using the __proto__ (deprecated) property
  __proto__: {
    // Child.prototype
    prop() { return "child Value" },
    method() { console.log("Child") },

    __proto__: {
      // Parent.prototype
      method() { console.log("Parent") },
    }
  }
}

有关更多详细信息，我建议通读 MDN 公共类字段页面。

上一个：Plotly ： R 显示 ymin 和 ymax 的悬停文本

下一个：为什么删除属性 API 不适用于“is”属性？

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

same method or variable name in a javascript class behaves differently

评论

评论