ES6中箭头函数的作用

我们知道在ES6中，引入了箭头函数，其本质就是等同有ES5中的函数。类似于下面的写法：

let test1=() => “abc”;

let test2=() => { return “abc”};

let sum=(a,b) => a+b;

比如上面的3个ES6的箭头函数的写完，如果用ES5就像下面的写完一样。

其实其等同于下面的ES5的写法：

function test1() {
return "abc"
}

function test2(){
return "abc"
}

function sum(){
return a+b;
}

1. 其基本格式如下：

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// equivalent to: (param1, param2, …, paramN) => { return expression; }

// Parentheses are optional when there's only one parameter name:
(singleParam) => { statements }
singleParam => { statements }
singleParam => expression

// The parameter list for a function with no parameters should be written with a pair of parentheses.
() => { statements }

2. 高级格式如下：

// Parenthesize the body of function to return an object literal expression:
params => ({foo: bar})

// Rest parameters and default parameters are supported
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }

// Destructuring within the parameter list is also supported
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();
// 6

那为什么在ES6中引入了箭头函数呢？ 最主要的目的就是解决this指针的问题。

我们知道在ES6中，我们可以创建一个class，如果我们默认在其里面加入一个函数的话，其必须在调用的时候，必须绑定this指针，否则不能访问当前类的实例里面的属性。下面举一个具体的例子，为什么其能解决this指针的问题。

比如下面一个一个Person类：

function Person() {
//Person（）构造器定义了`this`指针，指向了其实例本身
this.age = 0;

setInterval(function growUp() {
//在non-strict模式下，growUp()方法定义了‘this’作为一个全局的对象。其
//不同于Person()构造器生成的‘this’指针
this.age++;
}, 1000);
}
var p = new Person();

在ECMAScript 3/5中, 这个this的指针问题可以通过显示的制定this到一个变量，从而把Person()构造器生成的实例this指针，引入到函数中，具体写完如下：

function Person() {
var that = this;
that.age = 0;

setInterval(function growUp() {
// The callback refers to the `that` variable of which
// the value is the expected object.
//这个回调函数引用了`that`变量，其值就代表的是当前对象，而不是一个全局的     //一个this对象
that.age++;
}, 1000);
}

这种写完有点啰嗦和繁杂，那么有没有更为简洁的方式呢？直到ES6出现了箭头函数，才彻底的解决这个问题。下面让我们看看ES6的箭头函数如何写的。

unction Person(){
this.age = 0;

setInterval(() => {
// |this| 自动的指向当前Person的构造器生成的Person实例
//是不是感觉很简洁
this.age++;
}, 1000);
}

var p = new Person();

3. 样例

3.1 箭头函数作为一个方法

'use strict';
var obj = {
i: 10,
b: () => console.log(this.i, this),
c: function() {
console.log(this.i, this);
}
}
obj.b(); // prints undefined, Window {...} (or the global object)
obj.c(); // prints 10, Object {...}

3.2 通过call 或者 apply调用

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));         // This would log to 2
console.log(adder.addThruCall(1)); // This would log to 2 still

3.3 更多的例子

// An empty arrow function returns undefined
let empty = () => {};

(() => 'foobar')();
// Returns "foobar"
// (this is an Immediately Invoked Function Expression
// see 'IIFE' in glossary)

var simple = a => a > 15 ? 15 : a;
simple(16); // 15
simple(10); // 10

let max = (a, b) => a > b ? a : b;

// Easy array filtering, mapping, ...

var arr = [5, 6, 13, 0, 1, 18, 23];

var sum = arr.reduce((a, b) => a + b);
// 66

var even = arr.filter(v => v % 2 == 0);
// [6, 0, 18]

var double = arr.map(v => v * 2);
// [10, 12, 26, 0, 2, 36, 46]

// More concise promise chains
promise.then(a => {
// ...
}).then(b => {
// ...
});

// Parameterless arrow functions that are visually easier to parse
setTimeout( () => {
console.log('I happen sooner');
setTimeout( () => {
// deeper code
console.log('I happen later');
}, 1);
}, 1);