メンバ関数をイベントリスナーとして使用するためのES6ショートカットはありますか？

Question

これは、How to access the correct `this` context inside a callback?の複製ではありません。

回答の一部は、the Question is differentと似ている可能性があります。以下のコメントから答えが分かります。これは、ES6の古いJavaScriptではないため、さまざまな解決策があります。この質問はコールバックではなく、イベントリスナーに関するものです。そのようなものには、プレーンコールバックには適用されない他の解決策があります。私はクラスを持っていると私はいくつかのイベントが定型

class SomeClass { 
    constructor(msg, elem) { 
    this.msg = msg; 
    elem.addEventListerer('click', (...args) => { // Can these 
     this._onClickListener(...args);    // three lines 
    });           // be simpler? 
    } 
    _onClickListener() { 
    console.log(this.msg); 
    } 
} 

の束を書くことに私が持っ終わるそのクラス内の関数を呼び出すようにしたい場合は

---

使用するためのいくつかのES6糖衣構文がありますリスナーとしてのクラスメソッド理想的には私は

class SomeClass { 
    constructor(msg, elem) { 
    this.msg = msg; 
    elem.addEventListener('click', this._onClickListener); 
    } 
    _onClickListener() { 
    console.log(this.msg); 
    } 
} 

ような何かをできるように好きで、それが正しくthisを設定し、関係なく、イベントのすべての引数を渡す必要があるだろう。

しかし、それは動作しません。ボイラープレートなしでthisが設定されていません。

class SomeClass { 
 
    constructor(msg, elem) { 
 
    this.msg = msg; 
 
    elem.addEventListener('click', this._onClickListener); 
 
    } 
 
    _onClickListener() { 
 
    console.log(this.msg); // this is wrong 
 
    } 
 
} 
 

 
var s = new SomeClass("hello", document.querySelector("button"));

<button>click me</button>

Answer 1

をあなたはコンテキストをバインドする必要があります。

class SomeClass { 
    constructor(msg, elem) { 
    this.msg = msg; 
    this._onClickListener = this._onClickListener.bind(this); 
    elem.addEventListener('click', this._onClickListener); 
    } 
    _onClickListener() { 
    console.log(this.msg); 
    } 
} 

このソリューションの

追加の利点は、あなたが、私は「リスナーelem.removeEventListener(this._onClickListener)

Answer 2

class SomeClass { 
 
    constructor(msg, elem) { 
 
    this.msg = msg; 
 
    elem.addEventListener('click', this._onClickListener.bind(this)); 
 
    } 
 
    _onClickListener() { 
 
    console.log(this.msg); 
 
    } 
 
} 
 

 
var s = new SomeClass("hello", document.querySelector("button"));

<button>click me</button>

私はあなたを理解し、完全ではないかもしれませんが、それはbindで動作します。

基本的には、bindは常に指定した参照に設定thisにバインドされた関数のコピーを作成します。 （また、引数をバインドすることができますが、それはこの場合には無関係です。）