原文:JavaScript - The this keyword
在 JavaScript 中 this 是最强的关键字之一。这篇贴文就是要告诉你如何用好 this。
下面先讲如何在event handling (事件处理)中用它,再接着是讲 this 的其他用法。
所有者(Owner)
先来看看函数 doSomething() 里的 this 究竟指向(refer to)了什么?
function doSomething() {
this.style.color = '#cc0000';
}
JavaScript的 this 总是指向正执行的函数的所有者。或者是说,它是指向函数这个对象的一种手法。
在页面中定义了 doSomething() 函数时,它的所有者是页面。确切的说是指 JavaScript 的 window 对象(全局对象)。
而 onclick 属性归属 HTML 元素所有。
这种归属谁所有的权利是 JavaScript 的 OO(面向对象)特性的结果。在 把对象作关联数组 页面中有更多信息。
------------ window --------------------------------------
| / / |
| | |
| this |
| ---------------- | |
| | HTML 元素 | <-- this ----------------- |
| ---------------- | | doSomething() | |
| | | ----------------- |
| -------------------- |
| | onclick 属性 | |
| -------------------- |
| |
----------------------------------------------------------
这里在 doSomething() 执行时,关键字 this 指向 window(窗口) ,该函数将会改动 window 的 style.color。
而 window 没有 style 这个对象,所以该函数会引发 JavaScript 的错误。
拷贝(copying)
因此,想要用好 this 就请继续往下看。像前面的例子在函数中使用的这种情况,this 指向它归属谁所有的那个 HTML 元素。
也就是说,有个函数拷贝指向 onclick 属性。 我们来看看在传统事件注册 中的情况。
element.onclick = doSomething;
函数是它整个的拷贝,指向 onclick 属性(现在变成了方法)。因此,事件处理被执行时,this 指向 HTML 元素并将改动 color。
------------ window --------------------------------------
| |
| |
| |
| ---------------- |
| | HTML 元素 | <-- this ----------------- |
| ---------------- | | doSomething() | |
| | | ----------------- |
| ----------------------- | |
| | doSomething() 的拷贝| <-- 拷贝函数 |
| ----------------------- |
| |
----------------------------------------------------------
这样我们可以拷贝函数给多个事件处理。每次 this 将指向正确的 HTML 元素:
------------ window --------------------------------------
| |
| |
| |
| ---------------- |
| | HTML 元素 | <-- this ----------------- |
| ---------------- | | doSomething() | |
| | | ----------------- |
| ----------------------- | |
| | doSomething() 的拷贝| <-- 拷贝函数 |
| ----------------------- | |
| | |
| ----------------------- | |
| | 另一个 HTML 元素 | <-- this | |
| ----------------------- | | |
| | | | |
| ----------------------- | |
| | doSomething() 的拷贝| <-- 拷贝函数 |
| ----------------------- |
| |
----------------------------------------------------------
每次函数被调用,this 指向当前所处理的事件的那个 HTML 元素( doSomething() 的拷贝“所有”)。
指向(referring)
要是用 行内事件注册 呢?
<element οnclick="doSomething()">
这里没有拷贝函数,而是指向它,有什么不一样呢? 这个 onclick 属性没有包含实际函数,而只是一个函数调用。
doSomething();
上面的意思是:“到 doSomething() 那里去执行它”。在doSomething()里面,this 关键字再次指向全局 window 对象,
那么函数会返回错误的消息。
------------ window --------------------------------------
| / / |
| | |
| this |
| ---------------- | |
| | HTML 元素 | <-- this ----------------- |
| ---------------- | | doSomething() | |
| | | ----------------- |
| ----------------------- / / |
| | 到 doSomething() 那 | | |
| | 里去执行它 | ---- 指向 |
| ----------------------- 函数 |
| |
----------------------------------------------------------
不一样?
如果是用 this 去访问 HTML 元素来处理事件的话,那么必须肯定它实际是写入了 onclick 属性中。
就算它指向 HTML 元素的事件处理是已注册。如果这么做:
element.onclick = doSomething;
alert(element.onclick)
得到的是
function doSomething()
{
this.style.color = '#cc0000';
}
可以看到,this 关键字在 onclick 方法中。它指向 HTML 元素。
但是如果这么做:
<element οnclick="doSomething()">
alert(element.onclick)
得到的是
function onclick()
{
doSomething()
}
这里只是指向函数 doSomething()。this 关键字不在 onclick 方法中。它没有指向 HTML 元素。
例子-拷贝
在下面示例中,this 写入 onclick 方法中:
element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)
<element οnclick="doSomething()">
例子-指向
在下面示例中,this 指向 window:
element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)
<element οnclick="doSomething()">
要注意上面的 attachEvent。它的缺点是微软事件注册模型 ,它创建了到该函数的指向,而且没有拷贝它。
所以有时不可能弄清楚 HTML 当前的处理事件是哪个。
结合
使用行内事件注册时,也可以把 this 发送给函数。所以可以这么用:
<element οnclick="doSomething(this)">
function doSomething(obj) {
// 在事件处理中把它发送给函数
// obj 指向 HTML 元素,所以可以这么做
obj.style.color = '#cc0000';
}