箭头函数是ECMAScript 6最受关注的更新内容之一。它引入了一种用「箭头」（=>）来定义函数的新语法，它…它碉堡了~。箭头函数与传统的JavaScript函数主要区别在于以下几点：
1.对 this 的关联。函数内置 this 的值，取决于箭头函数在哪儿定义，而非箭头函数执行的上下文环境。
2.new 不可用。箭头函数不能使用 new 关键字来实例化对象，不然会报错。
3.this 不可变。函数内置 this 不可变，在函数体内整个执行环境中为常量。
4.没有arguments对象。更不能通过arguments对象访问传入参数。只能使用显式命名或其他ES6新特性来完成。
这些差异的存在是有理可循的。首先，对this的绑定是JavaScript错误的常见来源之一。容易丢失函数内置数值，或得出意外结果。其次，将箭头函数限制为使用固定this引用，有利于JavaScript引擎优化处理。
一、语法
箭头函数的语法很简单，定义自变量，然后是箭头和函数主体。自变量和主题因使用不同可以采用更简洁的格式。下面这个例子就是采用传一个参数和返回一个值的箭头函数。
复制代码 代码如下:
var reflect = value => value;
// 等同于：
var reflect = function(value) {
return value;
};
可以看出，传一个参数就直接写就好了，不用加小括号。箭头指向函数主体，不过函数主体也只是简单的一条返回语句，所以也不用加大括号。函数构造完毕赋给reflect加以引用。
若需传入多个参数，则应加上小括号。例如：
复制代码 代码如下:
var sum = (num1, num2) => num1 + num2;
// 等同于：
var sum = function(num1, num2) {
return num1 + num2;
};
sum()方法为两参数相加并回传结果。跟前一个例子的唯一区别是传入了两个参数，所以要用小括号括起来。它与传统函数一样，括号内由逗号将传入参数分开。同样，如果该函数不需要传入参数，那也要以空括号来代替。
复制代码 代码如下:
var sum = () => 1 + 2;
// 等同于：
var sum = function() {
return 1 + 2;
};
若你想使用标准的函数体，或者函数体内可能有更多的语句要执行，则要用大括号将函数体括起来，并明确定义返回值。例如：
复制代码 代码如下:
var sum = (num1, num2) => { return num1 + num2; }
//等同于：
var sum = function(num1, num2) {
return num1 + num2;
};
大括号内的部分基本等同于传统函数，除了arguments参数不可用外。
因为大括号是函数主体的标志。而箭头函数若要返回自定义对象的话，就必须用小括号把该对象括起来先。例如：
复制代码 代码如下:
var getTempItem = id = > ({
id: id,
name: "Temp"
});
// 等同于：
var getTempItem = function(id) {
return {
id: id,
name: "Temp"
};
};
上例可以看出，用小括号包含大括号则是对象的定义，而非函数主体。
二、使用
JavaScript最常见错误之一就是函数内部this关联。因为this是根据函数当前的执行环境去取值的，这样就会在调用时产生误解，以导致对其他的不相关对象产生了影响。参见下例：
复制代码 代码如下:
var PageHandler = {
id: "123456",
init: function() {
document.addEventListener("click", function(event) {
this.doSomething(event.type); // error
}, false);
},
doSomething: function(type) {
console.log("Handling " + type + " for " + this.id);
}
};
在这段代码中，本意是想让PageHandler的init()方法用于构建交互作用，并在点击事件处理函数中调用this.doSomething()。但是代码并未按设计初衷来执行，运行时this指向了全局对象而不是PageHandler，从而造成this.doSomething()调用无效出现报错，因为全局对象中不存在doSomething方法。
当然，可以在函数中使用bind()将this与PageHandler明确关联起来，见下：
复制代码 代码如下: