The this keyword

this 这个关键字在js世界里至关重要，但是如果你不真正了解它的机制是很难正确的使用的

原文

下面我们来看一个例子：

function doSomething() {
    this.style.color = ‘#cc0000‘;
}
doSomething();
<element onclick="doSomething()"></element>

我们接下来的所有篇幅围绕讨论这么一个问题：这里的this到底指代的是什么？

在JS的世界里，this 总是指的是该函数执行的时候，所拥有这个函数的"所有者”, 或者是一个对象（这个函数是这个对象里的一个方法）。

当我们在一个脚本里定义了这个函数 doSomething() 的时候，它的“所有者”就是当前的整个脚本。也就是整个页面，或者说是 window，全局对象，如上面，即使它是在哪个a标签里。

好了，现在我们来执行这个doSomething(), 没有任何特别处理， 那么 this 就指的是window对象并且这个函数就试图改变window对象的style.color。由于window对象里没有style.color对象，所以很不幸的它报错了。。。

如果我们想要this指对人，我们就得把它放到正确的“所有者”下面。换句话说，我们就得把这个函数“copy”到onclick的旗下—-用事件绑定

element.onclick = doSomething;

这么一来，doSomething 函数就完全被copy到onclick下面了，成为了其一个方法。所以当这个事件触发，this 就指向自己所在对象了，也就是该element，并且颜色就变化了。

我们可以把这个函数绑定到任意多个元素上。this则会指向自己所在的那个元素。

然而，如果你用我们最开始那个例子，行内绑定的话。那么就糟糕了，因为这样做，你并没有copy函数。onclick旗下并不包含实际的函数，只不过是一个函数调用而已:

doSomething();

这个就相当于说“喂，找到doSomething()并执行下它”。 当我们到了doSomething()里this 的时候，又一次的指向了全局window对象，然后接着就报错了。

当事件触发后，如果你想用this 来访问的是html element，那么你得确保 this 是实实在在的写入onclick成员。只有在这种情况下this才指的是html element事件所注册的。

所以，当你这样做：

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

你会得到：

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

如你所见，this 已经在onclick方法里了。因此 它指向的是HTML element。

但是如果你这样做：

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

你这次会得到：

function onclick()
{
    doSomething()
}

这仅仅是函数doSomething()的一个引用，onclick方法里不存在 this，所以 this 并不指的是html 元素

下面的这些都是写进onclick方法的例子：

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

而下面的这些都是this 指的是window对象：

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

当使用行内事件绑定的时候i，你也可以把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‘;
}

自己看还行，第一次翻译写出来，总觉得很蹩脚。不足之处大家多指点

《译》 JS里的this