将Ecmascript 6箭头函数用作类中的方法的正确方法是什么？

Ecmascript 6箭头函数看起来非常适合用作类中的方法，因为它们不受与“this”引用混淆的调用上下文的影响。不过，我看不出如何按照我期望的方式使用它们。下面是一类给出两种方法我可以看到使用它们：将Ecmascript 6箭头函数用作类中的方法的正确方法是什么？

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实际上是箭头函数的包装。我期待一些语法时才这将让我的东西更换得说（）线像

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

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

感谢您的任何意见。

来源

2014-11-01 PerPlexed

在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，而后者将返回一个箭头函数表达式，该表达式在被调用时将打印到控制台。

来源

2015-01-30 17:24:01 btmills

将Ecmascript 6箭头函数用作类中的方法的正确方法是什么？

回答

相关问题