从子类中的父类调用方法答案

【问题标题】：Call method from parent class inside child class从子类中的父类调用方法
【发布时间】：2020-01-14 09:27:40
【问题描述】：

我最近开始在javascript 中了解Classes，在阅读一些非常有趣的东西时，我想尝试一些自己的想法。

如果你有一个Parent 的父类，其中你有一个logSomething```` and a child class ofChild, with which you doclass Child extends Parent, how can you then execute the inherited method from the parent class,logSomething 的method，在子类里面？

如果您在Child 类中定义一个方法并将this.logSomething() 添加到该方法中，则每当调用子类中的方法时，继承的logSomething 函数确实会运行，但除此之外我没有'没有找到任何直接在该子类中执行 logSomething 的方法。

我已经尝试过this.logSomething()，我已经尝试将它添加到一个对象、自执行 (IIFE) 函数以及我可以做的所有事情但没有结果。

class Parent {
  constructor() {}

  logSomething() {
    console.log('I am logging something')
  }

}

class Child extends Paren {
  logSomething() // This does not work
}

目前这样做是行不通的，如果抛出一个错误，指的是你试图定义一个函数。

如果我没弄错React 使用与life-cycle methods 类似的东西，我知道这应该是可能的，对吧？如componentWillMount。

要怎么做呢？

【问题讨论】：

见stackoverflow.com/a/43591507/673457

标签： javascript es6-class

【解决方案1】：

第一个错误是您正在扩展 Paren 而不是 Parent。
此外，您不能只在类中抛出随机语句。它需要在函数内部。
如果您希望它在您创建该类的实例时运行，它应该在constructor 或被它调用的函数中。（请注意，您需要在构造函数的开头调用super()。
最后还是需要使用this.logSomething或者this.logSomething

class Parent {
  constructor() {}

  logSomething() {
    console.log('I am logging something');
  }

}

class Child extends Parent {
  constructor() {
    super();
    this.logSomething(); // Will use Parent#logSomething since Child doesn't contain logSomething
    super.logSomething(); // Will use Parent#logSomething
  }
}

new Child();

class Parent {
  constructor() {}

  logSomething() {
    console.log('Parent Logging Called');
  }

}

class Child extends Parent {
  constructor() {
    super();
    this.logSomething(); // Will call Child#logSomething
    super.logSomething(); // Will call Parent#logSomething
  }

  logSomething() {
    console.log('Child Logging Called');
  }
}

new Child();

你也可以这样做：

class Parent {
  constructor() {}

  logSomething() {
    console.log('Parent Logging Called');
  }

}

class Child extends Parent {
  logSomething() {
    console.log('Child Logging Called and ...');
    // Careful not use this.logSomething, unless if you are planning on making a recursive function
    super.logSomething();
  }
}

new Child().logSomething();

您可以使用this 调用任何函数或使用父类的任何属性，只要新类没有自己对该属性的定义。

【讨论】：

很详细，我喜欢，我只剩下一个问题，React你怎么能做componentWillMount() { // after the component mounts it runs whatever is in here }？是否有某种特殊的操作在允许这样做？
@Nick09 我很困惑为什么这可能是个问题。
这不是问题，我只是想知道是否有任何解释，因为与JavaScript Class System 相关的所有内容似乎都反映在React 中，除此之外的所有内容，我想知道为什么:)
我还是不明白，为什么你认为componentWillMount 应该在 React 中抛出错误？
因为你直接将它写在Child 的主体内，extends Component 就像这样 ``` componentWillMount() { // 组件挂载后它运行这里的任何内容}```与您刚刚为我们详细介绍的方法相反，它需要在 constructor 内部或从另一个函数内部调用。使用React 和componentWillMount 你不要在constructor 里面做，你直接在类的block scope 里面做，所以直接在class Child extends Parent { componentWillMount() { // code to execute } }里面做

【解决方案2】：

查看here了解更多信息。

class Parent {
  constructor() {}

  logSomething() {
    console.log('I am logging something')
  }

}

class Child extends Parent {
  logSomething() {
    super.logSomething(); // Call parent function
  }

}

【讨论】：

你可以在子函数中使用this.logSomething()，而不是logSomething :p
@JaromandaX 这是不正确的，您必须没有名为logSomething 的函数或属性才能使用Parent#logSomething 使用this.logSomething
是的，在我的解决方案中，您覆盖父函数并在子函数内部调用父函数；）
@nickzoum - 你误解了我的评论，但我原谅你

【解决方案3】：

a) 你不能在那里调用函数，你可以在类中声明的函数中调用函数

b) 你需要使用 this.logSomething()

示例：

class Parent {
  constructor() {}
  logSomething() {
    console.log('I am logging something')
  }

}

class Child extends Parent {
  fn() {
    this.logSomething() // This does work
  }
}
new Child().fn()

查看在子类中何时将fn 称为logSomething 的其他答案 - 那么您需要super.logSomething() 来调用“父”logSomething 而不是子logSomething

【讨论】：