hogehoge foobar Blog Style Beta

Web,Mac,Linux,JavaScript,Perl,PHP,RegExp,Git,Vim,Redmineなど技術的なことのメモや、ちょっと便利そうなものの紹介をしています。

クラスメソッドをthisを使用してイベントハンドらに追加

クラスのメソッドをaddEventListenerを使用して登録しようとすると、
thisがうまく使えません。

addListener(document.getElementById("hogehoge"), 'click', function(event){
     return this.fooBar(event);
});

と書いてしまうと、thisがdocument.getElementById("hogehoge")を指してしまうので、
クラスメソッドのfooBarが呼び出せません。
何か方法はないかなと思って調べてみたところ、
エト記 - JavaScript のクラスのメンバ関数をイベントハンドラに登録する方法が大変参考になりました。

方法としては、thisを一度別の変数に格納し、メソッドを呼び出す時には、
その変数を使用するといった方法です。

var _this_ = this /* thisを_this_に代入 */
addListener(document.getElementById("hogehoge"), 'click', function(event){
    /* _this_を使用してメソッドを呼び出し */
    return _this_.fooBar(event);
});

今まで、上手くできなかった部分がすっきりしました。

エト記 - JavaScript のクラスのメンバ関数をイベントハンドラに登録する方法