箭头函数是ES6中新增的特性，因其在语言上的简洁性，相信不少人都很是喜欢使用它。对于初学者来讲，对于箭头函数的熟练使用与深入理解须要一个过程。本文总结一下普通函数与箭头函数的区别，但愿可以使这一过程加速。es6
ES6 容许使用“箭头”（=>）定义函数。具体的定义，能够看下面的例子。面试
var f = v => v
// 等同于
var f = function (v) {
return v
}
能够看出，定义箭头函在数语法上要比普通函数简洁得多。箭头函数省去了function关键字，采用箭头=>来定义函数。函数的参数放在=>前面的括号中，函数体跟在=>后的花括号中。数组
一、若是箭头函数没有参数，直接写一个空括号便可。app
var f = () => 5
// 等同于
var f = function () { return 5 }
二、若是箭头函数的参数只有一个，也能够省去包裹参数的括号。函数
var f = v => v
// 等同于
var f = function (v) {
return v
}
三、若是箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中便可。学习
var sum = (num1, num2) => num1 + num2
// 等同于
var sum = function(num1, num2) {
return num1 + num2
}
一、若是箭头函数的函数体只有一句代码，就是简单返回某个变量或者返回一个简单的JS表达式，能够省去函数体的大括号{ }。this
var f = v => v
二、若是箭头函数的函数体只有一句代码，就是返回一个对象，要使用（）.net
// 用小括号包裹要返回的对象，不报错
let getTempItem = id => ({ id: id, name: "Temp" });
// 但毫不能这样写，会报错。
// 由于对象的大括号会被解释为函数体的大括号
let getTempItem = id => { id: id, name: "Temp" };
三、若是箭头函数的函数体只有一条语句而且不须要返回值（最多见是调用一个函数），能够给这条语句前面加一个void关键字prototype
let fn = () => void doesNotReturn()
一、箭头函数能够与变量解构结合使用。能够用在请求接口时，只接受的返回数据中须要的字段。rest
const full = ({ first, last }) => first + ' ' + last;
// 等同于
function full(person) {
return person.first + ' ' + person.last;
}
二、箭头函数能够简化回调函数。
// 正常函数写法
[1,2,3].map(function (x) {
return x * x;
});
// 箭头函数写法
[1,2,3].map(x => x * x);
三、rest 参数与箭头函数结合简化开发。
const numbers = (...nums) => nums; numbers(1, 2, 3, 4, 5) // [1,2,3,4,5] const headAndTail = (head, ...tail) => [head, tail]; headAndTail(1, 2, 3, 4, 5) // [1,[2,3,4,5]]
一、箭头函数没有原型prototype
let a = () =>{};
console.log(a.prototype); // undefined
二、箭头函数不会建立本身的this
箭头函数不会建立本身的this，因此它没有本身的this，它只会从本身的做用域链的上一层继承this。
箭头函数没有本身的this，它会捕获本身在定义时（注意，是定义时，不是调用时）所处的外层执行环境的this，并继承这个this值。因此，箭头函数中this的指向在它被定义的时候就已经肯定了，以后永远不会改变。
var id = 'Global';
function fun1() {
// setTimeout中使用普通函数
setTimeout(function(){
console.log(this.id);
}, 2000);
}
function fun2() {
// setTimeout中使用箭头函数
setTimeout(() => {
console.log(this.id);
}, 2000)
}
fun1.call({id: 'Obj'}); // 'Global'
fun2.call({id: 'Obj'}); // 'Obj'
三、不能修改箭头函数的this指向
因为箭头函数的this定义时就已经肯定且永远不会改变。因此使用这些方法永远也改变不了箭头函数this的指向，虽然这么作代码不会报错。
var id = 'Global';
// 箭头函数定义在全局做用域
let fun1 = () => {
console.log(this.id)
};
fun1(); // 'Global'
// this的指向不会改变，永远指向Window对象
fun1.call({id: 'Obj'}); // 'Global'
fun1.apply({id: 'Obj'}); // 'Global'
fun1.bind({id: 'Obj'})(); // 'Global'
四、箭头函数不能做为构造函数使用
咱们先了解普通函数new构造函数的步骤：
JS`内部首先会先生成一个对象。this指向该对象。this。可是箭头函数没有本身的this，它的this实际上是继承了外层执行环境中的this，且this指向永远不会随在哪里调用、被谁调用而改变，因此箭头函数不能做为构造函数使用，或者说构造函数不能定义成箭头函数，不然用new调用时会报错！
let Fun = (name, age) => {
this.name = name;
this.age = age;
};
// 报错
let p = new Fun('cao', 24)
五、箭头函数没有本身的arguments
箭头函数没有本身的arguments对象。在箭头函数中访问arguments实际上得到的是外层局部（函数）执行环境中的值。
除了arguments、this如下两个变量在箭头函数之中也是不存在的，指向外层函数的对应变量：super、new.target。
(1) 箭头函数的this指向全局对象，会报arguments未声明的错误。
let b = () => {
console.log(arguments);
};
b(1, 2, 3, 4); // Uncaught ReferenceError: arguments is not defined
(2) 箭头函数的this若是指向普通函数,它的argumens继承于该普通函数。
function bar() {
console.log(arguments); // ['bar']
bb('bb');
function bb() {
console.log(arguments); // ["bb"]
let a = () => {
console.log(arguments); // ["bb"]
};
a('箭头函数的参数'); // this指向bb
}
}
bar('bar');
能够在箭头函数中使用rest参数代替arguments对象，来访问箭头函数的参数列表！！
ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不须要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
let a = (a, ...bcd) => {
console.log(a, bcd); // 1 [2, 3, 4]
};
a(1, 2, 3, 4);
上面的例子除了第一个参数肯定外，用一个变量接收其余的变量。固然你也可使用一个变量接收全部的参数。
一、rest 参数必须是最后一个参数，不然会报错。
// 报错
function f(a, ...b, c) {
// ...
}
二、rest 参数没有函数的length属性。
(function(a) {}).length // 1
(function(...a) {}).length // 0
(function(a, ...b) {}).length // 1
六、箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名
function func1(a, a) {
console.log(a, arguments); // 2 [1,2]
}
var func2 = (a,a) => {
console.log(a); // 报错：在此上下文中不容许重复参数名称
};
func1(1, 2); func2(1, 2);
七、语法更加简洁、清晰
从上面的基本语法示例中能够看出，箭头函数的定义要比普通函数定义简洁、清晰得多，很快捷。
本段摘自 阮一峰ES6入门了解详情可点击参考。
一、定义对象的方法，且该方法内部包括this。
const cat = {
lives: 9,
jumps: () => {
this.lives--;
}
}
上面代码中，cat.jumps()方法是一个箭头函数，这是错误的。调用cat.jumps()时，若是是普通函数，该方法内部的this指向cat；若是写成上面那样的箭头函数，使得this指向全局对象，所以不会获得预期结果。这是由于对象不构成单独的做用域，致使jumps箭头函数定义时的做用域就是全局做用域。
二、须要动态this的时候，不该使用箭头函数。
var button = document.getElementById('press');
button.addEventListener('click', () => {
this.classList.toggle('on');
});
上面代码运行时，点击按钮会报错，由于button的监听函数是一个箭头函数，致使里面的this就是全局对象。若是改为普通函数，this就会动态指向被点击的按钮对象。
### 箭头函数的使用
(,)分隔，包裹在括号中便可。prototype。this。this指向。arguments。（super、new.target也没有）。this意外指向和代码的可读性。注意事项：
rest参数须要放在最后。箭头函数是ES6重点知识了，不论是在面试上，仍是在平时开发中，都是常常会被问道且使用到的知识。所以，咱们应该系统的去掌握和深刻理解它。但愿还不是很熟练的童鞋要抓紧时间学习，它值得咱们你们花时间去整理和总结。