您所在的位置:小祥子 » 编程 » JavaScript » 正文

The this keyword(翻译)

时间:2015-04-28 编辑:Stoneworld 来源:本站整理

The this keyword

One of the most powerful JavaScript keywords is this. Unfortunately it is hard to use if you don't exactly know how it works.

在 JavaScript 中 this 是最强大的关键字之一。但不幸得是如果你不能确切的知道其工作原理的话很难去很好的使用它。

下面我将解释在事件处理中的用法,随后再讲讲this其它方面的用法.

Owner 所有者

The question that we'll discuss for the remainder of the page is: What does this refer to in the function doSomething()?

接下来我们将讨论的是 下面函数 doSomething()这个函数究竟指向了什么?

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

In JavaScript this always refers to the “owner” of the function we're executing, or rather, to the object that a function is a method of. When we define our faithful function doSomething() in a page, its owner is the page, or rather, the window object (or global object) of JavaScript. An onclick property, though, is owned by the HTML element it belongs to.

在javascript中This总是指向执行这个函数的“所有者”,更确切的说是指向包含这个函数方法的对象,当我们在页面中定义函数 doSomething()的时候,其所有者就是这个页面本身,更确切的说是windows对象或者说是global全局对象,而onclick属性则是属于HTML元素对象所有。

This "ownership" is the result of JavaScript's object oriented approach. See the Objects as associative arrays page for some more information.

这种归属关系是javascript面向对象的特性导致的,更多信息见http://www.quirksmode.org/JS/associative.html

If we execute doSomething() without any more preparation the this keyword refers to the window and the function tries to change the style.color of the window. Since the window doesn't have a style object the function fails miserably and produces JavaScript errors.

如果我们直接执行函数doSomething(),那么关键字this将指向window,进而改变的是windowstyle.color,然而window并没有style这个对象,所以该函数直接运行将引发一个错误。

Copying

So if we want to use this to its full extent we have to take care that the function that uses it is "owned" by the correct HTML element. In other words, we have to copy the function to our onclick property. Traditional event registration takes care of it.

因此如果我们想完整的使用this我们不得不关注这个函数的使用者归属于那个HTML元素,换句话说就是我们copy了一个函数指向了我们的onclick属性,更多请阅读http://www.quirksmode.org/js/events_tradmod.html

element.onclick = doSomething;

The function is copied in its entirety to the onclick property (which now becomes a method). So if the event handler is executed this refers to the HTML element and its color is changed.

在此 将整个函数复制了一份,赋值给了onclick属性(在此变成了方法),因此 在事件处理执行的过程中,this指向了HTML元素并改变了颜色,

The trick is of course that we can copy the function to several event handlers. Each time this will refer to the correct HTML element:

通过这种做法,我们可以复制函数给多个事件处理,每一次this将指向正确的HTML元素,

Thus you use this to the fullest extent. Each time the function is called, this refers to the HTML element that is currently handling the event, the HTML element that "owns" the copy of doSomething().

像这样你可以更好的使用this,每次函数被调用,this指向当前处理的事件的HTML元素。

Referring

However, if you use inline event registration

然而 我们如果使用内联事件注册呢。

<element onclick="doSomething()">

you do not copy the function! Instead, you refer to it, and the difference is crucial. The onclick property does not contain the actual function, but merely a function call:

这里没有拷贝函数,而是指向它,有什么不一样呢? 这个 onclick 属性没有包含实际函数,而只是一个函数调用。

doSomething();

So it says “Go to doSomething() and execute it.” When we arrive at doSomething() the this keyword once again refers to the global window object and the function returns error messages.

意思是说:“到 doSomething() 那里去执行它”。doSomething()一旦执行,this 关键字再次指向全局 window 对象,那么函数会返回错误的消息。

The difference

If you want to use this for accessing the HTML element that is handling the event, you must make sure that the this keyword is actually written into the onclick property. Only in that case does it refer to the HTML element the event handler is registered to. So if you do

如果你想使用this关键字 访问 这个HTML元素来处理事件的话,那么你必须确保this关键字确切的写入了onclick属性中,只有在这种情况下 指向了HTML元素的事件处理 才能被注册,如果这么做

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

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

As you can see, the this keyword is present in the onclick method. Therefore it refers to the HTML element.

But if you do

可以看到,this 关键字在 onclick 方法中。它指向 HTML 元素。 但是你如果这么做:

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

you get
function onclick(){
doSomething()
}

This is merely a reference to function doSomething(). The this keyword is not present in the onclick method so it doesn't refer to the HTML element.

这里只是指向函数 doSomething()。this 关键字不在 onclick 方法中。它没有指向 HTML 元素。

Examples - copying

this is written into the onclick method in the following cases:

在下面示例中,this 写入 onclick 方法中:

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

Examples - referring

In the following cases this refers to the window:

在下面示例中,this 指向 window:

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

Note the presence of attachEvent(). The main drawback of the Microsoft event registration model is that attachEvent() creates a reference to the function and does not copy it. Therefore it is sometimes impossible to know which HTML currently handles the event.

Combination

When using inline event registration you can also send this to the function so that you can still use it:

使用内联事件注册时,也可以把 this 发送给函数。所以可以这么用:

<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';
}

博客园的markdown有待改进。。

关键词:or