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

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

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

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

*<font color=red> 其实箭头函数根本没有自己的 this</font>，更别谈 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 。