摘要：基礎(chǔ)語法參數(shù)參數(shù)參數(shù)函數(shù)聲明參數(shù)參數(shù)參數(shù)表達(dá)式單一相當(dāng)于參數(shù)參數(shù)參數(shù)表達(dá)式當(dāng)只有一個參數(shù)時，圓括號是可選的單一參數(shù)函數(shù)聲明單一參數(shù)函數(shù)聲明沒有參數(shù)的函數(shù)應(yīng)該寫成一對圓括號。

溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命
溫馨提示-續(xù)：你們要非得看，我也攔不住，但是至少得準(zhǔn)備個支持ES6的Chrome瀏覽器吧？

之前在某些大神的代碼中出現(xiàn)一串神秘符號類似于num => console.log(num)
看的我瑟瑟發(fā)抖，心想你跟我鬧著玩呢？這段代碼要是能運行，簡直是顏文字成精了

可是顏文字可就真成精了／前提是在支持ES6的瀏覽器，或代碼被編譯／翻譯過

后來知道這就是ES6中的重要特性，箭頭函數(shù)了

首先看看定義，和基礎(chǔ)用法

箭頭函數(shù)表達(dá)式的語法比函數(shù)表達(dá)式更短，并且不綁定自己的this，arguments，super或 new.target。這些函數(shù)表達(dá)式最適合用于非方法函數(shù)，并且它們不能用作構(gòu)造函數(shù)。

//基礎(chǔ)語法

(參數(shù)1, 參數(shù)2, …, 參數(shù)N) => {函數(shù)聲明}
(參數(shù)1, 參數(shù)2, …, 參數(shù)N) => 表達(dá)式（單一）
//相當(dāng)于：(參數(shù)1, 參數(shù)2, …, 參數(shù)N) =>{ return表達(dá)式}

// 當(dāng)只有一個參數(shù)時，圓括號是可選的：
(單一參數(shù)) => {函數(shù)聲明}
單一參數(shù) => {函數(shù)聲明}

// 沒有參數(shù)的函數(shù)應(yīng)該寫成一對圓括號。
() => {函數(shù)聲明}

源自MDN Web docs - Web技術(shù)文檔／javascript／箭頭函數(shù)

看看定義，箭頭函數(shù)就是突出一個短字，短就代表簡單，方便，效率高，這不正是我輩程序員畢生最求的嗎把一堆代碼，改成短短一行／讓人不一定看的懂，不正是大神們最流行的裝逼方式嗎

回過頭來，再看看怎么使用，我們有這樣幾個函數(shù)

function fn1(num){
    return console.log(num)
}

function fn2(a,b){
    return console.log(a,b)
}

function fn3(){
    return console.log(1)
}

可以用箭頭函數(shù)改寫為

var fn1 = num => console.log(num);//只有一個參數(shù)
var fn2 = (a,b) => console.log(a+b);//有多個參數(shù)
var fn3 = () => console.log(1);//沒有參數(shù)

是不是很酷，三行變一行
說的明白點，首先，通過定義的方式，不難看出箭頭函數(shù)一定是一個匿名函數(shù)，例子中的用法是把箭頭函數(shù)賦值給變量，當(dāng)作一般方法使用，再有箭頭左邊的是這個函數(shù)的參數(shù)而箭頭右邊就是函數(shù)體，總的來說如果只有一個參數(shù)，或者函數(shù)體中只有一行表達(dá)式，那么無論是參數(shù)的小括號，還是函數(shù)體的大括號都可以直接省略，而沒有參數(shù)的時候則需要寫上一對小括號

通俗的理解，就是為右側(cè)的表達(dá)式中的變量，指／=>派了值，而這個值就是左邊的參數(shù)，再把表達(dá)式返回，這樣理解起來就形象了，例如num => console.log(num)就是把箭頭左側(cè)的num指派到了右側(cè)表達(dá)式當(dāng)中

在使用中要注意一點

在一個簡寫體中，只需要一個表達(dá)式，并附加一個隱式的返回值。在塊體中，必須使用明確的return語句。
源自MDN Web docs - Web技術(shù)文檔／javascript／箭頭函數(shù)

舉個例子

var getNum = num => num+1;
var getNumBlock = num =>{
    num+1
}
console.log(getNum(1));//2
console.log(getNumBlock(1));//undefined

因為在num => num+1中使用了簡寫方法，所以會隱形的將num+1作為返回值，而在num =>{num+1;}中，因為使用了大括號包圍，使其成為了一個塊體，就需要我們定義return語句了，對其作出修改

var getNumBlock = num => {
    return num+1
}
console.log(getNumBlock(1))//2

那么箭頭函數(shù)具體有什么用呢？

在上文中，我們可以明顯的感覺到使用箭頭函數(shù)縮減了不少的代碼量，而且一旦熟悉了其使用，閱讀代碼也更加方便明確
上文的例子，是將箭頭函數(shù)賦值給變量當(dāng)作普通方法來使用，而在我個人的開發(fā)過程中，這么使用的情況基本上沒有…正如定義中所說

這些函數(shù)表達(dá)式最適合用于非方法函數(shù)

在這點上，可以吧箭頭函數(shù)當(dāng)作匿名函數(shù)來使用

我的理解中，箭頭函數(shù)這個概念應(yīng)該弱化函數(shù)這個概念，把它理解為一個普通的表達(dá)式，其實更方便日常的使用
在日常的開發(fā)中，有沒有明明不需要定義函數(shù)，卻還得寫function的地方呢，當(dāng)然有了那就是在回調(diào)函數(shù)的使用中

如下面這個例子

function getNum(num,callBack){
    let result = num + 1;
    callBack(result)
}

getNum(1,function(result){
    console.log(result)
})//2

其中對getNum()的調(diào)用就可以改寫為

getNum(1, result => console.log(result))//2

寫起來真的是自由的感覺，不但少些了很多代碼，看上去還更加易于理解了，簡直要起飛

起飛之前還需要明白箭頭函數(shù)的一個特征，正如定義中后半句寫的

不綁定自己的this，arguments，super或 new.target

先不管arguments,super,new.target

this我可是認(rèn)識你！，在函數(shù)中對this的使用一定要小心，稍不注意就會懵逼，在之前一篇文章中我曾經(jīng)梳理過關(guān)于this的相關(guān)坑 javascript對象不完全探索記錄01：this! which？- lskrat復(fù)習(xí)一下大概一句話概括，函數(shù)中的this指的是調(diào)用該函數(shù)的對象

而回過頭來看箭頭函數(shù)，所謂的不綁定自己的this意義就是定義中的

箭頭函數(shù)不會創(chuàng)建自己的this；它使用封閉執(zhí)行上下文的this值。
源自MDN Web docs - Web技術(shù)文檔／javascript／箭頭函數(shù)

換句話說，箭頭函數(shù)中的this就是它外面一層的this
舉個例子

var name = "outer"
var obj = {
    name : "inner",
    getName : function(){
        return function(){
            console.log(this.name)
        }
    },
    getNameByArrow : function(){
        return () => console.log(this.name)        
    }
}
obj.getName()();//outer
obj.getNameByArrow()();//inner

這不正是我們想要的結(jié)果嗎？！
箭頭函數(shù)中的this妥妥的指向了這個對象，跟誰調(diào)用它完全無關(guān)，雖然很爽，但是這也會出現(xiàn)一些問題，這就導(dǎo)致編寫不同類型函數(shù)時對this的使用會造成混淆
我是覺得沒辦法，只能通過對基礎(chǔ)原理的深透理解和開發(fā)的經(jīng)驗來回避了

個人在面對這個問題時，還是我剛才說的可以不要把箭頭函數(shù)看作函數(shù)就把它理解為普通表達(dá)式，這樣也能方便的理解其對于this的解釋方式了

能看到這的都被指了很久了0 0

無聊的話：新年第一文，水平依舊幼稚，希望新的一年，緊密團(tuán)結(jié)在一個中心兩個基本點周圍開展工作！能有所進(jìn)步！
無聊的話-續(xù)：恭喜我團(tuán)17年破百萬，上東蛋，獲大獎