ES6箭头函数的this指向问题

首先让我们来看看来自MDN的箭头函数说明：

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

然后看下普通函数的this指向：

<script>
    const person = {
        name: "terry",
        hobby: ["javascript", "webpack", "vue"],
        myhobby: function () {
            this.hobby.map(function(value){
                console.log(`${this.name} like ${value}`)
            })
        }
    }
    person.myhobby();
</script>

这段代码中，数组hobby调用map方法的回调函数，我们想定是要返回类似以下结果：

terry like javascript
terry like webpack
terry like vue

而实际上，执行后的结果却是：

 like javascript
 like webpack
 like vue

terry去哪儿了？
其实，js中对象的this通常指向调用者，这里由于回调函数并没有被类似call,apply,bind这些方法改变this指向，所以，回调函数中的this指向的其实是window对象(严格模式下，指向undefined)。为了验证这一说法，我们打印上述回调函数中的this

<script>
    const person = {
        name: "terry",
        hobby: ["javascript", "webpack", "vue"],
        myhobby: function () {
            this.hobby.map(function(value){
                console.log(this)
                console.log(`${this.name} like ${value}`)
            })
        }
    }
    person.myhobby();
</script>

浏览器中的执行结果为：

那么按照之前说的，如果使用call,apply,bind改变this指向，就会得到正确的想定结果：

<script>
    const person = {
        name: "terry",
        hobby: ["javascript", "webpack", "vue"],
        myhobby: function () {
            this.hobby.map(function(value){
                console.log(`${this.name} like ${value}`)
            }.bind(this))
        }
    }
    person.myhobby();
</script>

执行后的结果为：

terry like javascript
terry like webpack
terry like vue

接着，我们来看看ES6箭头函数的运行结果：

<script>
    const person = {
        name: "terry",
        hobby: ["javascript", "webpack", "vue"],
        myhobby: function () {
            this.hobby.map(value=>{
                console.log(`${this.name} like ${value}`)
            })
        }
    }
    person.myhobby();
</script>

依旧能够正确打印出我们想要的结果：

terry like javascript
terry like webpack
terry like vue

再来看看下面这段代码：

<script>
    var name = "Mike";
    var hobby = ["eat", "sleep", "dream"];
    const person  = {
        name: "terry",
        hobby: ["javascript", "webpack", "vue"],
        myhobby: function () {
            this.hobby.map(value => {
                console.log(`${this.name} like ${value}`)
            })
        }.bind(window)
    }
    person.myhobby();
</script>

我们首先全局定义两个变量，name和hobby，接着在person对象内部同样定义同名变量，并使用map方法打印每个元素，但这里注意，我们使用bind改变了myhobby函数的this指向。与之前讨论的一致，由于方法的this指向被改变，最终结果为bind所指向的作用域中的值：

Mike like eat
Mike like sleep
Mike like dream

结论：由于箭头函数没有自己的this，所以它内部调用this时，会寻找其父级上下文中的this，在上面的代码中，回调函数的父级上下文的this指向的是person对象。
同时与一般函数的运行时作用域不同，箭头函数的作用域为词法作用域，即它在书写代码时已经固定了函数本身的作用域内容，不会随着调用者的改变而发生变化。