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:

posted @ 2015-05-05 14:09  iFantasticMe  阅读(823)  评论(1编辑  收藏  举报