关于javascript中的this关键字

this是非常强大的一个关键字，但是如果你不了解它，可能很难正确的使用它。

下面我解释一下如果在事件处理中使用this。

首先我们讨论一下下面这个函数中的this关联到什么。   

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

所有权(Owner)

在javascript中，this总是关联到执行函数的对象或者包含这个函数的对象。当我们在页面上定义了一个函数doSomething(), 它的owner是页面，也就是window对象。

对于一个onclick属性，它的owner是onclick所在的html元素。

这种"所有权"的关系是由javascript的面向对象方法决定的。

------------ window --------------------------------------
|                                          / \           |
|                                           |            |
|                                          this          |
|   ----------------                        |            |
|   | HTML element | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          --------------------                          |
|          | onclick property |                          |
|          --------------------                          |
|                                                        |
----------------------------------------------------------

如果我们直接执行doSomeThing()函数，这个this关联到window， window没有stype对象，所以会报错。


拷贝

我们在使用this时一定要小心它所关联的html元素，我们需要拷贝函数到我们的onclick属性。

element.onclick = doSomething();

这个函数现在被拷贝到onclick属性(这个属性现在变成了一个方法).现在如果onclick事件被执行，this关联到这个html元素，它的color会被改变。

------------ window --------------------------------------
|                                                        |
|                                                        |
|                                                        |
|   ----------------                                     |
|   | HTML element | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------          |            |
|          |copy of doSomething()|  <-- copy function    |
|          -----------------------                       |
|                                                        |
----------------------------------------------------------

我们可以拷贝函数到很多个事件属性，每个this都能正确的关联到正确的html元素

------------ window --------------------------------------
|                                                        |
|                                                        |
|                                                        |
|   ----------------                                     |
|   | HTML element | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------          |            |
|          |copy of doSomething()|  <-- copy function    |
|          -----------------------          |            |
|                                           |            |
|   -----------------------                 |            |
|   | another HTML element| <-- this        |            |
|   -----------------------     |           |            |
|               |               |           |            |
|          -----------------------          |            |
|          |copy of doSomething()|  <-- copy function    |
|          -----------------------                       |
|                                                        |
----------------------------------------------------------

每一个html元素拥有doSomething()函数的拷贝。

然而，如果你使用内链的事件注册

<element οnclick="doSomething()">

这样不会拷贝函数，onclick属性没有包含真正的函数，而只是引用一个函数doSomeThing();
此时如果调用函数，this关联的仍然是window对象

------------ window --------------------------------------
|                                          / \           |
|                                           |            |
|                                          this          |
|   ----------------                        |            |
|   | HTML element | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------         / \           |
|          | go to doSomething() |          |            |
|          | and execute it      | ---- reference to     |
|          -----------------------       function        |
|                                                        |
----------------------------------------------------------

如果你想让this关联到html元素，你必需确保this真的写进了onclick属性。如果你执行下面的代码

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

你会得到结果：

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

正如你看到的，this出现在onclick方法里面，所以它属于html元素
但是如果你这样写

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

你会得到结果：

function onclick()
{
	doSomething()
}

这里仅仅引用到doSomeThing()函数，this没有出现在onclick方法中，它不属于这个html元素

例子

  下面的写法会保证this写进了onclick方法

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

 下面的写法this没有被写进onclick方法

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

 注意attachEvent没有拷贝，只是引用 

 当你使用内链的事件注册的时候，你也可以发送this到函数

 

<element οnclick="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';
}

翻译自：http://www.quirksmode.org/js/this.html

转载于:https://www.cnblogs.com/firejava/p/6092863.html