ES6箭头函数需要注意的地方

箭头函数

ECMAScript6允许使用箭头（=>）来定义函数，大大减少代码量的同时，提高了不少代码的可读性，逼格也上升了一个档次。像这样：

let fn = (a,b) =>a+b;
//等同于
let fn = function(a,b){
    return a+b;
}

但古语云：‘函数无完函数’，箭头函数再使用时有几个需要注意的地方，自己用的时候要注意。

• 大括号的解释问题
  函数体代码多了就用他，显示写法，像这样：

  let fn3 = (a,b)=>{
      a = a + b;
      console.log('ss');
  }

当返回是个大括号对象，再箭头右侧时会被解释为代码块，怎么办？此时需要再对象外面加上括号，像这样：

let fn3 = (a,b)=>({userName:userName,passWord:passWord})

• 箭头函数的this
  1.箭头函数中的this为定义时所在的对象，非使用时所在的对象。比如:

  function fn() {
      return () => {
          return () =>{
              return () =>{
                  return this.id
              }
          }
      }
  }

上述内层函数多个return ,但都采用了箭头函数的形式，因此this均为定义时所再的fn这个this
2.不可进行this的指向改变
因为箭头函数根本没有自己的this，也就别指望通过call()/apply()/bind()等方法去改变this了。
3.for循环绑定事件
绑定事件中循环为每个相关元素事件，使用ES6的let时,使用箭头函数就不要使用this，此时的this为时间函数定义时的window全局。

ele.onClick = function (){
     for(let i = 0;i<xx.length;i++){
         this.className = '我是这个元素';//this为ele
     }
 }
 ele.onClick =>{
     for(let i = 0;i<xx.length;i++){
         this.className = '我是这个元素';//this为window
 }

• 不可作为构造函数
  即父类不能采用箭头函数作为constructor,浏览器会友善的告诉你，erro~~

• 不可采用arguments
  可以采用…arr，即rest参数（获取多余参数，放入数组），ES6中不存在arguments,比如：

  function fn(){
      setTimeout(()=>{
          console.log(arguments);
      },100);
  }
  //传参给fn
  fn(1.2.3);

上述最后打印出的arguments为fn 的arguments。

• 箭头套箭头
  上述也有，ES6中的箭头函数，可以嵌套的。上面也有用过。

赏

谢谢你请我吃糖果