码迷,mamicode.com
首页 > Web开发 > 详细

js函数中this的不同含义

时间:2015-12-09 23:25:10      阅读:351      评论:0      收藏:0      [点我收藏+]

标签:

1、js函数调用过程中,js线程会进入新的执行环境并创建该环境的变量对象,初始化变量对象时会自动添加两个变量:this和arguments,因此可以在函数中使用这两个变量。需要注意的是,this变量不能重新赋值,而arguments可以,如下:

        function test() {
            var name = ‘test2‘;
            arguments = window;
            this = window; // 在这一行js运行会报错
        }

 

2、this取值于函数据以执行的函数对象

  2.1 当函数在全局作用域执行时,this引用的是全局(window);当函数在某一对象上执行时,this引用的是该对象自己;当函数在另一函数中调用时,this同样引用的是全局(window),如下:

        var name = ‘window‘;
        var obj = {
            name:‘obj‘,
            action:test
        }
        test();
        obj.action();
        test2();

        function test2() {
            var name = ‘test2‘;
            test();
        }

        function test() { 
            alert(this.name)
        }

以上代码响应依次为:window -> obj -> window

  2.2 事件响应中的this,分为二种情况:

    a、html事件定义,如:

      <div style="width:100px; border:solid;" id="btn" onclick="test()" >doSomething</div>

      该情况下,test中this为window

    b、js事件定义,如

    <div style="width:100px; border:solid;" id="btn" title="hello,boy" >doSomething</div>
    <script type="text/javascript">
        document.getElementById(‘btn‘).onclick = function () {
            alert(this.title);
        };

        $(‘#btn‘).click(function () {
            alert(this.title);
        })
    <script>

      不论原生js还是jQuery事件,this均指拥该事件对象的html元素本身,并且为原生js对象(而非jQuery对象)

    另外,对于html事件,在事件中直接引用的this也是该事件对象的html元素本身,如下:

    <div style="width:100px; border:solid;" id="btn" onclick="test(this)" >doSomething</div>

    原因是引号中实际为js语句,js会隐式生成一个匿名函数,因此本质与js事件一样

js函数中this的不同含义

标签:

原文地址:http://www.cnblogs.com/MattCheng/p/5034497.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!