JavaScript：一文搞懂this关键字指向

在JS中，this的指向会随着执行的环境不同，从而指向不同的对象，本文就是对this关键字指向来一波总结，以便那些，对于this指向比较迷的前端人

目录

1. 单独使用，this表示全局对象

1.1 即使在严格模式下，this也依然表示全局对象

2. 在function函数中

2.1 常规模式

 2.2 严格模式

3. 在对象的属性方法中，指向当前所处的对象

3.1 常规模式

3.2 严格模式

4. 在html中，指向接收事件的html元素

总结

---

1. 单独使用，this表示全局对象

这个很好理解，看下面这段代码的输出

毫无疑问，这里的this是指向的全局windows对象，打印看看

 

1.1 即使在严格模式下，this也依然表示全局对象

2. 在function函数中 2.1 常规模式

this也还是指向全局的windows对象

 2.2 严格模式

开启了严格模式下，this就成了undefined，这是因为严格模式下，对于这里，this就是未定义的一个变量，那如果还想访问到this改怎么办？可以如下

        const that = this;
        function demo1() {
            "use strict"
            console.log(that)  //undefined
        }
        demo1()

3. 在对象的属性方法中，指向当前所处的对象 3.1 常规模式

在这里的this指向就指向了整个obj对象，包含obj所有的属性方法。

3.2 严格模式

打印看看

 可见，在对象的属性方法中，无论开启严格模式与否，都同样的指向当前所处的对象！

4. 在html中，指向接收事件的html元素

点击我

点击下试试；

 那么我们就可以直接写如下代码：

点击我

点击这个div标签，发现 点击我 三个字颜色变为了 红色，字体变大；目的达到

总结：

this指向：

单独使用时，无论是否开启严格模式，this始终指向全局的windows对象作为单独函数，函数体内的this指向，在严格模式下 this为undefined，常规模式 下指 向全局windows对象  作为对象的属性方法时，无论是否开启严格模式，this指向当前所处的对象 在html中，指向接收事件的html元素