如何在子类中使用“super”在超类上调用箭头函数[重复]

Question

您似乎无法在子类中使用super.methodName() 调用超类箭头函数：

class Parent {
  constructor() {
    console.log('in `Parent` constructor')
  }
  parentArrow = () => {
    console.log('parentArrowFn')
  }
  parentMethod() {
    console.log('parentMethod')
  }
}

class Child extends Parent {
  constructor() {
    super()
    console.log('in `Child` constructor')
  }
  childMethod() {
    console.log('childMethod')
    super.parentMethod() // works
    super.parentArrow() // Error
  }
}

(new Child()).childMethod();

产生错误：

Uncaught TypeError: (intermediate value).parentArrow is not a function
    at Child.childMethod (<anonymous>:21:15)
    at <anonymous>:1:7

有什么方法可以防止这种情况发生，以便我可以在父类中使用箭头函数，同时确保它们可以通过子类中的super 访问？

Answer 1

es6 类中的公共字段或“类实例字段”尚未在所有环境中本机支持，即使您需要通过 this 引用而不是 super 来调用它，因为它变成了 instance 属性而不是 prototype 上的属性：

class Parent {
  constructor() {
    console.log('in `Parent` constructor')
  }   
  parentArrow = () => {
      console.log('parentArrowFn')
  }
  parentMethod() {
    console.log('parentMethod')
  }
}

class Child extends Parent {
  constructor() {
    super()
    console.log('in `Child` constructor')
  }
  childMethod() {
    console.log('childMethod')
    super.parentMethod() // works
    this.parentArrow() // Calls parentArrow 
  } 
}
new Child().childMethod();

需要使用this 而不是super 调用箭头函数是因为当使用箭头函数作为方法时，parentArrow 被添加为 instance 的属性而不是prototype 和super 用于调用原型上声明的方法。

当您在类中声明箭头函数时，您的代码可以转换为以下代码：

constructor() {
   console.log('in `Parent` constructor');
   // becomes an instance property
   this.parentArrow = () => { <----
     console.log('parentArrowFn') |
   }                              |
}                                 |
parentArrow = () => {          ----
   console.log('parentArrowFn')
}