首页 > JS&HTML > The this keyword for JavaScript

The this keyword for JavaScript

原文:http://www.quirksmode.org/js/this.html

翻译:小小子

说明:本人翻译此文章只为自己学习,如果有翻译错的地方请不吝指出。谢谢 ^_^!!!

关键字 this 是 JavaScript最常用的关键字之一。遗憾的是,如果你不知道它的工作原理,那么你很难驾驭它。

下面我将介绍,在事件处理过程中如何使用它(this)。稍候我会增加一些this的其他使用方法的示例。

Owner

下面我们将要讨论的是:在 doSomething() 中 this 到底指的是什么?

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

在JavaScript 中,this关键字指的都是正在执行的函数的真正 owner(所有者),或者说,是拥有这个方法的对象(函数作为对象的属性时被称为该对象的方法)。当我们定义 dosomething() 这个函数时,该函数的所有者是这个页面,准确的说是JavaScript中的window object(or global object)。一个 onclick 属性,属于包含该属性的确切的 HTML 元素(HTML Element)。

js this keyword

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)

element.onclick = doSomething;

该函数被完整的得到到 html element的 onclick 属性上去,目前该函数已经成为一个“方法”。所以,一旦事件句柄被执行,那么该 html 元素的”color”样式会被改变为 #cc0000。

js this keyword2

js this keyword2

我们可以复制函数到多个html element的事件中去以实现我们的目的(改变相应元素的color)。无论何时, this 都被将被指向到正确的 html 元素上面:

js this keyword3

js this keyword3

这样,我们最大范围(最充分)的使用了 this ,每次函数被调用的时候,this都被指向到事件绑定的html 元素上面,而这个 html elment现在拥有 doSomething()这个函数的拷贝。

Referring

然而,如果你使用行内事件注册方式:

<element onclick="doSomething()">

你其实并没有拷贝这个函数,这种实现的方式是“引用”,而二者是明显不同的。 这种方式的 onclick 属性不包含实际的功能,而仅仅是一个函数的调用。

doSomething();

其(onclick属性)字面意义是,找到doSomething()函数,并且执行这个函数。当我们找到这个doSomething()函数的时候,这里的this关键字仍然被指向到window对象,同时这种调用方式也会返回一个JavaScript错误。

js this keyword4

js this keyword4

The difference

如果你想让this关键字指向到正在处理事件的 html element上的话,你必须保证 this 关键字是写到了 html 元素的 onclick 属性上。只有这样,this 关键字才能指向到事件注册的那个 html 元素上。所以,如果你这样测试:

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

其得到的结果为:

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

和你看到的一样,this 关键字出现在 html 元素的 onclick 属性上。所以其指向真正的注册了事件的html 元素。

但是如果您这样测试:

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

其得到的结果为:

function onclick() {
 doSomething()
}

这只是对doSomething()函数的一个引用。this 关键字并没有绑定到onclick属性上,所以其也就没有指向到注册了该事件的 html element。

Examples – copying

this关键字被写在 onclick 属性中的示例:

element.onclick = doSomething;
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.onclick = function () {doSomething()}
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 元素,就像这样:

<element onclick="doSomething(this)">
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';
}
  1. bolo 二 1st, 2010 @ 18:53 | #1

    汗。。。我前几天看书刚看了这个

  2. Jutoy 二 2nd, 2010 @ 04:29 | #2

    JavaScript不懂~~纯支持!

  3. simaopig 二 2nd, 2010 @ 10:02 | #3

    @bolo
    呵,感觉蛮经典的一篇文章。就记录了一下。 :oops:

  4. simaopig 二 2nd, 2010 @ 10:02 | #4

    @Jutoy
    呵呵,谢谢。感谢纯支持。 :razz:

  5. andi 二 2nd, 2010 @ 14:23 | #5

    IE 下面的 onclick=”fn()” 好像还会自动完成一下异常、错误处理,onclick 中的this问题并没有给我提示错误,于是我在fn中加入一个throw “aaa”,结果也被它给消化掉了。所以这种方法,要是出了问题还真不好找。

  6. simaopig 二 2nd, 2010 @ 14:26 | #6

    @andi
    这个我倒没有注意过。不过this关键字是JavaScript面向对象的基础。需要好好掌握。

    JavaScript 博大精深啊。。

  7. 要饭的 二 2nd, 2010 @ 15:54 | #7

    我认为用在哪里这个this就指的是哪里,基本没用过这个关键字 :arrow:

  8. simaopig 二 2nd, 2010 @ 16:07 | #8

    @要饭的
    我以前用这个(this)也不多。呵 :razz:

  9. alswl 二 8th, 2010 @ 08:47 | #9

    最近在学JavaScript基础,特地跑过来看JavaScript专辑

  10. simaopig 二 8th, 2010 @ 09:54 | #10

    @alswl
    我发现你今天很兴奋。。呵呵。。 :o

评论提交中, 请稍候...

留言

可以使用的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackbacks & Pingbacks ( 0 )
  1. 还没有 trackbacks