將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箭頭函數用作類中的方法的正確方法是什麼？

回答

相關問題