Javascript“ this”參考-有人可以解釋這個簡單的例子嗎？

Question

我正在深入研究JavaScript，並且正在努力理解實際代碼中的“ this”引用。 有人可以在以下示例中解釋“ this”參考嗎？

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

我知道關鍵字“ this”是指聲明函數“擁有”的任何內容。 這意味着在以下代碼中，“ this”將引用由objectFunction函數返回的對象：

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

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

現在在第一個代碼中，“ this”關鍵字實際上是指DOM元素“ myimage”。 我無法確定是如何通過檢查JavaScript來確定的。 有人可以解釋嗎？

Answer 1

您的示例中的事件是由jQuery處理的，而不是由Javascript引擎處理的。 在Javascript中，可以設置調用函數時“ this”指的是什么。 jQuery在函數上使用.apply方法來執行此操作。 因此，當jQuery解釋選擇器時，它將為每個匹配的對象調用處理程序函數，將'this'設置為該匹配的對象。 例如

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

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

在上面的示例中，處理程序中的“ this”將引用ID為“ something”的dom元素，並且警報將顯示文本“ something”。

Answer 2

在您的示例中，匿名函數是事件處理程序。 this關鍵字將引用觸發事件的任何元素。 在這種情況下，這只能是ID為myimage的元素，因為事件僅綁定到該元素。 不一定是這種情況； 考慮以下變體：

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

該代碼會將鼠標輸入事件處理程序附加到文檔中的所有圖像標簽。 因此， this可能會引用文檔中的任何圖像。 這取決於鼠標光標“觸摸”了哪個圖像。