1分钟搞懂箭头函数this指向问题

在网上看到很多关于箭头函数this指向的博客和问题解答，但是基本写的都不准确，有的甚至是错误的，在其他博客网站得到的答案基本就是“箭头函数在定义时this指向谁那么之后就一直指向谁”，这句话虽然不错，但是这不还是没说清楚到底是指向了谁嘛。实在看不下去了，今天在这里详细写一写箭头函数的this到底指向谁？

在这里首先看一看MDN对于箭头函数的介绍：

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

*其实箭头函数根本没有自己的this，更别谈this的指向问题了。箭头函数不光没有this，而且连arguments、super、new.target也没有。

箭头函数中出现的this实际为它所在上下文中的this，我们通过下面的例子来看一下：

案例1：

普通函数的this：

<button id="btn">按钮</button>
<script>
    document.getElementById("btn").onclick = function(){
        console.log(this);    // this指向当前发生事件的元素
    }
</script>

输出为：

<button id="btn">按钮</button>

箭头函数：

<button id="btn">按钮</button>
<script>
    document.getElementById("btn").onclick = () => {
        console.log(this);
    }
</script>

输出为：

> Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, ...}

我们可以看到，在普通函数中我们点击按钮时触发点击事件，输出的this指向当前发生事件的元素也就是<button>元素，箭头函数中this指向的是Window，写到这个地方其他的博客就得出了箭头函数this都指向Window的错误结论！

案例2：

我们继续看下面这个例子：

<button id="btn">按钮</button>
<script>
    var obj = {a:1,b:2};
    function foo(){
        document.getElementById("btn").onclick = () => {
            console.log(this);
        }
    }
    foo.call(obj);
</script>

我们在这个例子中，我们把foo()函数的this指向使用过call()改为了指向obj，当我们点击按钮时得到输出：

> {a: 1, b: 2}

咦？咱们的this是在箭头函数里输出的啊，为啥指向了obj呢？
上边我们说了，箭头函数其实是没有自己的this的，这个this虽然在箭头函数内，实际上这个this的指向是foo()的this的指向（但不是foo的this，foo的this可以改变指向箭头函数的不可以），所以我们可以看到它指向了obj。

找指向的小技巧

找指向的小技巧就是扒皮，对！就是把箭头函数这层皮扒掉，然后再看this指向谁就是指向谁。
如下图所示，我们将红圈圈这层皮扒掉，再来看这个this，此时我们可以看到指向的实际上是foo()this的指向，也就是指向obj。