1.前言
ES6中新增了箭头函数,箭头函数虽然写起来比之前function的形式简单了不少,但是如果用得不好,很容易就掉进坑里,坑主要集中在了涉及到this的相关问题时,其次是arguments,其他都还好。知道有这些坑以后,我们不仅可以避开,而且我们还可以巧妙的运用这些坑来实现一些需求,在解决一些问题上会有奇效,比如当我们想要继承上级作用域的this的时候。
2. 箭头函数的this有多少坑
所有涉及到this的问题,在使用箭头函数前,都要想清楚再用,因为箭头函数没有自己的this,箭头函数的this是继承的箭头函数所在的上下文中的this的指向,并且一旦确定了this的指向,就不能再被改变了,无论什么方法都无法再改变this指向
2.1 不能作为构造函数(不能new执行)
箭头函数不能作为构造函数执行的原因有两个:
(1)**箭头函数没有自己的this,**this指向是继承的所在上下文中的this,因此如果箭头函数作为构造函数执行,里面的this指向的就不是当前的实例了,执行过程中就无法给当前实例增加私有属性和私有方法,这样来看箭头函数是不能作为构造函数执行的
(2)**箭头函数没有prototype(原型)属性,**也就是说,箭头函数不是constructor(构造函数或者构造器),因此不能构造函数执行
注意: 如果对箭头函数强行new 执行的话,会报错,报 xxx is not a constructor
2.2 作为函数给对象、实例或原型增加方法时要注意
也是因为this指向的原因。即使调用该方法,this也不一定指向当前调用它的那个对象,可能不会得到想要的结果,因为这里的this是指向该方法被创建时的上下文中的this,如果恰好这里的this是将来调用时你想指向的,那就可以在创建的时候写成箭头函数。例如,当我们创建一个类的时候,给类的原型增加方法,如果是写成箭头函数的形式,则里面的this是当前实例,如果你恰好想在这个方法里面用到实例或实例原型上面的属性和方法,那这里写成箭头函数的形式就是妙用。所以,这里用的时候要谨慎,用的好就是妙用,用不好就是bug。
2.3 给元素事件绑定方法的时候要注意
给元素事件绑定方法的时候,如果绑定的是普通函数,则事件触发时函数里面的this指向的是当前元素,注意如果绑定的是箭头函数,里面的this就不是指向当前的元素了,所以如果绑定箭头函数的话里面不要涉及到this。
2.4 不能用call、apply、bind改变this
注意箭头函数中的this,在定义的时候,就已经确定了指向了,而且确定了以后无法被改变,无论任何操作都无法改变this的指向,即使用call、apply、bind也无法改变this的指向
3. 箭头函数没有arguments
普通函数执行时,都有arguments(实参集合),但是箭头函数执行时里面没有arguments(实参集合),不过可以通过剩余运算符在形参位置接收实参,接收到的实参被放在一个数组里面,这样甚至比arguments这个类数组的可操作性更高,效果更好,这样也可以解决操作实参的问题
let fn = (...arg)=>{
console.log(arg)
}
fn(1,2,3,4,5)// [1,2,3,4,5]