JavaScript关于this对象

最新推荐文章于 2024-02-05 08:00:00 发布

杨旭华　

最新推荐文章于 2024-02-05 08:00:00 发布

阅读量251

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Yxh666/article/details/103165735

版权

JavaScript 专栏收录该内容

17 篇文章 13 订阅

订阅专栏

JavaScript中的this指向问题，比较复杂，有时会让人难以琢磨，随着学习的深入，我们会不断的接触this
在学习过程中，我们可以不断总结，最终搞清楚this在何种情况下指向何处......
目前，我们只需要记住以下两点就行了：

1.函数如果在某个对象下，this就指向这个对象
2.函数如果被直接调用，this直接指向window对象

我们用地代码解释：

<!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>
<script>
    var obj1 = {
        name:"程序员",
        age:18,
        fun:function() {
            var s = this.age;
            console.log(s);
        }
    }
    obj1.fun();
</script>
</html>

我们看这段代码，就是定义对象，在到下面，就是我们之前说过的，把函数当成一个值，放在了对象里面，那么它将不是一个函数，我们把这里面的 fun，或者函数叫做方法，在这个方法里面我们定义了一个变量，并获取 age 的值，但是我们与往常一样，不是用的什么 obj1. 什么什么的，用的是 this，那么 this 是什么意思呢， 注意： 在方法中的this指的就是这个方法所在的对象，也就是说 this 指向的就是 obj1，然后打印，下面别玩了最重要的函数声明了，是要调用的，我们看结果：
在这里插入图片描述

这是this的第一种是用方式，我们来看第二种：

... ...
    function f() {
        console.log(this.a);
    }
    f();
</script>
</html>

我们看这个代码，这作为一个普通的函数，这个 this又指向谁呢，而这个函数又不属于某个对象吧，那我们打印一下试试:
在这里插入图片描述

这个竟然是没有报错的，而是undefined，我们看代码：

... ...
    function f() {
        // 普通的函数中也是有this的
        // this
        console.log(yy.a);
    }
    f();
</script>
</html>

我们把 this 换成了 yy，这说明什么，说明yy得是一个对象，那现在是没有yy这个对象的，我们在看：
在这里插入图片描述
显示报错，说了一下是，yy is not define，就是没有找到，那我们换成this的时候，他并不是没找到，而是undefined，这是什么意思啊，这说明对象是有的，但是对象里面并没有 a 这个属性

就是想证明: 普通的函数中也是有this的
那我们就打印 this ，看看是什么样子的：
在这里插入图片描述
打印出来是这个样子的，什么window，我们再点击上图所示的位置，可以看到有很多很多属性啊，方法，这是什么呢
注意：
this 指向全局对象(window)
window就是当前运行的大环境

this的特点： this永远指向一个对象

<!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>
<script>
    function fun() {
        console.log(this.k);
    }
    var o1 = {
        k:"123",
        f:fun,
    }

    var o2 = {
        k:"345",
        f:fun,
    }


</script>
</html>

我们看这段代码，只是声明函数，没有调用，所以这样代码是不执行的，下面是又声明了 o1 和 o2 两个对象，分别都有一个k属性，但是属性的值不一样，每个对象都声明了 f 属性，而属性的值 fun 就是上面声明的函数 fun 把对象中的值，赋值给了对象中的 f 属性

... ...
<script>
    k = '678';
    function fun() {
        console.log(this.k);
    }
    var o1 = {
        k:"123",
        f:fun,
    }

    var o2 = {
        k:"345",
        f:fun,
    }

    o1.f();
    o2.f();


</script>
</html>

我们又在函数上面加了一个 k ，然后我们调用一下函数看：

我们在加代码：

... ...
   k = '678';
    function fun() {
        var k = '890'
        console.log(this.k);
    }
... ...

再看结果：

还是123和345，这是记住一句话：
this运行在哪个对象下，就指向哪个对象

解释一下，我们看代码，运行代码，直接找到 f ，f 就是 o1 里面的 fun ，那么 fun 又是谁呢，就是上面函数 fun ，在调用，那么就直接打印执行 this，注意它就运行在那 o1 对象下的 k 属性的值，这样就调用出来了，同样 o2 也是这样如此

再给大家看一道题，自理理解理解那段话：

     var o1 = {
        age:18,
        fun:function(){
            console.log(this.age);
        }
     }

     var o2 = {
         age:16,
         fun:o1.fun,

     }
     o2.fun();
</script>
</html>