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';
}