js函数中this的不同含义

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="100px; border:solid;" >doSomething</div>

　　　　　　该情况下，test中this为window

　　　　b、js事件定义，如

　　　　<div style="100px; border:solid;"  >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="100px; border:solid;" >doSomething</div>

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

3、Function对象提供的两个方法apply()、call()，用于改变函数中this的取值

一篇形象的讲解：【javascript】函数中的this的四种绑定形式 — 大家准备好瓜子，我要讲故事啦~~

关于this更为深入透彻的讲解：JavaScript中的this

js函数中this的不同含义

相关推荐