关于js中this的用法以及总结

最新推荐文章于 2021-11-18 21:54:21 发布

wheng9667

最新推荐文章于 2021-11-18 21:54:21 发布

阅读量117

点赞数

分类专栏： JS 文章标签： JS

本文链接：https://blog.csdn.net/wheng9667/article/details/89525757

版权

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

先贴上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
</body>
<style>
</style>
<script>
    var x = 1;
    console.log(this.x)
    var k = {
        x : 10,
        fn:function(){
            console.log(this.x)
        }
    }
    k.fn();
    var j = k;
    j.fn();
    var l = k.fn;
    l();
</script>
</html>

上述代码中，我们先在全局环境中定义了一个变量x，赋值为1；

然后我们定义一个对象K，对象K里包含两个局部变量x和fn；

此时我们都知道这两个x互不干扰，它们的作用域不同；

k中定义的变量fn，我们将它指向一个函数,内容是打印出this.x;

然后我们运行k.fn()，定义一个全局变量j，将对象k赋值给j；

再定义一个全局变量l，将k中的属性fn赋值给l；

然后我们看看结果 --------->>>>>>

å¨è¿éæå¥å¾çæè¿°

我们可以看到console出来的四个结果。
第一个结果是在全局变量x定义后立刻console的this.x的值，值为1，很明显，此时的this指向的是整个window，是整个全局环境。
第二个结果是我们在定义了对象k，并将k的属性fn赋值成一个 console.log(this.x) 函数后，调用了k.fn()后的值，值为10，为什么这里的值和第一个值不一样呢？很明显是this所代表的对象发生了改变，此时的this代表的是对象k。
第三个结果是我们将对象k赋值给j，调用j.fn()后，值为10。
第四个结果是我们将k.fn()赋值给l，这里我的理解是，var l = k.fn 可以看作是 var l = function(){console.log(this.x)}。然后console的结果是10。

我们可以得出一个结论：谁调用了this，那么this就指向谁，比如第一个结果，调用this的是全局环境，那么this指向的就是全局，this.x等于1。第二、三个结果，调用this的是对象k，那么this指向的就是对象k,this.x等于10。第三个结果，因为var l = k.fn 可以看作是 var l = function(){console.log(this.x)}。所以调用this的是全局，所以this.x等于1。

总结一下：
**

谁调用了this，那么this就指向谁
**
记住这个观点，应该就不会再出错了~