JavaScript 中this关键字的一点解释

本文深入探讨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]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值