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. }  
posted @ 2008-04-12 08:10  yangjun  阅读(600)  评论(0编辑  收藏  举报