有关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:无响应
 
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
通过本次实例,可以得到以下结论:
1.方法中的this指代方法的调用者。详见btn2,btn3。
2.事件处理方法中的this指代事件的直接触发者。详见btn3,btn4。
3.事件的绑定最好以脚本的形式声明,若采用JQuery,则还要声明在$(document).Ready的处理方法中,若事件的绑定以DOM元素的Attribute形式声明,
  则事件处理方法中的this无法关联到事件的触发者,而是关联的window对象。但是若果事件处理方法是临时声明的则除外。详见btn1,btn4,btn6,btn7,btn8。
 

以上完全是结合实验结果得出的体会,有理解不对的地方,还请大家指教。
 
 

你可能感兴趣的:(JavaScript)