javascript中“super”关键字的复杂性答案

【问题标题】：Intricacies of the "super" keyword in javascriptjavascript中“super”关键字的复杂性
【发布时间】：2021-08-07 22:39:38
【问题描述】：

我在 javascript 中有以下两个类：Animals & Cat (Cat extends Animal)。两个类都有一个introduce() 方法；但是，Cat 类需要该方法中的一些附加信息。由于我不想复制整个方法，所以我想了三种方法来实现这一点。

在Cat类的introduction()方法下，我在cmets中写了三种方法。

第一个版本不起作用。这对我来说很有意义，因为它使用了错误的上下文。
第二个版本确实有效。这对我来说也很有意义，因为我使用 call() 来明确设置上下文。
第三个版本确实有效。这不对我来说没有意义。这与第一个版本有何不同？ super 关键字是否会以某种方式改变上下文？

任何帮助将不胜感激 - 谢谢！

class Animal {
  constructor(name, age, legs, species, status) {
    this.name = name;
    this.age = age;
    this.legs = legs;
    this.species = species;
    this.status = status;
  }
  introduce() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old and ${this.status}.`;
  }
}

class Cat extends Animal {
  constructor(name, age, status) {
    super(name, age, 4, 'cat', status);
  }

  introduce() {
    // return Animal.prototype.introduce() + ' Meow meow!';
    // return Animal.prototype.introduce.call(this) + ' Meow meow!';
    // return super.introduce() + ' Meow meow!';
  }
}

【问题讨论】：

"这与第一个版本有何不同？" 因为super 关键字正是为这种情况而创建的？如果它不能真正用于任何复杂的事情，那么拥有它就没有任何意义。
@CRice 好吧，super 在其他 OOP 语言中用于与类的父级定义进行交互。因此，如果您有someMethod(one) { super.someMerhod(one, "two"); }，您将调用该方法的父版本。在该代码示例中，它是提供单个参数覆盖，其中父级采用两个参数。所以，在 JS 中保留了相同的 OOP 语义，因此它与传统的 OOP 并没有太大的分歧。毕竟，class 的引入是为了更接近于模仿传统的 OOP。所以，super.someMethod() 有点像this.__proto__.__proto__.someMethid.call(this)。

标签： javascript class oop inheritance super

【解决方案1】：

第三种方法是实现此目的的标准方法。它在功能上与第 2 版相同。在super[method]() 形式的调用中，当前对象（this）被设置为上下文。

见MDN docs。

【讨论】：