从执行上下文角度看箭头函数的this指向

 前言

这篇文章探索的是在js文件中。在vue组件实例内，则有不一样的情况。同时这篇文章也是我个人的理解（不完全,参照了gpt的结果和gpt的解释进行了自己的理解),如果发现错误，敬请指正，不胜感激。

理解完执行上下文的概念我们可以从执行上下文角度看箭头函数的this指向了。如果不了解执行上下文的话可以看轻松理解执行上下文

箭头函数this指向的解释

箭头函数的 this: 箭头函数不会创建自己的 this 绑定，而是从其外围作用域继承 this 值。从上下文角度看，箭头函数内部的this值是基于它被定义时的上下文的this确定的，而不是基于它被调用时的上下文。

示例一 

let obj={
        a:1,
        fun1:()=>{
                console.log(this)
        }
    }

obj.fun1()//打印的是全局对象

 如果不从上下文角度看，只看概念：箭头函数没有自己的this，只能从作用域继承。就不好理解箭头函数this的指向。但如果理解完上下文就很好理解了。上下文分析过程：

首先看obj对象的执行上下文：

1.因为在js代码中除了函数外的所有代码都是处于全局上下文中，所以:obj对象是处于全局上下文的。全局上下文就是window对象。

2.obj.fun1是obj对象调用fun1函数。如果fun1是普通函数，那么根据‘普通函数被对象调用，普通函数的this就指向对象’这条结论来看，fun1就指向了obj。

3.但是fun1是箭头函数，箭头函数不看被谁调用，箭头函数this的指向是根据定义时上下文的this决定的。所以我们从头来看这段代码的上下文创建过程：

• 首先，全局上下文创建，不是函数的obj对象属于全局上下文。于是在全局上下文中，obj变量被声明和初始化，全局对象的this指向window
• a:1和fun1作为obj的属性在全局上下文中就被声明并且初始化。此时，fun1也就是箭头函数被定义和初始化，所以，箭头函数的this值就是定义时的上下文的this，在这里就指向了window

示例二 

只看第一个也不好理解，只要记住箭头函数本身没有this，箭头函数的this是继承定义时上下文的this

<script>
    function fun1(){
        let obj={
            a:1,
            fun2:()=>{
                console.log(this)
            }
        }
        obj.fun2()
    }

    fun1() //this输出全局对象
</script>

分析：

1.全局上下文创立，没有除函数外的代码，直接看函数。

2.fun1被调用，js引擎创立fun1函数的执行上下文。

3.fun1是作为普通函数被调用，所以fun1的this指向了window对象。

4.在fun1的执行上下文中声明定义了obj变量以及obj的属性a和fun2，根据箭头函数的this是继承定义时上下文的this来看，箭头函数首先在obj对象中，但是obj最为一个对象没有this，那箭头函数就接着往外找，找到了函数fun1上下文中的this。而函数fun1上下文中的this指向了window对象。就这样箭头函数继承了函数fun1在上下文中的this（window对象）作为自己的this。

fun1的上下文图解

可以看到fun2也就是箭头函数在fun1上下文中被定义，所以箭头函数就继承了fun1上下文的this.

示例三

如果在套一层呐

    function fun1(){
        let obj={
            a:1,
            fun2:function(){
                return ()=>{console.log(this)}
            }
        }
        obj.fun2()()
    }

    fun1()

//输出的是obj对象

 可以看到，fun2是被对象obj调用，所以fun2的上下文中的this指向了obj，在这里定义的箭头函数就继承fun2上下文的this就是obj对象了

示例四 

在加个call函数变动一下

function fun1(){
        let obj={
            a:1,
        }
        let fun2=function(){
                let s=()=>{
                    console.log(this)
                }
                s()
            }
        fun2.call(obj)
    }
    fun1()
//输出obj对象

 分析:

1. fun1函数上下文创建，fun1的上下文this指向window
2. fun1中obj定义，fun2函数声明
3. fun2作为普通函数被调用，创立上下文，fun2函数上下文的this因为call函数，指向了obj对象
4. fun2上下文中，箭头函数被定义，箭头函数继承fun2上下文的this，也就是obj对象。下课

注意事项：如果没有call函数，fun2的this指向window。但是注意，箭头函数是在fun2函数中被定义，不算是在函数fun1中被定义。fun2的this指向obj，箭头函数就指向obj就可以看出，箭头函数的定义在他在那个函数中定义，不是看定义式时最外层的函数