自己本身

先來(lái)看看函數(shù) doSomething() 里的 this 到底是指向(refer to)了什么？

function doSomething() {
  this.style.color = '#cc0000';
}

JavaScript的 this 總指向所運(yùn)行的函數(shù)“自己本身”。也就是說(shuō)，它是一種指向函數(shù)對(duì)象的方法。在頁(yè)面中定義 doSomething() 函數(shù)，自己本身是指頁(yè)面。也就是說(shuō)，是指 JavaScript 的 window 對(duì)象(全局對(duì)象)。而 onclick 屬性它自己本身是屬 HTML 元素所有。

這個(gè)“所有權(quán)”是 JavaScript 的 OO(面向?qū)ο?特性的后果。在 把對(duì)象作關(guān)聯(lián)數(shù)組 頁(yè)面中有更多信息。

------------ window --------------------------------------
|                     / \      |
|                      |      |
|                     this     |
|  ----------------            |      |
|  | HTML element | <-- this     ----------------- |
|  ----------------   |      | doSomething() | |
|        |     |      ----------------- |
|     --------------------             |
|     | onclick property |             |
|     --------------------             |
|                            |
----------------------------------------------------------

如果 doSomething() 運(yùn)行時(shí)沒(méi)有任何與之預(yù)留相關(guān)的話，關(guān)鍵字 this 指向 window(窗口) ，該函數(shù)將會(huì)改動(dòng) window 的 style.color。而 window 沒(méi)有 style 這樣的對(duì)象，所以該函數(shù)會(huì)引發(fā) JavaScript 的錯(cuò)誤。

拷貝(copying)

因此，用好 this 有些難度。像在函數(shù)中使用的上面例子的這種情況，它應(yīng)該指向 HTML 元素“自己本身”。換個(gè)說(shuō)法是，有個(gè)函數(shù)拷貝指向 onclick 屬性。 我們來(lái)看看在傳統(tǒng)事件注冊(cè)中的情況。

element.onclick = doSomething;

因?yàn)楹瘮?shù)拷貝全指向了 onclick 屬性(現(xiàn)在變成了方法)，所以在事件處理執(zhí)行時(shí)，this 指向 HTML 元素并將 color 改動(dòng)。

------------ window --------------------------------------
|                            |
|                            |
|                            |
|  ----------------                   |
|  | HTML element | <-- this     ----------------- |
|  ----------------   |      | doSomething() | |
|        |     |      ----------------- |
|     -----------------------     |      |
|     |copy of doSomething()| <-- copy function  |
|     -----------------------            |
|                            |
----------------------------------------------------------

這可以讓我們?yōu)槎鄠€(gè)事件處理給它函數(shù)拷貝。每次 this 將指向正確的 HTML 元素：

------------ window --------------------------------------
|                            |
|                            |
|                            |
|  ----------------                   |
|  | HTML element | <-- this     ----------------- |
|  ----------------   |      | doSomething() | |
|        |     |      ----------------- |
|     -----------------------     |      |
|     |copy of doSomething()| <-- copy function  |
|     -----------------------     |      |
|                      |      |
|  -----------------------         |      |
|  | another HTML element| <-- this    |      |
|  -----------------------   |      |      |
|        |        |      |      |
|     -----------------------     |      |
|     |copy of doSomething()| <-- copy function  |
|     -----------------------            |
|                            |
----------------------------------------------------------

每次函數(shù)被調(diào)用，this 指向當(dāng)前所處理的事件的那個(gè) HTML 元素(“自己本身” doSomething() 的拷貝)。

指向(referring)

要是用 行內(nèi)事件注冊(cè)呢？

<element onclick="doSomething()">

這里沒(méi)有拷貝函數(shù)，而是指向它，有什么不一樣呢？ 這個(gè) onclick 屬性沒(méi)有包含實(shí)際函數(shù)，而只是一個(gè)函數(shù)調(diào)用。

doSomething();

上面的意思是：“到 doSomething() 那里去執(zhí)行它”。在doSomething()里面，this 關(guān)鍵字再次指向全局 window 對(duì)象，那么函數(shù)會(huì)返回錯(cuò)誤的消息。

------------ window --------------------------------------
|                     / \      |
|                      |      |
|                     this     |
|  ----------------            |      |
|  | HTML element | <-- this     ----------------- |
|  ----------------   |      | doSomething() | |
|        |     |      ----------------- |
|     -----------------------     / \      |
|     | go to doSomething() |     |      |
|     | and execute it   | ---- reference to   |
|     -----------------------    function    |
|                            |
----------------------------------------------------------

不一樣？

如果是用 this 去訪問(wèn) HTML 元素來(lái)處理事件的話，那么必須肯定它實(shí)際是寫入了 onclick 屬性中。而它指向 HTML 元素的事件處理就算已注冊(cè)。如果這么做：

element.onclick = doSomething;
alert(element.onclick)

得到的是

function doSomething()
{
	this.style.color = '#cc0000';
}

可以看到，this 關(guān)鍵字在 onclick 方法中。它指向 HTML 元素。

但是如果這么做：

<element onclick="doSomething()">
alert(element.onclick)

得到的是

function onclick()
{
	doSomething()
}

這里只是指向函數(shù) doSomething()。this 關(guān)鍵字不在 onclick 方法中。它沒(méi)有指向 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。它的缺點(diǎn)是微軟事件注冊(cè)模型，它創(chuàng)建了指向該函數(shù)，而且沒(méi)有拷貝它。所以有時(shí)不可能弄清楚 HTML 當(dāng)前的處理事件是哪個(gè)。

結(jié)合

使用行內(nèi)事件注冊(cè)時(shí)，也可以把 this 發(fā)送到函數(shù)。所以可以這么用：

<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';
}

最新評(píng)論