一、基本語法
1.定義函數(shù)
定義箭頭函在數(shù)語法上要比普通函數(shù)簡潔得多，ES6中允許使用箭頭
=>
來定義箭頭函數(shù)惧笛，箭頭函數(shù)省去了 function 關(guān)鍵字葛菇，函數(shù)的參數(shù)放在=>前面的括號中甘磨，函數(shù)體跟在=>后的花括號中。
// 箭頭函數(shù)
let fun = (name) => {
return `Hello ${name} !`;
};
// 普通函數(shù)
let fun = function (name) {
return `Hello ${name} !`;
};
2.箭頭函數(shù)的參數(shù)
如果箭頭函數(shù)沒有參數(shù)眯停，直接寫一個空括號即可济舆。
如果箭頭函數(shù)的參數(shù)只有一個，也可以省去包裹參數(shù)的括號庵朝。
如果箭頭函數(shù)有多個參數(shù)吗冤，將參數(shù)依次用逗號(，)分隔九府，包裹在括號中即可椎瘟。
// 沒有參數(shù)
let fun1 = () => {
console.log('dingFY');
};
// 只有一個參數(shù)，可以省去參數(shù)括號
let fun2 = name => {
console.log(`Hello ${name} !`)
};
// 有多個參數(shù)侄旬，逗號分隔
let fun3 = (val1, val2, val3) => {
return [val1, val2, val3];
};復(fù)制代碼
3.箭頭函數(shù)的函數(shù)體
如果箭頭函數(shù)的函數(shù)體只有一句代碼肺蔚，就是簡單返回某個變量或者返回一個簡單的JS表達(dá)式，可以省去函數(shù)體的大括號{ }儡羔。
let fun = val => val;
// 等同于
let fun = function (val) { return val };
let sum = (num1, num2) => num1 + num2;
// 等同于
let sum = function(num1, num2) {
return num1 + num2;
};
如果箭頭函數(shù)的函數(shù)體只有一句代碼宣羊，就是返回一個對象，可以像下面這樣寫：
// 用小括號包裹要返回的對象汰蜘，不報錯
let getTempItem = id => ({ id: id, name: "Temp" });
// 但絕不能這樣寫仇冯，會報錯，因為對象的大括號會被解釋為函數(shù)體的大括號
let getTempItem = id => { id: id, name: "Temp" };復(fù)制代碼
如果箭頭函數(shù)的函數(shù)體只有一條語句并且不需要返回值（最常見是調(diào)用一個函數(shù)）族操，可以給這條語句前面加一個void關(guān)鍵字
let fun = () => void doesNotReturn();
4.this指向
箭頭函數(shù)體內(nèi)的this對象苛坚，就是定義該函數(shù)時所在的作用域指向的對象，而不是使用時所在的作用域指向的對象色难。
普通函數(shù)的列子：
var name = 'window'; // 其實是window.name = 'window'
var A = {
name: 'A',
sayHello: function(){
console.log(this.name)
}
}
A.sayHello();// 輸出A
var B = {
name: 'B'
}
A.sayHello.call(B);//輸出B
A.sayHello.call();//不傳參數(shù)指向全局window對象泼舱，輸出window.name也就是window
從上面可以看到，sayHello這個方法是定義在A對象中的枷莉，當(dāng)當(dāng)我們使用call方法娇昙，把其指向B對象，最后輸出了B笤妙；可以得出冒掌，sayHello的this只跟使用時的對象有關(guān)。
改造一下：
var name = 'window';
var A = {
name: 'A',
sayHello: () => {
console.log(this.name)
}
}
A.sayHello();// 還是以為輸出A ? 錯啦危喉，其實輸出的是window
我相信在這里宋渔，大部分同學(xué)都會出錯，以為sayHello是綁定在A上的辜限，但其實它綁定在window上的，那到底是為什么呢严蓖？
一開始薄嫡，我重點標(biāo)注了“該函數(shù)所在的作用域指向的對象”氧急，作用域是指函數(shù)內(nèi)部，這里的箭頭函數(shù)毫深，也就是sayHello吩坝，所在的作用域其實是最外層的js環(huán)境，因為沒有其他函數(shù)包裹哑蔫；然后最外層的js環(huán)境指向的對象是winodw對象钉寝，所以這里的this指向的是window對象。
那如何改造成永遠(yuǎn)綁定A呢：
var name = 'window';
var A = {
name: 'A',
sayHello: function(){
var s = () => console.log(this.name)
return s//返回箭頭函數(shù)s
}
}
var sayHello = A.sayHello();
sayHello();// 輸出A
var B = {
name: 'B';
}
sayHello.call(B); //還是A
sayHello.call(); //還是A
OK闸迷，這樣就做到了永遠(yuǎn)指向A對象了嵌纲，我們再根據(jù)“該函數(shù)所在的作用域指向的對象”來分析一下：
該函數(shù)所在的作用域：箭頭函數(shù)s 所在的作用域是sayHello,因為sayHello是一個函數(shù)。
作用域指向的對象：A.sayHello指向的對象是A腥沽。
二逮走、箭頭函數(shù)與普通函數(shù)的區(qū)別
1.語法更加簡潔、清晰
從上面的箭頭函數(shù)基本語法示例中可以看出今阳，箭頭函數(shù)的定義要比普通函數(shù)定義簡潔师溅、清晰得多，很快捷盾舌。
2.箭頭函數(shù)沒有 prototype (原型)墓臭，所以箭頭函數(shù)本身沒有this???????
// 箭頭函數(shù)
let a = () => {};
console.log(a.prototype); // undefined
// 普通函數(shù)
function a() {};
console.log(a.prototype); // {constructor:f}
3.箭頭函數(shù)不會創(chuàng)建自己的this
箭頭函數(shù)沒有自己的this，箭頭函數(shù)的this指向在定義（注意：是定義時妖谴，不是調(diào)用時）的時候繼承自外層第一個普通函數(shù)的this窿锉。所以，箭頭函數(shù)中 this 的指向在它被定義的時候就已經(jīng)確定了窖维，之后永遠(yuǎn)不會改變榆综。
let obj = {
a: 10,
b: () => {
console.log(this.a); // undefined
console.log(this); // Window {postMessage: ?, blur: ?, focus: ?, close: ?, frames: Window, …}
},
c: function() {
console.log(this.a); // 10
console.log(this); // {a: 10, b: ?, c: ?}
}
}
obj.b();
obj.c();
4.call | apply | bind 無法改變箭頭函數(shù)中this的指向
call | apply | bind方法可以用來動態(tài)修改函數(shù)執(zhí)行時this的指向，但由于箭頭函數(shù)的this定義時就已經(jīng)確定且永遠(yuǎn)不會改變铸史。所以使用這些方法永遠(yuǎn)也改變不了箭頭函數(shù)this的指向鼻疮。
var id = 10;
let fun = () => {
console.log(this.id)
};
fun(); // 10
fun.call({ id: 20 }); // 10
fun.apply({ id: 20 }); // 10
fun.bind({ id: 20 })(); // 10復(fù)制代碼
5.箭頭函數(shù)不能作為構(gòu)造函數(shù)使用
我們先了解一下構(gòu)造函數(shù)的new都做了些什么？簡單來說琳轿，分為四步： ① JS內(nèi)部首先會先生成一個對象判沟； ② 再把函數(shù)中的this指向該對象； ③ 然后執(zhí)行構(gòu)造函數(shù)中的語句崭篡； ④ 最終返回該對象實例挪哄。
但是！琉闪！因為箭頭函數(shù)沒有自己的this迹炼，它的this其實是繼承了外層執(zhí)行環(huán)境中的this，且this指向永遠(yuǎn)不會隨在哪里調(diào)用、被誰調(diào)用而改變斯入，所以箭頭函數(shù)不能作為構(gòu)造函數(shù)使用砂碉，或者說構(gòu)造函數(shù)不能定義成箭頭函數(shù)，否則用new調(diào)用時會報錯刻两！
let Fun = (name, age) => {
this.name = name;
this.age = age;
};
// 報錯
let p = new Fun('dingFY', 24);復(fù)制代碼
6.箭頭函數(shù)不綁定arguments增蹭，取而代之用rest參數(shù)...代替arguments對象，來訪問箭頭函數(shù)的參數(shù)列表
箭頭函數(shù)沒有自己的arguments對象磅摹。在箭頭函數(shù)中訪問arguments實際上獲得的是外層局部（函數(shù)）執(zhí)行環(huán)境中的值滋迈。
// 普通函數(shù)
function A(a){
console.log(arguments);
}
A(1,2,3,4,5,8); // [1, 2, 3, 4, 5, 8, callee: ?, Symbol(Symbol.iterator): ?]
// 箭頭函數(shù)
let B = (b)=>{
console.log(arguments);
}
B(2,92,32,32); // Uncaught ReferenceError: arguments is not defined
// rest參數(shù)...
let C = (...c) => {
console.log(c);
}
C(3,82,32,11323); // [3, 82, 32, 11323]復(fù)制代碼
