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语法中，the body of a class可能只包含method definitions，因此此处不允许使用箭头函数表达式。这是语法相关部分的简化摘录：

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() { return () => console.log(this.name) }的不同之处在于前者将不执行任何操作并返回undefined，而后者将返回箭头函数表达式，当调用该表达式时，将打印到控制台。

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

1 个答案: