为什么Javascript ES6无法调用匿名超级函数? [英] Why can't Javascript ES6 call an anonymous super function?

问题描述

请说明使用匿名函数使用父子关系与使用类函数之间的区别吗? 在情况1中，一切正常.在情况2中，codepen不返回任何结果.

Please explain the difference between using a parent-child relationship using anonymous functions and using class functions? In case 1 everything works as expected. In case 2, codepen does not return any results.

//CASE 1
class Parent {
  constructor(name) {
    this.name = name;
  }

  exec() {
    console.log('name', this.name);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  exec() {
    super.exec();
    console.log('age', this.age);
  }
}

const c = new Child('ChildName', 31);
c.exec();

//writes Childname + 31 (expected behaviour)

和

//CASE 2
class Parent {
  constructor(name) {
    this.name = name;
  }

  exec = () => {
    console.log('name', this.name);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  exec = () => {
    super.exec();
    console.log('age', this.age);
  }
}

const c = new Child('ChildName', 31);
c.exec();

//writes nothing. Seems to crash.

推荐答案

只有一个实例对象，并且在一个对象上不能有两个具有相同名称的属性.您的子类属性将覆盖超类的属性.

There is just one instance object, and there can't be two properties with the same name on one object. Your subclass property overrides the property of the superclass.

此外，您无法通过super访问属性，因为super是指上层原型，并且在第二种情况下不包含任何属性(在第一种情况下，它包含方法).因此，super.exec是undefined，并且调用会引发错误.

Additionally you can't access properties via super as super refers to the upper level prototype, and that does not contain any property in your second case (in your first case it contains the method). Therefore, super.exec is undefined, and calling that throws an error.

原型链如下所示:

 // Case 1
                                              - super ------------v
 { name: "ChildName", age: 31 } -> Child { exec() { ... } } -> Parent { exec() { ... } }


 // Case 2
                                  - super² --------------------v                   
 { name: "ChildName", age: 31, exec() { ... } } -> Child {} -> Parent {}

²实例内部的super指向Parent可能有点令人困惑，但这是因为类字段是

² It might be a bit confusing that super inside of the instance points to Parent, but that's because class fields are evaluated inside of a special initializer function, and that has Child as it's [[HomeObject]], not the instance, and as super refers to the [[HomeObject]]s prototype, it will refer to Parent.

这篇关于为什么Javascript ES6无法调用匿名超级函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！