JavaScript 中的 this 到底指向谁？

素颜马尾好姑娘i 2022-04-15 05:25 275阅读 0赞

**目录**

声明函数中的 this

函数表达式中的 this

对象方法中的 this

复合案例

构造函数中的 this

修改 this 默认指向

--------------------

本文将详细介绍 “ JavaScript 中的 this 到底指向谁？”

this 指向问题核心就是把握如下两点：

> 1）this 指向的是对象
> 
> 2）与函数或者方法如何声明的无关，而是要看这个函数或者方法最终被谁调用，谁最终调用这个函数或方法，那么这个函数或方法中的 this 就是谁

下面从简单到复杂的开始进行介绍。

# **声明函数中的 this** #

showTime1(X)、showTime2() 作为声明式函数在编译的时候就已经绑定到了 Window 对象上，全局函数等同于给 Window 对象添加方法。

所以第 13 行、第 14 行调用 showTime1(X) 函数本质一样，因为 showTime1(X) 被 Window 对象调用，所以 showTime1(X) 函数中的 this 就表示 Window 对象。

第 15 行实在也同样是 Window 对象在调用 showTime2()函数，所以 showTime2() 中的 this 也就是 Windows 对象，而 Window 对象自然可以调用 showTime1(X)。运行结果如下：

![20181122095618103.png][]

# 函数表达式中的 this #

*  ES5 声明变量只有两种方式：var 和 function。
 *  ES6 新增 let、const、import、class 再加上 ES5 的 var、function 共有六种声明变量的方式
 *  浏览器环境中顶层对象是 window，Node 中是 global 对象。
 *  ES5 中顶层对象的属性等价于全局变量，即 var 定义的全局变量和函数都是在为 Window 对象追加属性和方法。
 *  ES6 开始 var 定义、function 声明的全局变量，依然是顶层对象的属性；let、const、class 定义的全局变量不属于顶层对象的属性，Scope 是 Script ，即从 ES6 开始，全局变量和顶层对象的属性开始分离。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

通过调试也可以看到，var\_id 的 Scope 是 Global，会位于顶层对象 Window 下，而 let\_id 的 Scope 是 Script，并不是在顶层对象 Window 下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1][]

# **对象方法中的 this** #

jsonObj 是 Json 对象，第 10 行的 showAge() 方法由 jsonObj 对象调用，所以 showAge 方法中的 this 就表示 jsonObj 对象，运行结果如下：

![20181122100748957.png][]

# 复合案例 #

**案例一：**

关键在第 20 行，将 jsonObj 对象中的 showAge 函数的函数体赋值给了 showTime，所以第 21 行调用的肯定是第 15-18 行，已经知道第 21 行 showTime()本质就是 window.showTime()，也就是说方法其实是被 window 对象调用了，于是第 16-17 行中的 this 就表示 window 对象。运行结果如下：

![20181122105315957.png][]

**案例二：**

关键点同样在第 21 行，将 showTime 函数的函数体赋值给了 jsonObj 对象的 showAge 函数，所以第 22 行调用之后运行的肯定是第 3-5 行，而调用它的对象是  jsonObj 对象，所以第 4 行中的 this 就表示 jsonObj 对象。运行结果如下：

![2018112211565458.png][]

**案例三：**

关键点在第 19 行，jsonObj 是 JSON 对象，它的属性 tiger 也是 JSON 对象，而真正调用 showAge() 函数的是 tiger 对象，所以第 15 行中的 this 表示 tiger 对象。运行结果如下：

![20181122121039581.png][]

# 构造函数中的 this #

new 关键字创建对象，构造器会执行，其中的 this 指向这个对象，同时这个对象会返回。

![20181122133031507.png][]

# 修改 this 默认指向 #

除了指定函数中 this 的指向之外，JavaScript 还提供了一套机制来修改 this 的默认指向，可以让函数中的 this 指向想让它指向的对象。

ES5 中通常采用函数上下文调用模式，如 call、apply、bind 等，

运行结果如下：

![20181122141227552.png][]

ES6 开始可以使用箭头函数 ()=> ，它会将 this 表示的对象往外抛一级，如下所示：

<script type="module">
            /**
             * Tiger 相当于一个类
             * @constructor
             */
            let Tiger = function () {
                this.id = 110;
                this.name = "宁王";
                /**Dog 是一个 Json对象*/
                this.Dog = {
                    id: 120,
                    name: "华太师",
                    /**非箭头函数写法*/
                    showInfo1: function () {
                        console.log(this.id, this.name);
                    },
                    /**箭头函数写法*/
                    showInfo2: ()=> {
                        console.log(this.id, this.name);
                    }
                }
            };
            /**这种写法已经说过了，调用 showInfo1 函数的是 Dog 对象，里面的 this 就表示 Dog 对象*/
            new Tiger().Dog.showInfo1();
            /**虽然调用 showInfo2 函数的是 Dog 对象，但是箭头函数会往外抛一层，里面的 this 表示的是 Tiger*/
            new Tiger().Dog.showInfo2();
        </script>

运行结果如下：

![20181122140154290.png][]

[20181122095618103.png]: /images/20220415/bd0a7cc048964a2a972f2973b49a7aec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220415/44ed67956e7549d989d3d72e801917ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1]: /images/20220415/1a4e7e2480c3442e89df405a5ce72b9a.png
[20181122100748957.png]: /images/20220415/57fccd36a5994aab9176e25a187160f6.png
[20181122105315957.png]: /images/20220415/987643ff34e8472896101a0428ad32df.png
[2018112211565458.png]: /images/20220415/390451f58af246f8934b0ec88fe9240e.png
[20181122121039581.png]: /images/20220415/c6794db93fc94812bf0918ecd948aab4.png
[20181122133031507.png]: /images/20220415/7e2ccece7bdb484eb11c858aec418f8b.png
[20181122141227552.png]: /images/20220415/fa9e0911d04e4eed9710e53f868ff65c.png
[20181122140154290.png]: /images/20220415/acf31ca2dece4276801fd88f6f01ecec.png