ES6的箭头函数，在我们日常的开发中，增加了很多的方便，ES5需要写三行代码实现的逻辑，使用箭头函数，也许只需要一行，代码开起来清晰、干练！但是，在某些时候，使用箭头函数也会给我们带来意想不到的麻烦。
在正式开始之前，先来回顾一下，关于箭头函数需要注意的地方：
- 箭头函数内的this对象就是定义时所在的对象，而不是使用时所在的对象。
- 不可以当作构造函数，也就是说，不可以使用new命令。
- 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替。
- 不可以使用yield命令，因此箭头函数不能用字Generator函数中。
对象上的方法
调用对象上的数组
话不多说，先上代码！
let arr
const obj = {
arr: [1,2,3],
sun:()=>{
console.log(this === window) // true
this.arr.filter(itme=>item+1)
}
}
obj.sun() // Uncaught TypeError: Cannot read property 'filter' of undefined
很明显，浏览器会报错，此时的this === window ，但是在全局定义的arr为undefined！ 总结：箭头函数会将作用域绑定到window对象！如果需要调用对象上的某个属性时，不能使用箭头函数。 解决方法：
const obj = {
arr: [1,2,3],
sun(){
console.log(this === obj) // true
this.arr.filter(itme=>item+1)
}
}
obj.sun()
调用原型上的方法
function Myfunc(name){
this.name = name;
}
Myfunc.prototype.sayName = ()=>{
console.log(this === window) // true
return this.name
}
const me = new Myfunc('hanson')
me.sayName() // ''
此时的this同样也指向的window，这种情况，同样不适合使用箭头函数。使用传统方式，即可完成调用。
function Myfunc(name){
this.name = name;
}
Myfunc.prototype.sayName = function(){
return this.name
}
const me = new Myfunc('hanson')
me.sayName() //'hanson'
动态上下文的回调函数
this的一大特性是，可以根据调用函数的方式更改上下文。也就是说，this指向使用时的对象。但是，箭头函数的this值是固定的。其实是，在箭头函数中，根本不存在this值，导致内部的代码块就是外部的代码块。this值的固定，在某些需要动态绑定的地方，就变得不再方便了。
const button = document.getELementById('myButton');
button.addEventListener('click',()=>{
console.log(this === window);
this.innerHTML = 'click button';
})
在全局上下文中，this指向window。当点击事件发生的时候，浏览器尝试使用按钮上下文调用处理函数，但是箭头函数不会更改气预定义的上下文，this.innerHTM相当于window.innerHTML，没有任何意义。
调用构造函数
在上面的注意事项中，我们提到了。箭头函数不能应用在构造函数中。
const Message = (text)=>{
this.text = text;
}
const msg = new Message('message add') //Uncaught TypeError: Message is not a constructor
在创建构造函数的时候，不能使用构造函数。因为，在使用构造函数创建对象实例时，构造函数的上下文是新创建的实例对象。
语意上的理解
构造函数在某些时候的确可以减少代码量，使开发更加简便。因为箭头函数可以省略括号和大括号，甚至可以省略return。但是在某些时候，如果你的同时跟你配合开发或者在阅读你写的代码时，可能会造成一定的困难。
总结
- 对象上的方法在调用此对象上的某个属性时，不要使用箭头函数。
- 原型上定义的方法不要使用箭头函数。
- 不能使用箭头函数创建构造函数。
- 简短和冗长之间找到一个平衡点。
如果文章对你有一点帮助，不要忘记点赞关注哦！
