JavaScript中的this到底指的是什么！

最新推荐文章于 2022-02-18 23:50:54 发布

仰望星空的包子

最新推荐文章于 2022-02-18 23:50:54 发布

阅读量1.5k

点赞数 1

分类专栏： JavaScript学习

JavaScript学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

对于常年使用C++,C#,Java等这些面向对象语言的程序员来说，几乎天天都和this打交道。在这些语言里，this含义非常明确，就是指向当前的对象实例，我们用起来也是相当的放心。然而，到了JavaScript这个动态语言里，this的写法没变，但是其含义却大大地不同了，下面用实例说明，使用浏览器为Firefox14.0.1.
例子一：
（1）源码
[html]
<!DOCTYPE html>
<html>
<body>
<script>
alert(this);
</script>
</body>
</html>
（2）执行结果

（3）分析与结论
此时，JS引擎会自动生成一个window对象的成员函数，把上述执行代码放入此函数执行，此时this指向对象window。此时与C++,JAVA,C#的实例成员函数类似。

例子二：
（1）源码
[html]
<!DOCTYPE html>
<html>
<body>
    <script>
        function f() {
            alert(this);
        }
        f();
    </script>
</body>
</html>
（2）执行结果

（3）分析与结论
此例本质上与例子一相同，其中f();其实等价于window.f();也是通过window对象去调用成员函数，此时this仍指向window对象。此时与C++,JAVA,C#的实例成员函数类似。

例子三：
（1）源码

[html]
<!DOCTYPE html>
<html>
<body>
    <script>
        function f(name) {
            this.name = name;
        }
        var a = new f('叶诗文');
        alert(a.name);
    </script>
</body>
</html>

（2）执行结果

（3）分析与结论
此时，f()被当做构造函数来执行，函数体内的this此时指向被新构造出来的对象a。此时，与C++，JAVA，C#的构造函数类似。

例四：
（1）源码
[html]
<!DOCTYPE html>
<html>
<body>
    <script>
        function f() {
            alert(this.name);
        }
        f.apply({name: '叶诗文'});
    </script>
</body>
</html>

（2）执行结果

（3）分析与结论
通过apply方式调用时，函数内的this是通过参数控制的，apply（）的第一个参数就指定了this的值。在C++,JAVA,C#中不存在这种特性。
例五：
（1）源码
[html]
<!DOCTYPE html>
<html>
<body>
    <script>
        var name = '刘翔';
        var a = {name: '叶诗文'};
        a.f = function() {
            alert(this.name);
            (function(){
                alert(this.name);
            })();
        }
        a.f();
    </script>
</body>
</html>

（2）执行结果


（3）分析与结论
此处的f()函数是作为对象a的成员函数来执行的，所以f函数体内的this指向对象a；而其中嵌套的匿名函数没有显示指定其所属对象，则自动属于window对象，其执行是作为window的成员函数来执行，故其函数体内的this指向window。
总结：
(1)JavaScript中，执行代码必须放入函数中，如果没有显示写入函数中，则代码会自动被放入window的某个成员函数中；
(2)JavaScript的函数都是成员函数，一定属于某个对象，如果没有显示指定此对象，那么这个函数就属于window对象；
(3)JavaScript函数的执行方式有三种，一是作为成员函数来调用，此时函数体内的this指向函数所属对象；二是作为构造函数来调用，此时函数体内的this指向通过此构造函数新创建的对象；三是通过apply或call调用，此时函数体内的this是被参数控制的。
(4)this的指向与定义函数的语法与位置无关，只与函数被调用的方式有关。