有关JavaScript中this关键字的一点探索
测试页面源码：
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
function foo(sender) {
alert(sender.id);
}
function foo() {
alert(this.id);
}
id = 'c';
$(document).ready(function() {
$('#btn3').click(function() {
alert(this.id);
var x = new Object();
x.id = "Hello world!";
x.foo = foo;
x.foo();
});
$('#btn2')[0].foo = foo;
document.getElementById('btn4').onclick = function() {
alert(this.id);
};
document.getElementById('btn5').onclick = function(sender) {
alert(sender.id);
};
//
$('#btn8').click = function() {
alert(this.id);
};
});
</script>
</head>
<body>
<input id="btn1" type="button" value="Click This 1" onclick="foo(this);" />
<input id="btn2" type="button" value="Click This 2" onclick="this.foo();" />
<input id="btn3" type="button" value="Click This 3" />
<input id="btn4" type="button" value="Click This 4" />
<input id="btn5" type="button" value="Click This 5" />
<input id="btn6" type="button" value="Click This 6" onclick="(function(){alert(this.id);})();" />
<input id="btn7" type="button" value="Click This 7" onclick="(function(sender){alert(sender.id);})(this);" />
<input id="btn8" type="button" value="Click This 8" />
</body>
</html>
运行结果
点击btn1：弹出c
点击btn2：弹出btn2
点击btn3：先弹出btn3，后弹出helloworld
点击btn4：弹出btn4
点击btn5：无响应
点击btn6：弹出c
点击btn7：btn7
点击btn8：无响应
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
function foo(sender) {
alert(sender.id);
}
function foo() {
alert(this.id);
}
id = 'c';
$(document).ready(function() {
$('#btn3').click(function() {
alert(this.id);
var x = new Object();
x.id = "Hello world!";
x.foo = foo;
x.foo();
});
$('#btn2')[0].foo = foo;
document.getElementById('btn4').onclick = function() {
alert(this.id);
};
document.getElementById('btn5').onclick = function(sender) {
alert(sender.id);
};
//
$('#btn8').click = function() {
alert(this.id);
};
});
</script>
</head>
<body>
<input id="btn1" type="button" value="Click This 1" onclick="foo(this);" />
<input id="btn2" type="button" value="Click This 2" onclick="this.foo();" />
<input id="btn3" type="button" value="Click This 3" />
<input id="btn4" type="button" value="Click This 4" />
<input id="btn5" type="button" value="Click This 5" />
<input id="btn6" type="button" value="Click This 6" onclick="(function(){alert(this.id);})();" />
<input id="btn7" type="button" value="Click This 7" onclick="(function(sender){alert(sender.id);})(this);" />
<input id="btn8" type="button" value="Click This 8" />
</body>
</html>
运行结果
点击btn1：弹出c
点击btn2：弹出btn2
点击btn3：先弹出btn3，后弹出helloworld
点击btn4：弹出btn4
点击btn5：无响应
点击btn6：弹出c
点击btn7：btn7
点击btn8：无响应
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
通过本次实例，可以得到以下结论：
1.方法中的this指代方法的调用者。详见btn2，btn3。
2.事件处理方法中的this指代事件的直接触发者。详见btn3，btn4。
3.事件的绑定最好以脚本的形式声明，若采用JQuery，则还要声明在$(document).Ready的处理方法中，若事件的绑定以DOM元素的Attribute形式声明，
则事件处理方法中的this无法关联到事件的触发者，而是关联的window对象。但是若果事件处理方法是临时声明的则除外。详见btn1,btn4,btn6,btn7,btn8。
通过本次实例，可以得到以下结论：
1.方法中的this指代方法的调用者。详见btn2，btn3。
2.事件处理方法中的this指代事件的直接触发者。详见btn3，btn4。
3.事件的绑定最好以脚本的形式声明，若采用JQuery，则还要声明在$(document).Ready的处理方法中，若事件的绑定以DOM元素的Attribute形式声明，
则事件处理方法中的this无法关联到事件的触发者，而是关联的window对象。但是若果事件处理方法是临时声明的则除外。详见btn1,btn4,btn6,btn7,btn8。
以上完全是结合实验结果得出的体会，有理解不对的地方，还请大家指教。
