javascript - クラスプロパティのaddEventListenerへの参照の受け渡し

Question

addEventListenerにパラメータとしてクラスプロパティを送信しようとしています。これは、イベントが発生したとき、私はもはやクラス（これ）の文脈にはなく、\プロパティの値を取得することができないからです。私は何とかその関数のプロパティのリファレンスを渡す必要があります。 イベントターゲットに属性として属性を追加して、このようにアクセスできることは知っていますが、より直接的な解決策が必要であると確信しています。 これは、関連するコードです：

export class ZZZZZ{ 
constructor() 
{ 
    this.activeTooltip = null; //This is the relevant property 
} 

YYYYFunc() 
{ 
    /*thinking of doing it like that*/ 
    var activeTooltip = this.activeTooltip; 
    cancelDiv.addEventListener('click', function() { XXXFunc(activeTooltip)}); 
} 

XXXFunc(activeTooltip) 
{ 
    var A = this.activeTooltip; //I'm not in the context of the class - 
           //"this" is irrelevant - it is null 
    var B = activeTooltip; 
} 

Answer 1

あなたがそれをやっている方法が動作し、かなり一般的ですが、Function#bindを使用することにより、XXXFuncインスタンスにthisを作ることができない理由はありませんのでご注意：

cancelDiv.addEventListener('click', XXXFunc.bind(this)); 

bindは、呼び出されたときにthisの値をbindに設定してオリジナルを呼び出す新しい関数を返します。だからXXXFuncにはthisがあなたのインスタンスを参照し、this.activeTooltipがその中で動作します。

その他の方法もあります。 ES5およびそれ以前では、あなたがオーバー閉じる変数でFunction#callを使用することができます。

cancelDiv.addEventListener('click',() => XXXFunc.call(this)); 

：ES2015 +で

var _this = this; 
cancelDiv.addEventListener('click', function() { XXXFunc.call(_this)}); 

矢印機能がthis自体の上に閉じているので、あなたは、代わりに変数の矢印機能を使用することができます

どちらの場合も、this（XXXFunc）はthis.activeTooltipで動作します。

そしてもちろん、インスタンス上のメソッドXXXFunc場合は、それもきれいになります：Function#bindを使用して

ES5-：矢印の機能を使用して

cancelDiv.addEventListener('click', this.XXXFunc.bind(this)); 

ES2015の+：

cancelDiv.addEventListener('click',() => this.XXXFunc());