【ES6】箭头函数用法与深入理解

语法

ES6 允许使用“箭头”（=>）定义函数，可以简单的认为箭头的左边是函数的参数，箭头的右边是函数的声明（函数体）。

1. 具有一个参数的简单函数

// 当只有一个参数时，圆括号是可选的：
// (单一参数) => {函数声明}
// 单一参数 => {函数声明}

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};

2. 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号()代表参数部分，多个参数之间用逗号间隔。

// 没有参数的函数应该写成一对圆括号。
// () => {函数声明}

var f = () => 5;
// 等同于
var f = function () { return 5 };

// (参数1, 参数2, …, 参数N) => { 函数声明 }
// (参数1, 参数2, …, 参数N) => 表达式（单一）
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

3. 箭头函数的代码块部分多于一条语句，就要使用大括号{}将它们括起来，并且使用return语句返回。

var add = (a, b) => {
    if (typeof a == 'number' && typeof b == 'number') {
        return a + b
    } else {
        return 0
    }
}

4. 如果箭头函数直接返回一个对象，必须在对象外面加上括号()，否则会报错。

// 返回对象字面表达式时需给函数体加括号()，否则会报错
// 参数=> ({foo: bar})

// 报错
let getTempItem = id => { id: id, name: "Temp" };

// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });

5. 箭头函数支持参数列表解构。

let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

6. 支持rest参数和默认参数。

// (参数1, 参数2, ...rest) => {函数声明}
// (参数1 = 默认值1,参数2, …, 参数N = 默认值N) => {函数声明}

const numbers = (...nums) => nums;
numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]

let f = (x, y = 1) => x+y;
f(1); // 2

关于rest参数和默认参数，可参考《【ES6】函数默认参数与rest参数》

注意点

1. typeof运算符和普通的function一样。

var f = a => a;
console.log(typeof f); // "function"

2. 是Function的实例，instanceof也返回true。

var f = a => a;
console.log(f instanceof Function); // true

3. 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this，而且在箭头函数中，this的指向是固定的，不能改变。

// 在箭头函数中，`this`属于词法作用域，直接由上下文确定。
//ES5普通函数
function Man(){
  this.age=22;
  return function(){
    this.age+1;
  }
}
var cala=new Man();
console.log(cala())//undefined

//ES6箭头函数
function Man(){
  this.age=22;
  return () => this.age+1;
}
var cala=new Man();
console.log(cala())//23

4. 不存在arguments对象。如果要用，可以用 rest 参数代替。

//没有arguments
var foo = (a,b) => {return arguments[0]*arguments[1]}
console.log(foo(3,5))
//arguments is not defined

5. 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

//不能使用new 关键字
var Obj = () => {"hello world"};
var o = new Obj(); 
// TypeError: Obj is not a constructor

6. 箭头函数没有原型。

//没有原型
var Obj = () => {};
console.log(Obj.prototype); 
// undefined

7. 不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
8. 箭头函数在参数和箭头之间不能换行。

var func = ()
           => 1; 
// SyntaxError: expected expression, got '=>'

9. 箭头函数具有与常规函数不同的特殊运算符优先级解析规则。

let callback;

callback = callback || function() {}; // ok

callback = callback || () => {};      
// SyntaxError: invalid arrow-function arguments

callback = callback || (() => {});    // ok

参考文章

• ECMAScript 6 入门 - 函数的扩展
• 箭头函数 - JavaScript | MDN