箭头函数

1 作用

可以用于需要匿名函数的地方，能够简化函数书写。

2 语法

2.1 基本语法

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression
//相当于：(param1, param2, …, paramN) =>{ return expression; }

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

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

当函数体放在 {} 中时，必须有明确的 return 语句，否则返回值为 undefined。

var func = x => x * x;                  
// 简写函数 省略return

var func = (x, y) => { return x + y; }; 
//常规编写 明确的返回值

var func = (x, y) => { x + y; };// func(1,2) 返回值为 undefined 
//常规编写 没有的返回值

2.2 高级语法

//返回对象字面量表达式时函数体需要加括号：
params => ({foo: bar})

//支持剩余参数和默认参数
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { 
statements }

//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

返回对象字面量时，需要用圆括号括起来。

var func = () => { foo: 1 };               
// Calling func() returns undefined!

var func = () => ({foo: 1});

3 特点

3.1 this

3.1.1 没有自己的 this

箭头函数不会创建自己的 this，它的 this 由箭头函数被创建时的上一层作用域链决定。

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| 正确地指向 p 实例，函数被创建时的上一层作用域 Persion 的实例
  }, 1000);
}

var p = new Person();

作为对象的方法：

'use strict';
var obj = {
  i: 10,
  b: () => console.log(this.i, this),// 上层作用域为 window
  c: function() {
    console.log( this.i, this)
  }
}
obj.b(); 
// undefined, Window{...}
obj.c(); 
// 10, Object {...}

3.1.2 通过 call apply bind 绑定

通过 call apply bind 绑定箭头函数时，第一个参数会被忽略（即无法绑定 this），其他参数会被正常接收。

var adder = {
  base : 1,
    
  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2

3.2 arguments 参数

箭头函数不绑定 arguments，只是引用了外层作用域内的 arguments。

var arguments = [1, 2, 3];
var arr = () => arguments[0];

arr(); // 1

function foo(n) {
  var f = () => arguments[0] + n; // 隐式绑定 foo 函数的 arguments 对象. arguments[0] 是 n,即传给foo函数的第一个参数
  return f();
}

foo(1); // 2
foo(2); // 4
foo(3); // 6
foo(3,2);//6 

3.3 new 操作符

箭头函数不用用作构造函数，使用 new 操作符会报错。

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

3.4 prototype 属性

箭头函数没有 prototype 属性。

var Foo = () => {};
console.log(Foo.prototype); // undefined

3.5 运算符优先级

let callback;

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

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

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