这节呢，我们一起来了解一下箭头函数的this值，接下来我们先看一段常规代码：
<script>
const lucy = {
name:'lucy',
hobbies:['Coding','Sleeping','Reading'],
printHobbies: function () {
this.hobbies.map(function (hobby) {
console.log(`${this.name} love ${hobby}`)
})
}
}
lucy.printHobbies()
</script>
打印出来后你会发现map回调函数中的this.name没有打印出来，那么this.name去哪里了呢？可能是这个this的指向有问题，当我们打印一下这个this.name中的this值，会发现指向的是window。这是为什么呢，是因为JS的值在运行当中的时候才绑定的，我们再来看一下printHobbies的方法是lucy这个对象调用的，那么在printHobbies方法当中，这个this值应该指向他的调用对象lucy。
那我们再打印一this.hobbies中的this值，你会发现结果是指向lucy对象的。我们再来看一下map方法中的回调函数，这个函数是独立的一个函数。一个函数当它独立运行的时候，也就是说它不是被作为对象的方法调用，也没有通过其他方法来改变this值的话，那么这个时候这个独立函数里的this就应该指向window或者glob或者在严格模式下 指向 undefined。
所以，当我们执行这个单独的函数的时候，这个this.name的this值就应该指向window这个对象。那么之前呢，我们通常使用的的方法是声明一个变量，如下：
<script>
const lucy = {
name:'lucy',
hobbies:['Coding','Sleeping','Reading'],
printHobbies: function () {
var self = this; //用self代替this
this.hobbies.map(function (hobby) {
console.log(`${self.name} love ${hobby}`)
})
}
}
lucy.printHobbies()
</script>
但是在ES6中我们可以用箭头函数来代替这种方式
<script>
const lucy = {
name:'lucy',
hobbies:['Coding','Sleeping','Reading'],
printHobbies: function () {
this.hobbies.map( (hobby)=>{
console.log(`${this.name} love ${hobby}`)
} )
}
}
lucy.printHobbies()
</script>
为什么箭头函数可以达到这种效果呢，这是因为箭头函数没有自己的this值，它的this值是继承它的父作用域，与我们之前所接触的this值是在运行时候动态指定的有所不同。
箭头函数的this值是词法作用域，也就是说它在定义的时候就被指定了的，而且以后也不会随着它调用方法的改变而改变，所以我们这里的this值就指向它的父级作用域，也就是 this.hobbies中的this值，而且我们也知道 this.hobbies中的this值是指向lucy对象，所以this.name中的this值也是指向lucy对象的。
所以说当你想让你的函数this值绑定它定义的时候父级作用域的this值，并且不希望它被调用的的时候被改变的话，那么就可以使用箭头函数代替我们以前经常使用的函数。但是呢，一定要注意不要将this机制和箭头函数一起用，不然太容易混乱啦~
网友评论