在课程中使用Ecmascript 6箭头函数作为方法的正确方法是什么？

Question

Ecmascript 6箭头函数似乎非常适合用作类中的方法，因为它们不受调用上下文弄乱“this”引用的影响。 但是，我无法看到如何以我期望的方式使用它们。 以下是一个类，它显示了我可以看到使用它们的两种方法：

class Person {

constructor(aName) {
    this.name = aName;
    this.say2 = () => console.log(this.name);
}

say() { console.log(this.name) }

say3() { () => consolve.log(this.name) }

}

say2和say3都将使用新的这个处理，并且应该能够将它们传递给单击处理程序，以及需要回调的其他函数，而不必担心在某些导致“this”意外地指向某些东西时调用的回调除了对象的适当实例。

然而，say2和say3似乎都很尴尬。 say2在构造函数中定义，say3实际上是箭头函数的包装器。 我期待一些sytax可以让我用类似的东西替换say（）行

say: () => console.log(this.name)

但就我所知，你不能做这样的事情。 所以问题是，使用箭头函数作为方法是say2或say3合理的方法。 有没有更好的办法？

Answer 1

在ES6语法中， 类的主体可能只包含方法定义 ，因此这里不允许使用箭头函数表达式。 这是语法相关部分的简化片段：

ClassBody :
    ClassElementList

ClassElementList :
    ClassElement
    ClassElementList ClassElement

ClassElement :
    MethodDefinition
    static MethodDefinition
    ;

MethodDefinition :
    PropertyName ( StrictFormalParameters ) { FunctionBody }
    GeneratorMethod
    get PropertyName ( ) { FunctionBody }
    set PropertyName ( PropertySetParameterList ) { FunctionBody }

所以在你的例子中：

class Person {

    constructor(aName) {
        this.name = aName;
        this.say2 = () => console.log(this.name);
    }

    say() { console.log(this.name) }

    say3() { () => console.log(this.name) }

}

• say是通常的方法定义，这从同样的问题遭受与this结合作为正常功能。 但是，在传递它时可以使用bind来解决这个问题，就像在element.addEventListener('click', this.say.bind(this)); 。
• say2会起作用，但是你失去了在构造函数之外指定方法的便利。
• say3不起作用 - 虽然它在语法上是有效的，但它将被解析为一个方法，它的主体由一个箭头函数组成。 澄清say3() { () => console.log(this.name) } ， say3() { () => console.log(this.name) }和say3() { return () => console.log(this.name) }不同之处在于前者什么都不做并返回undefined ，而后者将返回一个箭头函数表达式，当调用时，它将打印到控制台。