Javascript之this關鍵字深入解析_javascript技巧

首先，我先拋出一個定論：」在Javascript中，This關鍵字永遠指向函數(方法)的擁有者」。

函數

複製程式碼

複製程式碼

複製程式碼

程式碼如下function introduce() {

     alert("Hello, I am Laruencern");

}

對於這個函數，this指向誰呢？

如我之前的文章所述(Javascript作用域)，定義在全域的函數，函數的擁有者就是目前頁面，也就是window物件。

這也就是為什麼，我把函數用引號引起來，因為定義在全域的函數，其實也就是window物件的一個方法。 所以，我們即可用透過函數名稱直接調用，也可用透過window.方法名稱來調用，這個時候，方法中的this關鍵字指向它的擁有者：window物件。 如果，我們查看window的introduce屬性，就會得到：

複製程式碼


程式碼如下:

程式碼如下:

程式碼如下: 程式碼如下:

程式碼如下:var name = "I am Laruence";function introduce() {     alert(this.name);}alert(window.introduce);}

alert(window.introduce);

看了上面的程式碼，也許你會想到既然，全域函數是window物件的方法，全域變數是window物件的屬性(Javasript作用域中已有述及)，那麼，在全域函數中就可用透過this關鍵字來存取全域變數吧？

答案是肯定的，如果呼叫introduce函數，你就會認識我是Laruence。

事件處理函數

也許，對於this關鍵字的迷惑，絕大部分原因是來自把函數(方法)用在事件處理的時候。

複製程式碼

程式碼如下:例如，我們現在需要在點選」name」輸入框的時候，顯示name輸入框的value。那麼，可用寫下如下程式碼： function showValue() {

     alert(this.value);

}
document.getElementById('name').onclick = showValue;


上面的程式碼🎜> ，運作正常，但是why？不是說函數的this指標永遠指向函數所有者麼？不是說全域變數的擁有者是window物件麼？

呵呵，如果你能想到這個問題，那表示你在認真的看我的文章，否則，我建議你從頭看起，否則看完了，你還是迷糊~

恩，對，對於上面的程式碼，showValue是定義在了全域對象，那麼看來問題只能發生在onclick事件綁定的時候了。

我們知道，在JS中一切都是對象，函數和方法也都是對象的屬性，只不過函數有可執行的內部屬性。所以,對於上面的程式碼,在對onclick綁定處理器的時候, 其實是對id為name的輸入框Dom物件的onclick屬性賦值。

也就是說，我們把函數showValue Copy 給了name輸入框物件的onclick屬性。如果我們查看此時的onclick：複製程式碼

程式碼如下:


function showValue() {
}
document.getElementById('name').onclick = showValue;

alert(document.getElementById('name').onclick);所以，當事件觸發的時候，就會去呼叫name輸入框的onclick方法，這時候，this關鍵字自然就指向的是name輸入框了。 但是，迷惑的事情就來了，例如下面這種寫法：複製程式碼 程式碼如下: function showValue() {     alert(this.value);}
就無法正常運行，這又是為什麼呢？

恩，因為這時候，不是賦值，而是引用。

如果我們注意倆種onclick的寫法，你會發現，對於之前的方法，我們使用的是：

dom.onclick = showvalue; //沒有呼叫符

而對於剛才的方法：

onclick = "showvalue()" //有呼叫符

這個也能側面的反映出倆者的區別：對於前者，是賦值，而對於後者是引用。如果我們這個時候查看輸入框的onclick屬性，我們得到：

alert(dom.onclick);

看到差別了麼？也就懂得為什麼了吧？

講到這裡，有一個很有趣的例子，大家可以在IE下試試：

改變this的指向

那，既然我們已經知道為什麼了，那怎麼才能讓this指向我們想要指的地方呢？

對於上面的事件處理函數來說，我們可以有以下幾種寫法：

dom.onclick = showValue();
dom.onclick = function() { alert(this.value) ;}
//想想剛才我們的引用,是如何嵌入這句的.
dom.addEventListener(dom, showValue, false); //ff only

而對於不是事件處理函數的場合，我們可以使用apply，或是call，來改變this關鍵字的指向。

例如：

複製程式碼 程式碼如下:

varru laruence> 程式碼如下:


varru laruence> laruence laruence> name : 'laruence',
    age : 26,
    position : 'Senior PHP Engineer',    company : 'Baidu.inc'

;
;function introduce() {

    alert(this.name);

}

introduce.call(laruence);