Javascript this 关键字

Javascript 的 this 关键字总是指向当前被执行函数的所有者。

换句话说，如果当前函数可以视为某个对象的一个方法，那么 this 就指向该对象。

例如有这么一个函数 doSomething()：

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

如果 doSomething() 定义全局上下文中，那么 this 指向的就是全局变量 window。但是 window 没有 style 属性，所以在全局环境中执行该函数将提示错误。因此使用 this 关键字需要特别注意函数的所有者。

复制

在 JS 的事件处理中，我们要实现 this 关键字正确指向某个页面元素，则必须将函数复制该元素的某个属性上，例如 onclick 属性。

element.onclick = doSomething;

以上代码演示了函数被完整地复制到了 onclick 属性，因此当执行 doSomething 函数时，对应的 element 元素的颜色将发生改变。

引用

当你使用内联事件注册时。

<element onclick="doSomething()">

你没有复制函数，你只是引用了该函数，它们之间的区别十分重要，因为 onclick 属性没有包含任何真正的函数代码，而仅仅是一次函数调用。

它的意思是跳转到 doSomething() 函数并执行它，因此当代码执行到 doSomething() 时，this 其实是指向 window 这个全局对象。

区别

如果你想在事件处理中正确使用 this 访问 HTML 元素，你必须保证 this 关键字真正写入到了 onclick 属性。如果 this 关键字正确写入到了 onclick 属性，那么你输入：

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 元素。

示例 - 复制

以下情况中，this 都被写入到 onclick 方法中：

element.onclick = doSomething
element.addEventListenser('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()">

混合

如果想在内联事件注册中使用 this，可以按以下方法实现：

<element onclick="doSomething(this)">

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

Ref:

• The this keyword
• Understand Javascripts this with clarity and master it