正如其名，箭头函数由 “箭头”（=>）这种新的语法来定义。
箭头函数的特点
没有 this，rguments 绑定 -，this，argumentst 的值 由最近的不包含箭头函数的作用域决定。
不能被 new 调用 - 箭头函数内部没有 [[Construct]] 方法，因此不能当作构造函数使用。使用 new 调用箭头函数会抛出错误。
没有 prototype - 既然你不能使用 new 调用箭头函数，那么 prototype 就没有存在的理由。箭头函数没有 prototype 属性。
不能更改 this - this 的值在函数内部不能被修改。在函数的整个生命周期内 this 的值是永恒不变的。
箭头函数的语法
- 一个空的箭头函数
var doNothing = () => {};
// 等同于：
var doNothing = function() {};2 . 接收单个参数的箭头函数
var reflect = value => value;
// 等同于：
var reflect = function(value) {
return value;
};
当箭头函数只有一个参数时，该参数可以直接使用而不需要额外的语法。之后则是箭头和需要计算的表达式，即使没有书写 return 语句也会返回该参数。3 . 传入单个以上的参数，就需要用括号来包含它们
var sum = (num1, num2) => num1 + num2;
// 等同于：
var sum = function(num1, num2) {
return num1 + num2;
};4 . 当函数主体内包含一条以上表达式的时候，你需要用花括号显式地包裹函数
var sum = (num1, num2) => {
expression1；
expression2；
expression3；
return num1 + num2;
};
// 等同于：
var sum = function(num1, num2) {
expression1；
expression2；
expression3；
return num1 + num2;
};5 .如果你想返回一个对象时：
var getTempItem = id => ({ id: id, name: "Temp" });
// 等同于：
var getTempItem = function(id) {
return {
id: id,
name: "Temp"
};
};无this绑定
- 在学习Js的过程中间，基本上每个人都吃过this的苦头，总是纠结this到底是什么？
- 由于函数内部的 this 可以在调用时被上下文替换，所以操作了意想不到的对象的几率很大。考虑如下的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
<script>
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();
</script>
</body>
</html>
点击h1标签之后你会发现如下报错：
Uncaught TypeError: this.doSomething is not a function
出现问题是因为 this 指代的是调用该函数的对象（在本例中是 document）而不是PageHandler你可以显式地在函数上调用 bind() 来绑定 this 以便解决这个问题，像这样：
var PageHandler = {
id: "123456",
init: function() {
document.addEventListener("click", (function(event) {
this.doSomething(event.type); // 无错误发生
}).bind(this), false);
},
doSomething: function(type) {
console.log("Handling " + type + " for " + this.id);
}
虽然看起来有点奇怪，但是代码可以正常运行了。实际上我们创建了一个带有 this 绑定的新函数。为了避免额外函数的创建，更好的方式是使用箭头函数。
箭头函数没有 this 绑定，意味着this只能通过查找作用域链来确定。如果箭头函数被另一个不包含箭头函数的函数囊括，那么 this 的值和该函数中的 this 相等，否则 this 的值为 undefined。以下就是使用箭头函数重构的示例：
var PageHandler = {
id: "123456",
init: function() {
document.addEventListener("click",
event => this.doSomething(event.type), false); //这里的this就与箭头函数外面的init函数里面的this是一致的
},
doSomething: function(type) {
console.log("Handling " + type + " for " + this.id);
}
};