一、概述
箭头函数是指经由过程=>语法定义的函数。JS编程中常常定义一些短小的匿名函数，运用箭头函数语法可使得这类函数的定义越发简约。
// ES3/5体式格局
var fun1 = function(x, y) {
return x + y;
}
var arr1 = [1,2,3].map(function(item){
return item * item;
})
// 箭头函数体式格局
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}假如有且只要一个形参，则能够省略括号，简写为：
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 () {
this = _this; // 修正内部的this
console.log(this.name);
};
}
};所以如许call，apply，bind也就没法修正箭头函数的this值的。
3.2 箭头函数“不具有自身的arguments变量”
跟this变量相似箭头函数也“不具有自身的arguments变量”，道理跟this相似。
总结一句话：箭头函数是为了特别的运用场景（即更轻易的定义和运用匿名函数），它的这些特征也是为了轻易其运用。
四、运用限定
4.1 不能用new 操纵符
对箭头函数运用new操纵符会抛TypeError非常。
var A = () => {}
var a = new A(); //抛非常 Uncaught TypeError: A is not a constructor即箭头函数不能作为组织函数，其也不具有prototype属性。缘由应当是其内部的this变量被重写了，不能作为组织函数天经地义。然则箭头函数也是函数：
var a = () => {};
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对象
}总结一句话：箭头函数虽然写起了比较爽，但不能滥用，它是有特别运用场景的。要晓得什么时刻不该用。
