The this keyword for JavaScript
原文：http://www.quirksmode.org/js/this.html
翻译：小小子
说明：本人翻译此文章只为自己学习，如果有翻译错的地方请不吝指出。谢谢 ^_^!!!
关键字 this 是 JavaScript最常用的关键字之一。遗憾的是，如果你不知道它的工作原理，那么你很难驾驭它。
下面我将介绍，在事件处理过程中如何使用它(this)。稍候我会增加一些this的其他使用方法的示例。
Owner
下面我们将要讨论的是：在 doSomething() 中 this 到底指的是什么？
this.style.color = '#cc0000';
}
在JavaScript 中，this关键字指的都是正在执行的函数的真正 owner(所有者)，或者说，是拥有这个方法的对象(函数作为对象的属性时被称为该对象的方法)。当我们定义 dosomething() 这个函数时，该函数的所有者是这个页面，准确的说是JavaScript中的window object(or global object)。一个 onclick 属性，属于包含该属性的确切的 HTML 元素(HTML Element)。
js this keyword
这种所有权是 JavaScript 对象导向方法的结果。在Objects as associative arrays 你可以看到更多的资料。
如果我们直接调用 doSomething() 方法，那么this关键字指向的就是window，此函数将会试图去改变window对象的style.color 属性。而 window 对象并没有 style.color 属性，所以该函数并未得到理想的效果，同时会产生一个JavaScript 错误。
Copying
如果我们在函数中使用了this，那么我们必须小心的使用真正拥有那个函数的 html element。换句话说，我们必须 Copy 函数的内容到 onclick 属性上去。传统的事件注册照顾它(take care of)
该函数被完整的得到到 html element的 onclick 属性上去，目前该函数已经成为一个“方法”。所以，一旦事件句柄被执行，那么该 html 元素的”color”样式会被改变为 #cc0000。
js this keyword2
我们可以复制函数到多个html element的事件中去以实现我们的目的(改变相应元素的color)。无论何时， this 都被将被指向到正确的 html 元素上面：
js this keyword3
这样，我们最大范围(最充分)的使用了 this ，每次函数被调用的时候，this都被指向到事件绑定的html 元素上面，而这个 html elment现在拥有 doSomething()这个函数的拷贝。
Referring
然而，如果你使用行内事件注册方式：
你其实并没有拷贝这个函数，这种实现的方式是“引用”，而二者是明显不同的。 这种方式的 onclick 属性不包含实际的功能，而仅仅是一个函数的调用。
其(onclick属性)字面意义是，找到doSomething()函数，并且执行这个函数。当我们找到这个doSomething()函数的时候，这里的this关键字仍然被指向到window对象，同时这种调用方式也会返回一个JavaScript错误。
js this keyword4
The difference
如果你想让this关键字指向到正在处理事件的 html element上的话，你必须保证 this 关键字是写到了 html 元素的 onclick 属性上。只有这样，this 关键字才能指向到事件注册的那个 html 元素上。所以，如果你这样测试:
alert(element.onclick);
其得到的结果为：
this.style.color = '#cc0000';
}
和你看到的一样，this 关键字出现在 html 元素的 onclick 属性上。所以其指向真正的注册了事件的html 元素。
但是如果您这样测试：
alert(element.onclick)
其得到的结果为：
doSomething()
}
这只是对doSomething()函数的一个引用。this 关键字并没有绑定到onclick属性上，所以其也就没有指向到注册了该事件的 html element。
Examples – copying
this关键字被写在 onclick 属性中的示例：
element.addEventListener('click',doSomething,false);
element.onclick = function () {this.style.color = '#cc0000';}
<element onclick="this.style.color = '#cc0000';">
小小子注：addEventListener()的第三个参数是告诉浏览器对于事件处理的方式——捕获，或冒泡，一般采用冒泡(false)方式。
Examples – referring
在下面的例子中,this关键字被指向到了window：
element.attachEvent('onclick',doSomething)
<element onclick="doSomething()">
这里要注意attachEvent()方法，其是微软支持的方法(only for IE)，其注册事件的缺点是仅仅创建了一个函数引用，而并不拷贝函数。
Therefore it is sometimes impossible to know which HTML currently handles the event.(这句翻译的不是很顺畅，总之就是避免使用它^_^)
Combination
在使用行内事件注册的方式时，你也可以把this关键字当做参数传给函数，以便让函数获得当前绑定事件的html 元素，就像这样：
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';
}
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2010/02/01/1697/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
汗。。。我前几天看书刚看了这个
[回复]
JavaScript不懂~~纯支持！
[回复]
@bolo
呵，感觉蛮经典的一篇文章。就记录了一下。
[回复]
@Jutoy
呵呵，谢谢。感谢纯支持。 :razz:
[回复]
IE 下面的 onclick=”fn()” 好像还会自动完成一下异常、错误处理，onclick 中的this问题并没有给我提示错误，于是我在fn中加入一个throw “aaa”，结果也被它给消化掉了。所以这种方法，要是出了问题还真不好找。
[回复]
@andi
这个我倒没有注意过。不过this关键字是JavaScript面向对象的基础。需要好好掌握。
JavaScript 博大精深啊。。
[回复]
我认为用在哪里这个this就指的是哪里，基本没用过这个关键字
[回复]
@要饭的
我以前用这个(this)也不多。呵 :razz:
[回复]
最近在学JavaScript基础，特地跑过来看JavaScript专辑
[回复]
@alswl
我发现你今天很兴奋。。呵呵。。 :o
[回复]