Javascript 'this' reference - 誰かが簡単な例を説明できますか？

Question

私はJavaScriptに没頭しています。私は実際のコードで 'this'の参照を理解するのに苦労しています。次の例で誰かが「this」参照を説明できますか？

$('#myimage').mouseenter(function() { 
    $(this).effect('bounce',500); 
});​ 

「this」というキーワードは、宣言する機能を所有しているものを指していることを理解しています。それは、次のコードでは、「この」objectFunction関数によって返されたオブジェクトを参照することを意味します：最初のコードで今すぐ

var objectFunction = function() 
    { 
     var thing = function() { alert(this.toString()); }; 

     return { thing : thing }; 
    } 
objectFunction().thing(); 

、「この」キーワードは、実際にDOM要素 "を指し、 「マイメージ」。私がうまくいかないのは、JavaScriptを検査して決定する方法です。誰かがこれを説明できますか？

Answer 1

例のイベントは、Javascriptエンジンではなく、jQueryによって処理されます。 Javascriptでは、関数を呼び出すときに 'this'が何を参照するかを設定することができます。 jQueryは関数で.applyメソッドを使用してこれを行います。したがって、jQueryがセレクタを解釈するとき、一致する各オブジェクトに対してハンドラ関数を呼び出し、一致するオブジェクトに 'this'を設定します。例えば。上記の例では

var handler = function() { alert(this.id) } 

handler.apply(document.getElementById('something')); 

、ハンドラ内で「これは」「何か」のidを持つDOM要素を参照すると、アラートがテキスト「何か」が表示されます。

Answer 2

例では、匿名関数はイベントハンドラです。キーワードthisは、イベントをトリガした要素を参照します。この場合、イベントはその要素にのみバインドされているため、これはidがmyimageの要素にすることができます。これは必ずしも当てはまりません。

$('img').mouseenter(function() { 
    $(this).effect('bounce',500); 
});​ 

このコードでは、ドキュメント内のすべてのイメージタグにmouse-enterイベントハンドラが追加されます。したがって、thisは潜在的にドキュメント内の任意のイメージを参照する可能性があります。どの画像がマウスカーソルによって「タッチされたか」によって異なります。