ES6 箭头函数触发“‘super’超出函数或类”错误

Question

考虑以下超类和扩展它的子类：

class SuperClass {
    constructor(name){
        this.name = name;
    }

    sayName = () => {
        alert(this.name);
    }
}

class SubClass extends SuperClass {
    constructor(name){
        super(name);
    }

    sayName = () => {
        super.sayName();
        document.getElementsByTagName('body')[0].innerHTML = this.name;
    }
}

let B = new SubClass('Noam Chomsky');
B.sayName();

在此示例中，该函数sayName在两个类定义中都被编写为箭头函数。当我打电话时，B.sayName()我收到一条错误消息：

函数或类之外的“超级”

JSFiddle 演示错误（检查控制台）

---

但是，如果我重写类定义以不使用箭头函数，则一切正常并且不会收到错误：

class SuperClass {
    constructor(name){
        this.name = name;
    }

    sayName() {
        alert(this.name);
    }
}

class SubClass extends SuperClass {
    constructor(name){
        super(name);
    }

    sayName() {
        super.sayName();
        document.getElementsByTagName('body')[0].innerHTML = this.name;
    }
}

let B = new SubClass('Noam Chomsky');
B.sayName();

JSFiddle 证明它工作正常

有人可以解释为什么我在此处使用箭头函数时会收到此错误吗？

Answer 1

不同之处在于

\n\n

sayName1 = () => {\n    alert(this.name);\n}\n

\n\n

是具有函数类型的属性，而

\n\n

sayName2() {\n    alert(this.name);\n}\n

\n\n

是一种方法。ES 类以完全不同的方式处理方法和属性。方法存在于类原型上，而属性则分配给每个实例。并且您无法sayName1通过以下方式访问父级super.sayName1，因为它不在您父级的类上，它仅在实例对象上并且可以通过instance.sayName1。

\n\n

另外，来自ECMAScript\xc2\xae 2015 语言规范：

\n\n

\n

ArrowFunction 不定义参数、super、\n this 或 new.target 的本地绑定。ArrowFunction 中对参数、super、this 或 new.target 的任何引用都必须解析为词法封闭环境中的绑定...引用 super 的 ArrowFunction 始终包含在非 ArrowFunction 中，并且实现 super 的必要状态可以通过 ArrowFunction 的函数对象捕获的范围来访问。

\n

\n