JavaScript addEventListener() のスコープについて

Extjs を使っていると、イベント処理をするために「scope:me」または「scope:this」をよく使うと思います。
これを使うと、イベントの呼び出し先 function のthis が、scope オブジェクトになります。
とても便利ですよね。


で、今回「window.postMessage();」 を使う事になったため、「window.addEventListener('message',fn);」について調べたのですがどのページを見ても、呼び出し先 function の this 変更方法が、小さくしか書かれて無かった。
分かりにくかったのでここに書く。



window.addEventListener('message', this.onclick2.bind(this));
または
element.addEventListener('message', this.onclick2.bind(this));


です。 「.bind(this)」 が重要です。


Extjsで書くなら、こんな感じでしょうか。


window.addEventListener("message", me.onWindowMessage.bind(me));

これで、

function : onWindowMessage(event){
    this; // window オブジェクトでは無く、上記「me.onWindowMessage.bind(me)」のmeオブジェクトになる
} 

this は、上記の "me" になります。
this は、"window" ではありません。

作業しやすくなりますね。

因みに、「javaScript 1.8.5(ecmascript 5.1)」以上と言う制限がありますが、もう2011年に策定されています。
対応はここを見た方が早いです。
http://kangax.github.io/compat-table/es5/#Function.prototype.bind
主要ブラウザの最近のバージョンなら対応していますよね。



検索用：window.onmessage this スコープ 変更 ファンクション 呼び出し先 eventListener