Description
一、概述
JS编程中经常定义一些短小的匿名函数（一般作为callback），使用箭头函数语法可使得这类函数的定义更加简洁，方便。
// ES3/5方式
var fun1 = function(x, y) {
return x + y;
}
var arr1 = [1,2,3].map(function(item){
return item * item;
})
// ES6 箭头函数方式
var fun2 = (x, y) => x + y;
var arr2 = [1,2,3].map((item) => item * item)少些了不少代码，看着也简洁许多，有木有。
二、语法
- 一般的语法格式：
(param1, param2, …, paramN) => { 语句 } 注意参数部分和箭头=>之间不能换行:
// 正确
var add1 = (x, y) => x + y;
// 正确
var add2 = (x,
y) => x + y;
// 正确(=>后面不会自动插入分号的)
var add3 = (x, y) =>
x + y;
// 语法错误 Uncaught SyntaxError: Unexpected token =>
var add4 = (x, y)
=> x + y;
// 语法错误 Uncaught SyntaxError: Unexpected token =>
var add5= x
=> x + 2;上例中add4定义会报错，原因在解析的时候(x, y)后面会自动插入分号，所以当解析=>时就报错了。
- 如果花括号里只包含一个
return语句，则可以简写为：因为对象字面量也是用花括号表示的，所以当表达式是个对象字面量时需要用括号包住：(param1, param2, …, paramN) => 表达式 // 等价于 => { return 表达式; }
var a = p => ({a: p}) // 不能写成：p => {a: p}
还见过科幻的写法：
// 第一眼感觉有点迷人
var pipe = fn => value => fn(value);
// 等价
var pipe = (fn) => {
return value => {
return fn(value);
}
}- 如果有且只有一个形参，则可以省略括号，简写为：
param => {语句} // 等价于 （param） => {语句}
如上例中的fun1定义：
var fun1 = （x, y) => x + y;
// 等价于
var fun1 = (x, y) => { return x + y; }三、特性
箭头函数不仅仅更方便定义匿名函数，它还具有一些特性，这些使得箭头函数在使用上也更方便。
匿名函数一般定义在一个函数内部，匿名函数的函数体内是可以访问外部函数定义的局部变量的（闭包），但是外部函数还有两个特殊的变量：this和arguments。因为每个函数都具有自己的this和arguments变量，所以当内部函数访问外部函数这两个变量时，我们一般采用这种方式：
var outer = {
name: 'outer',
say: function() {
var _arguments = arguments, // 先把arguments赋值给局部变量_arguments
_this = this; // 先把this赋值给局部变量_this
function inner() {
console.log(arguments.length); // 内部函数的arguments
console.log(_arguments.length); // 通过局部变量_arguments访问外部函数的arguments变量
console.log(this.name); // 内部函数的this
console.log(_this.name); // 通过局部变量_this访问外部函数的this变量
}
return inner;
}
}但是箭头函数体可以直接访问外部函数的this和arguments变量！！！逆天啊。
3.1 箭头函数“不具有自己的this变量”
1. 特性语法
- 箭头函数体内
this变量指向外部函数的this。如上例可以写为：
var outer = {
name: 'outer',
say: function() {
return () => { console.log(this.name); } // 外部函数outer的this，
}
}- 并且通过
call，apply，bind函数也是无法修改箭头函数的this变量的。
var outer = {
name: 'outer',
say: function() {
var inner = () => { console.log(this.name); } // 依旧外部函数outer的this，
return inner.bind({name: 'inner'}) //
}
}2 特性原理
箭头函数并不是真的不具有自己的this变量，只是它内部this变量的访问被修改了。
var outer = {
name: 'outer',
say: function() {
return () => { console.log(this.name); } // 外部函数outer的this，
}
}
// 等价于：
var outer = {
name: 'outer',
say: function say() {
var _this = this; // 定义个局部变量_this
return function () {
console.log(_this.name); // this变量的访问被修改了
};
}
};所以这样call，apply，bind也就无法修改箭头函数的this值的。
3.2 箭头函数“不具有自己的arguments变量”
跟this变量类似箭头函数也“不具有自己的arguments变量”，原理跟this类似。
var outer = {
name: 'outer',
say: function() {
return () => { console.log(arguments); } // 外部函数outer的arguments，
}
}
// 等价于：
var outer = {
name: "outer",
say: function say() {
var _arguments = arguments;
return function () {
console.log(_arguments);
};
}
};总结：
- 箭头函数是为了特殊的使用场景（即更方便的定义和使用匿名函数），它的这些特性也是为了方便其使用；
- 箭头函数并不是新语法，只是函数定义的语法糖。
四、使用限制
4.1 不能用new 操作符
箭头函数没有自己的"this"，也没有prototype属性，是不能通过new操作的，并且为了防止误用JS对箭头函数使用new操作符会抛TypeError异常。
箭头函数不能通过new关键字调用原因
var A = () => {}
var a = new A(); //抛异常 Uncaught TypeError: A is not a constructor
var a = () => {};
console.log('prototype' in a) // false但是箭头函数也是函数：
var a = () => {};
console.log('prototype' in a) // false
console.log(a instanceof Function); // true总结一句话：箭头函数是不能作为构造函数的特殊函数。
4.2 跟其他运算符一起用
箭头函数=>不是运算符，当箭头函数作为右值跟其他运算符一起运算操作时其具有特殊的解析顺序
function func(callback) {
// 一般函数方式
callback = callback || function() {} // 没问题
// 报错了，语法错误：Uncaught SyntaxError: Unexpected token )
callback = callback || () => {};
// 这样写就对了
callback = callback || (() => {});
}总结一句话：箭头函数虽然不是运算符，但其写法和解析有点像运算符的操作。当箭头函数作为右值参与其他运算符的运算时记得加上括号。
4.3 需要使用自己this的函数
箭头函数"没有自己的this"，所以它不适用那些需要使用自己this的场景（如成员方法，事件回调函数等）
// 成员方法
var outer = {
name: 'outer',
say: () => {
// 这里的this不是outer，但是我们期望在成员方法的this应该指向对象本身
console.log(this.name);
}
}
// 事件处理函数
document.getElementById('test').onclick = function() {
console.log(this); // 这里的this不是触发事件的DOM对象
}4.4 箭头函数不能用作函数生成器
yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）
主要是语法格式没法定义生成器函数function*。
总结一句话：箭头函数虽然写起了比较爽，但不能滥用，它是有特殊应用场景的。要懂得什么时候不该用。