javascript - イベントリスナー使用時に「this」の値を維持する

Question

私は次の機能を持っています：

onDocumentKeyUp: function (e) {
    if (e.keyCode === 27) {
       this.deactivate();
    }
}

私はこれを次のようにバインドしたかった：

$(document).on('keyup', onDocumentKeyUp);

しかし、私がそうすると、関数this内はドキュメントを参照します。onDocumentKeyUp私はこれを解決しました：

var self = this;
$(document).on('keyup', function(e) { self.onDocumentKeyUp(e); });

これは機能しますが、これを実現するためのよりクリーンな方法があることを教えてくれます。.call()またはどういうわけか...apply()ここに適用しますか？これらの機能が正確にどのように機能するかはまだわかりません。

また、必ずしもに限定する必要はありませんjQuery.on()。これを行う「バニラ」の方法がある場合は、ゲストになって教えてください。

score 2 · Accepted Answer

を使用してコンテキストを設定できます (または.bind()のようにすぐに呼び出す必要はありません):callapply

$(document).on('keyup', this.onDocumentKeyUp.bind(this));

このメソッドは ES5.1 準拠のブラウザーでのみサポートされているためjQuery.proxy、ポリフィルの代わりに使用できます。

score 1 · Accepted Answer

ここでメソッドdataのパラメーターに注目してください: http://api.jquery.com/on/ また、jQuery.proxy メソッドを利用することもできます: http://api.jquery.com/jQuery.proxy/on

ここに jsFiddle があります: jsFiddle

2 に答える 2