|
|
自己本身
先來看看函數 doSomething() 里的 this 到底是指向(refer to)了什么？
function doSomething() { this.style.color = '#cc0000';}JavaScript的 this 總指向所運行的函數“自己本身”。也就是說，它是一種指向函數對象的方法。在頁面中定義 doSomething() 函數，自己本身是指頁面。也就是說，是指 JavaScript 的 window 對象(全局對象)。而 onclick 屬性它自己本身是屬 HTML 元素所有。
這個“所有權”是 JavaScript 的 OO(面向對象)特性的后果。在 把對象作關聯數組 頁面中有更多信息。
------------ window --------------------------------------| / / || | || this || ---------------- | || | HTML element | <-- this ----------------- || ---------------- | | doSomething() | || | | ----------------- || -------------------- || | onclick property | || -------------------- || |----------------------------------------------------------
如果 doSomething() 運行時沒有任何與之預留相關的話，關鍵字 this 指向 window(窗口) ，該函數將會改動 window 的 style.color。而 window 沒有 style 這樣的對象，所以該函數會引發 JavaScript 的錯誤。
拷貝(copying)
因此，用好 this 有些難度。像在函數中使用的上面例子的這種情況，它應該指向 HTML 元素“自己本身”。換個說法是，有個函數拷貝指向 onclick 屬性。 我們來看看在傳統事件注冊中的情況。
element.onclick = doSomething;
因為函數拷貝全指向了 onclick 屬性(現在變成了方法)，所以在事件處理執行時，this 指向 HTML 元素并將 color 改動。
------------ window --------------------------------------| || || || ---------------- || | HTML element | <-- this ----------------- || ---------------- | | doSomething() | || | | ----------------- || ----------------------- | || |copy of doSomething()| <-- copy function || ----------------------- || |----------------------------------------------------------
這可以讓我們為多個事件處理給它函數拷貝。每次 this 將指向正確的 HTML 元素：
------------ window --------------------------------------| || || || ---------------- || | HTML element | <-- this ----------------- || ---------------- | | doSomething() | || | | ----------------- || ----------------------- | || |copy of doSomething()| <-- copy function || ----------------------- | || | || ----------------------- | || | another HTML element| <-- this | || ----------------------- | | || | | | || ----------------------- | || |copy of doSomething()| <-- copy function || ----------------------- || |----------------------------------------------------------
每次函數被調用，this 指向當前所處理的事件的那個 HTML 元素(“自己本身” doSomething() 的拷貝)。
指向(referring)
要是用 行內事件注冊呢？
<element onclick="doSomething()">
這里沒有拷貝函數，而是指向它，有什么不一樣呢？ 這個 onclick 屬性沒有包含實際函數，而只是一個函數調用。
doSomething();
上面的意思是：“到 doSomething() 那里去執行它”。在doSomething()里面，this 關鍵字再次指向全局 window 對象，那么函數會返回錯誤的消息。
------------ window --------------------------------------| / / || | || this || ---------------- | || | HTML element | <-- this ----------------- || ---------------- | | doSomething() | || | | ----------------- || ----------------------- / / || | go to doSomething() | | || | and execute it | ---- reference to || ----------------------- function || |----------------------------------------------------------
不一樣？
如果是用 this 去訪問 HTML 元素來處理事件的話，那么必須肯定它實際是寫入了 onclick 屬性中。而它指向 HTML 元素的事件處理就算已注冊。如果這么做：
element.onclick = doSomething;alert(element.onclick)
得到的是
function doSomething(){ this.style.color = '#cc0000';}可以看到，this 關鍵字在 onclick 方法中。它指向 HTML 元素。
但是如果這么做：
<element onclick="doSomething()">alert(element.onclick)
得到的是
function onclick(){ doSomething()}這里只是指向函數 doSomething()。this 關鍵字不在 onclick 方法中。它沒有指向 HTML 元素。
例子-拷貝
在下面示例中，this 寫入 onclick 方法中：
element.onclick = function () {doSomething()}element.attachEvent('onclick',doSomething)<element onclick="doSomething()">例子-指向
在下面示例中，this 指向 window：
element.onclick = function () {doSomething()}element.attachEvent('onclick',doSomething)<element onclick="doSomething()">要注意上面的 attachEvent。它的缺點是微軟事件注冊模型，它創建了指向該函數，而且沒有拷貝它。所以有時不可能弄清楚 HTML 當前的處理事件是哪個。
結合
使用行內事件注冊時，也可以把 this 發送到函數。所以可以這么用：
<element onclick="doSomething(this)"> function doSomething(obj) { // this is present in the event handler and is sent to the function // obj now refers to the HTML element, so we can do obj.style.color = '#cc0000';} JavaScript技術：PPK 談 JavaScript 的 this 關鍵字 [翻譯]，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
