ES6箭头函数的使用

箭头函数是一种定义函数的方式，功能基本同function, 它以对象字面量定义函数，相比于function表达更为简洁。

特点：

• 表达简洁

• 作用域是块级，即每一对花括号就是一个作用域

 

使用方式示例

//定义无参数函数
var fun = （）=> {
    //todo
}

//定义有参数的函数
var fun = ( num1 )=>{
    //todo
}

//定义只有一个参数的函数, 可以简写
var fun = num1=>{
    //todo
}

//当函数中只有一个返回值时
var fun = (num1, num2) => num1+num2;
var fun = ( ) => console.log('hello word'); //注意此箭头函数的返回值为undefine, 因为log()无返回值

箭头函数中的this

通常用法是传递callback函数，示例如下：

setTimeOut(()=>{
    //todo
});

 

箭头函数中的this和function函数中的this的区别，示例如下：

var obj = {
    aa(){
        setTimeout(function () {
            console.log(this);
        });
    }
    bb(){
        setTimeout(()=>{
            console.log(this);
        });
    }
}

obj.aa();
obj.bb();

//输出
window
obj

var obj = {
    aa(){
        setTimeout(function () {
            setTimeout(function () {
                console.log(this);
            });
            setTimeout(function(){
                console.log(this);
            });
        });
    }
  setTimeout(()=>{
      setTimeout(function () {
          console.log(this);
      });
      setTimeout(()=>{
          console.log(this);
      });
  });
}

obj.aa();
obj.bb();

//输出结果
window
window
window
obj

结论：function(){}花括号中的this指向window, 而箭头函数花括号中的this指向外层的this, 如果离它最近的外层没有会继续西向外找, 直至找到, 如果最外层都没有则会找到window。