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