JavaScript中this的各种用法

最新推荐文章于 2025-05-27 21:20:12 发布

原创最新推荐文章于 2025-05-27 21:20:12 发布 · 665 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#this #JavaScript

JavaScript杂记（项目中遇到的问题）专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨了JavaScript中this关键字的指向问题，包括全局环境、对象方法、匿名自执行函数及非匿名函数中的this指向差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前情提要：this指的是函数运行时所在的环境。

先不妨在控制台中直接打印一下this看看结果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <title></title>
</head>
<body>
    
</body>
<script>
    console.log(this)
</script>
</html>

会得到什么结果呢？

打印一下window

<!DOCTYPE html>
<html lang="zh-CN">
<head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <title></title>
</head>
<body>

</body>
<script>
    console.log(window)
</script>
</html>

得到

一毛一样，所以可以看到这里的this指向全局window

现在问题来了，既然面向对象编程嘛！如果想让this指向自己定义的一个对象呢？

so Easy！

look at！

<!DOCTYPE html>
<html lang="zh-CN">
<head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <title></title>
</head>
<body>

</body>
<script>
    var obj={
        a:function(){
            console.log(this)
        },
        b:3
    }
    obj.a()
</script>
</html>

结果：

结果打印出来的是obj对象，所以嘛，this的作用域取决于所依赖的上一级。

不过在手贱，发现一个新问题就是匿名自执行函数的this指向那儿，先看一段代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <title></title>
</head>
<body>

</body>
<script>
    var p={};
    p.Fun=function(){
        return this
    }();
    console.log(p.Fun)
</script>
</html>

打印出来的结果：

what fu**

说好的指向上一级呢，怎么指向全局了！

不让他自执行呢：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <title></title>
</head>
<body>

</body>
<script>
    var p={};
    p.Fun=function(){
        return this
    };
    console.log(p.Fun)
</script>
</html>

这就合适了

非匿名自执行函数呢？

<!DOCTYPE html>
<html lang="zh-CN">
<head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <title></title>
</head>
<body>

</body>
<script>
    var p={};
    p.Fun=function text(){
        return this
    }();
    console.log(p.Fun)
</script>
</html>

this指向全局

非匿名非自执行函数呢

<!DOCTYPE html>
<html lang="zh-CN">
<head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <title></title>
</head>
<body>

</body>
<script>
    var p={};
    p.Fun=function text(){
        return this
    };
    console.log(p.Fun)
</script>
</html>