"this" of JavaScript你理解有多少？

Posted on 2006-11-27 16:48 Jaunt 阅读(234) 评论(0)  编辑  收藏 所属分类: JavaScript
译者：Flyingis
编辑：Jaunt
原载：http://www.blogjava.net/flyingis/archive/2006/09/15/69888.html

this是JavaScript中功能最强大的关键字之一。

Owner

接下来文章中我们将要讨论的问题是：在函数doSomething()中this所指的是什么？

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

在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是，指向该函数所属的对象。当我们在页面中定义了函数doSomething()的时候，或者是JavaScript中的window对象（或global对象）。对于一个onclick属性，它为它所属的HTML元素所拥有，this应该指向该HTML元素。

这种“所有权”就是JavaScript中面向对象的一种方式。 

this1.gif

如果我们在没有任何更多准备情况下执行doSomething()，this关键字会指向window，并且该函数试图改变window的 style.color。因为window并没有style对象，这个函数将非常不幸的运行失败，并产生JavaScript错误。

 Copying
  
因此如果我们想充分利用this，我们不得不注意使用this的函数应该被正确的HTML元素所拥有。换句话说，我们应该复制这个函数到我们的onclick属性。

element.onclick  =  doSomething;

这个函数被完整复制到onclick属性（现在成为了函数）。因此如果这个event handler被执行，this将指向HTML元素，并且该元素的颜色得以改变。

this2.gif

这种方法使得我们能够复制这个函数到多个event handler。每次this都将指向正确的HTML元素：

this3.gif


这样你就可以最大限度使用this。每当执行该函数，this所指向的HTML元素都正确响应事件，这些HTML元素拥有doSomething()的一个拷贝。

Referring

然而，如果你使用inline event registration(内联事件注册)

<element onclick="doSomething()">

你将不能拷贝该函数！反而这种差异是非常关键的。onclick属性并不包含实际的函数，仅仅是一个函数调用。

doSomething();

因此，它将声明“转到doSomething()并且执行它”。当我们到达doSomething()，this关键字又重新指向了全局的window对象，函数返回错误信息。

this4.gif

The difference

如果你想使用this来指向HTML元素响应的事件，你必须确保this关键字被写在onclick属性里。只有在这种情况下它才指向event handler所注册的HTML元素。
 
element.onclick = doSomething;
alert(element.onclick)

你将得到

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

正如你所见，this关键字被展现在onclick函数中，因此它指向HTML元素。
但是如果执行

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

你将得到

function onclick() {
  doSomething()
}

这仅仅是到doSomething()函数的一个引用。this关键字并没有出现在onclick函数中，因此它不指向HTML元素。

只有注册用户登录后才能发表评论。
网站导航: