JavaScript this 关键字

this 是 JavaScript 中很强大的关键字之一。但是不幸的是，如果你不能完全明白它的特征和用法的话，你可能会在使用的时候碰到很多问题。

本文从事件响应的列子开始，来试图说明this关键字的用法和一些知识。

Owner(宿主)

在余下的篇幅中，我们会一直围绕着一个函数来讨论，doSomething()，在这个方法中，this到底指向什么?

js 代码

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

在JavaScript中this是始终指向正在被执行的方法的“owner”(宿主)，或者是包含这个方法的对象本身。如果我们在某个页面中定义了一个doSomething()函数，那么这个方法的owner则是这个页面，即当前window对象或JavaScript的全局对象。举个例子来说：一个“onclick”属性是被包含于某个HTML元素中的，那这个属性的owner就是这个HTML元素。

ownership(存在关系)是JavaScript的面向对象模型的产物 。实际上对象都是以关联数组的形式来组织的。

js 代码

1. ------------ window --------------------------------------
2. | / \ |
3. | | |
4. | this |
5. | ---------------- | |
6. | | HTML element | <-- this ----------------- |
7. | ---------------- | | doSomething() | |
8. | | | ----------------- |
9. | -------------------- |
10. | | onclick property | |
11. | -------------------- |
12. | |
13. ----------------------------------------------------------

当我们不做任何准备直接执行doSomething()函数的话，此时this是指向window对象的，然后方法试图改变window对象的style.color，当然，此时window对象并不存在这样一个style对象，所以该函数执行失败，并抛出一个JavaScript错误。

Copying(拷贝)

如果我们想要这个函数正常工作的话，我们就要让这个函数被包含在正确的HTML对象中。

换句话来说，就是我们要把这个函数“拷贝”到onclick属性上。然后传统的事件注册模型会自动处理余下的工作。

js 代码

1. element.onclick = doSomething;

这段代码把整个doSomething()函数拷贝到了某个HTML元素的onclick属性上(然后这个函数变成了一个成员方法)这时再单击该HTML元素时，事件响应会自动调用onclick属性绑定的方法，此时this已经指向了该HTML对象，然后方法顺利执行，改变了element元素的原色。

js 代码

1. ------------ window --------------------------------------
2. | |
3. | |
4. | |
5. | ---------------- |
6. | | HTML element | <-- this ----------------- |
7. | ---------------- | | doSomething() | |
8. | | | ----------------- |
9. | ----------------------- | |
10. | |copy of doSomething()| <-- copy function |
11. | ----------------------- |
12. | |
13. ----------------------------------------------------------

我们可以把这个函数拷贝到很多个HTML对象的事件响应函数中。然后每次运行的时候this就会指向正确的HTML对象。

js 代码

1. ------------ window --------------------------------------
2. | |
3. | |
4. | |
5. | ---------------- |
6. | | HTML element | <-- this ----------------- |
7. | ---------------- | | doSomething() | |
8. | | | ----------------- |
9. | ----------------------- | |
10. | |copy of doSomething()| <-- copy function |
11. | ----------------------- | |
12. | | |
13. | ----------------------- | |
14. | | another HTML element| <-- this | |
15. | ----------------------- | | |
16. | | | | |
17. | ----------------------- | |
18. | |copy of doSomething()| <-- copy function |
19. | ----------------------- |
20. | |
21. ----------------------------------------------------------

做完所有拷贝后，当函数被执行时，this就被自动指向到正确的响应这个事件的HTML对象上了，此时该HTML对象就包含了doSomething()这个函数的拷贝。

Referring(引用)

你还可以使用inline(内联)的方式来绑定这个函数，即在HTML文档中对HTML元素制定onclick属性。

代码

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

记住，此时你并没有拷贝这个函数！你只是指向了这个函数，这个差异是很不容忽视的。这时onclick属性并没有包含这个方法，只是包含了对这个方法的一个调用。

代码

1. doSomething();

此时当元素被单击时，代码的动作是“找到doSomething()方法，然后执行”。然后当我们找到并执行doSomething()方法时，this又被指向到了全局window对象，函数就会产生错误。

js 代码

1. ------------ window --------------------------------------
2. | / \ |
3. | | |
4. | this |
5. | ---------------- | |
6. | | HTML element | <-- this ----------------- |
7. | ---------------- | | doSomething() | |
8. | | | ----------------- |
9. | ----------------------- / \ |
10. | | go to doSomething() | | |
11. | | and execute it | ---- reference to |
12. | ----------------------- function |
13. | |
14. ----------------------------------------------------------

The difference(区别)

如果你要在事件响应中用this来访问HTML元素的话，你就必须保证this关键字已经写入到了onclick属性中。只有这样才能让this正确的指向HTML对象。所以你执行以下代码时：

js 代码

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

你会得到

js 代码

1. function doSomething()
2. {
3. this.style.color = '#cc0000';
4. }

就像alert的结果所展示的，this关键字已经存在于onclick方法中了，于是它就指向到了该HTML元素。

如果这样做：

js 代码

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

你会得到

js 代码

1. function onclick()
2. {
3. doSomething()
4. }

这只是一个包含doSomething()函数的调用，this关键字并不存在于onclick方法中，当然也不会指向HTML对象。

示例 - copying

下列情形中，this已经被写入了onclick方法：

js 代码

1. element.onclick = doSomething
2. element.addEventListener('click',doSomething,false)
3. element.onclick = function () {this.style.color = '#cc0000';}
4. <element onclick="this.style.color = '#cc0000';">

示例 - referring

下列情形中，this指向的是window对象：

js 代码

1. element.onclick = function () {doSomething()}
2. element.attachEvent('onclick',doSomething)
3. <element onclick="doSomething()">

注意attachEvent()这个方法。微软事件注册模型的主要缺点是attachEvent()只是创建一个函数的引用，而并没有拷贝函数。因此，有些时候它是完全不知道目前的事件是绑定在哪个HTML对象的。

Combination(结合)

当你使用内联方式注册事件时，你可以指定this引用作为参数传递给响应方法。

代码

1. <element onclick="doSomething(this)">
2. function doSomething(obj) {
3. // this是存在于这个方法中的，只不过名字变成了obj
4. // obj此时就指向了正确的HTML对象，然后我们就可以继续操作了
5. obj.style.color = '#cc0000';
6. }