JavaScript 中this关键字的一点解释

最新推荐文章于 2021-07-04 20:59:01 发布

iteye_7092

最新推荐文章于 2021-07-04 20:59:01 发布

阅读量138

点赞数

分类专栏： JavaScript 文章标签： JavaScript IE Firefox 浏览器 Blog ViewUI

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

本文深入探讨JavaScript中this关键字的使用场景及其背后原理，包括不同事件触发方式对this的影响及如何正确处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在早先的一篇blog中说event的时候有些关于方法中this使用的问题讨论，这里整理单独出来。
---------首先解释一下，这里说明的this的用法主要涉及到方法的调用问题。
1、this代表了什么?
[code]function doSomething() {
this.style.color = '#cc0000';
}[/code]
这个方法中this代表了什么呢？它试图改变谁的样式呢？
[color=green]可以很不负责任的告诉你谁调用了它就代表谁![/color]
以一段代码说明如下:
[code]<html>
<head><title></title>
<script language="javascript" type="text/javascript">
function doSomething() {
this.style.color = '#cc0000';
}
doSomething();
</script>
</head>
<body>
<div id="clickme" onclick="doSomething()"></div>
</body>
</html>[/code]

上面的代码中定义了doSomething方法，并且调用了2次，一次直接调用，另外一次使用onclick事件触发，可惜很不幸，浏览器总是说this.style has no properties!这是为什么呢，这里的关键就是我们并没有明确的给定this所代表的对象[或者说我们明确的把this分配给了一个我们不清楚的对象],在这种情况下this所代表的就是window对象。如果我们非要把doSomething中的this分配给ID为clickme的div的话，则需要做的就是把doSomething复制给传统的事件onchick，处理方法为[code]document.getElementById("clickme").onclick = doSomething;[/code]
修改后的代码为:
[code]<html>
<head><title></title>
<script language="javascript" type="text/javascript">
function doSomething() {
this.style.color = '#cc0000';
}
</script>
</head>
<body>
<div id="clickme">123</div>
<script language="javascript" type="text/javascript">
document.getElementById("clickme").onclick = doSomething;
</script>
</body>
</html>[/code]
这里唯一要注意的一点就是[color=red]document.getElementById("clickme").onclick = doSomething;[/color]的位置要出现在<div id="clickme">之后！为什么就不解释了哈

下面简单解释一下一个元素触发事件的差别，如上面的两中形式:
1:
<div id="clickme" onclick="doSomething()">这个据说叫[color=green]inline event registration[/color]
2:
element.onclick = doSomething;
方式一只是做了一个引用，并没有做复制方法的处理，而2则不同，引用并做了复制方法的处理，所以方式1只是简单的call doSomething。我们可以使用如下的方式来用一种看得件的方式理解这个问题;
使用方法一:<div id="clickme" onclick="doSomething()">
我们alert(document.getElementById("clickme").onclick);我们得到的代码为:
[code]
//这里只给出firefox下的形式，至于IE那个烂东东，就先不管了……
function onclick(event){
doSomething(); //firefox下，IE下应该是个匿名函数anonymous(){...}
}[/code]
而使用方法二我们得到的却是doSomething的定义:
[code]function doSomething(){
this.style.color ="#cc0000";
}[/code]

需要注意的一些问题是:
如下的使用都只是做了引用的:
[code]element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)
<element onclick="doSomething()">[/code]
而下面的这些则做了复制:
[code]element.onclick = doSomething
element.addEventListener('click',doSomething,false)
element.onclick = function () {this.style.color = '#cc0000';}
<element onclick="this.style.color = '#cc0000';">[/code]

一个简单的避免this出错的方法就是传递并使用它，修改方法doSomething的定义为:
[code]function doSomething(o){
o.style.color="#cc0000";
}
//然后
<div onclick="doSomething(this)">[/code]