不适宜使用箭头函数的场景举例
ES6的箭头函数非常好用，简洁、高效。
刚刚接触的小伙伴高兴的表示，要把自己写过的函数，统统改成箭头函数。
但是，至少有3个场景是不适合使用箭头函数的。
第一个场景：箭头函数作为构造函数,或者箭头函数定义一个方法需要绑定到对象时
要知道，箭头函数是不存在this值的绑定的。
下面举一个建立一个播放列表的例子。使用对象构造器, 本例使用函数来构造对象，
当然，用这个方法建立播放列表不合适，咱们只是拿来举例不做他用。
我想把播放列表分成“流行歌曲”、“电子音乐”、“轻音乐”等类别。
这些不同类别的播放列表，长得都一样，里面只包含歌名、演唱者和排列序号。
我们使用构造函数构建播放列表，然后用这个构造函数，建立“流行歌曲”播放列表。
const PlayList = (sort,name,vocalist) =>{
this.sort = sort;
this.songName = name;
this.singer = vocalist;
}
const popSongList = new PlayList(1,'浮白','花粥');
运行之后你会发现，报错了“Uncaught TypeError: PlayList is not a constructor”，这是怎么回事呢？
上面的代码在运行时发生了下面4个步骤：
1.生成一个新的对象popSongList
2.把这个构造函数PlayList里的this值指向新生成的对象popSongList
3.把这个对象绑定他的原型对象
4.返回这个新生成的对象
问题出在第2步,箭头函数是不存在this值的绑定的,所以他没有将这个构造函数里的this值指向新生成的对象popSongList里面。
const PlayList = function(sort,name,vocalist){
this.sort = sort;
this.songName = name;
this.singer = vocalist;
}
const popSongList = new PlayList(1,'浮白','花粥');
这样修改之后，就可以正常运行了，在控制台输入：
popSongList
会弹出：
PlayList {sort: 1, songName: "浮白", singer: "花粥"}
总结：
构造函数中的 this 指向新创建的对象，当执行new PlayList() 的时候，构造函数 PlayList 的上下文就是新创建的对象。显然，箭头函数是不能用来做构造函数， 实际上 JS 会禁止你这么做，如果你这么做了，它就会抛出异常。
换句话说，箭头构造函数的执行并没有任何意义，并且是有歧义的。
同样的规则适用于原型方法（prototype method）的定义，使用箭头函数会导致运行时的执行上下文错误，还用上面的例子来说明这个问题，
我们在上面的播放列表中，再改变一下歌曲的排列顺序吧，我们在PlayList的原型上添加改变排序的方法changeOrder，
PlayList.prototype.changeOrder = () =>{
this.sort++;
console.log(this.sort)
}
在控制台输入：
popSongList.changeOrder()
会弹出：
NaN
undefined
可以看到这里又出错了，
那么这个函数里面的this是什么呢？我们验证一下
PlayList.prototype.changeOrder = () =>{
console.log(this);
this.sort++;
//console.log(this.sort)
}
popSongList.changeOrder();
这时候控制台会弹出：
window
我们在修改一下，
PlayList.prototype.changeOrder = function(){
console.log(this);
this.sort++;
console.log(this.sort)
}
popSongList.changeOrder();//PlayList 2
只有这样，才能把this值绑定到对象上面去。
changeOrder 变成普通函数之后，被调用时的执行上下文就会指向新创建的 popSongList 实例。
场景二：定义事件回调函数
我们举一个点击按钮变大，3秒后恢复的例子
const btn1 = document.getElementById('btn1');
btn1.addEventListener('click',()=>{
this.classList.add('btn-lg');
setTimeout(()=>{
this.classList.remove('btn-lg');
},3000)
})
html code:
<button type="button" class="btn btn-primary" id="btn1">按钮</button>
我们点击按钮后，控制台报错：
Uncaught TypeError: Cannot read property 'add' of undefined
也就是说，this.classList.add('btn-lg');是undefined，
我们希望的是回调函数里的this会绑定成btn1，但是，在全局上下文下定义的箭头函数执行时 this 会指向 window，当单击事件发生时，浏览器会尝试用 btn1 作为上下文来执行事件回调函数，但是箭头函数预定义的上下文是不能被修改的。
我们来验证一下：
const btn1 = document.getElementById('btn1');
btn1.addEventListener('click',()=>{
console.log(this);//Window
this.classList.add('btn-lg');
setTimeout(()=>{
this.classList.remove('btn-lg');
},3000)
})
我们添加了一行onsole.log(this);点击按钮后，控制台输出：window.
箭头函数在声明的时候就绑定了执行上下文，要动态改变上下文是不可能的，在需要动态上下文的时候它的弊端就凸显出来。
const btn1 = document.getElementById('btn1');
btn1.addEventListener('click',function(){
this.classList.add('btn-lg');
setTimeout(()=>{
this.classList.remove('btn-lg');
},3000)
})
现在运行这段代码就正常了，我们点击按钮后，按钮变大，3秒后自动恢复。单击按钮时，事件回调函数中的 this 实际指向 btn1，
还有一个问题，上面那段代码还有一个箭头函数：
setTimeout(()=>{
this.classList.remove('btn-lg');
},3000)
如果我们把这个箭头函数也改成普通函数会怎么样呢？
const btn1 = document.getElementById('btn1');
btn1.addEventListener('click',function(){
this.classList.add('btn-lg');
setTimeout(function(){
this.classList.remove('btn-lg');
},3000)
})
点击按钮之后，按钮变大了，但是3秒后控制台弹出：
Uncaught TypeError: Cannot read property 'remove' of undefined
我们在查一下函数里现在的this值
const btn1 = document.getElementById('btn1');
btn1.addEventListener('click',function(){
this.classList.add('btn-lg');
setTimeout(function(){
console.log(this);//window
this.classList.remove('btn-lg');
},3000)
})
可以看到，控制台输出的this是window，也就是说，如果你想保留this值为btn1的话，这里还必须用箭头函数了。
第三种场景：使用arguments对象的时候
const total = () => {
return Array.from(arguments).reduce((number1,number2)=> number1 + number2,0)
}
我们在控制台输入：total(1,2,3)
这时候会报错：
Uncaught ReferenceError: arguments is not defined
这是因为箭头函数中是没有arguments这个对象的.
修改一下：
const total = function() {
return Array.from(arguments).reduce((number1,number2)=> number1 + number2,0)
}
console.log(total(1,2,3));//6
现在就正常了
综上，本文只是举例，并没有穷举所有场景，可能有些场景我还没有遇到，以后遇到我会加上去的。
网友评论