從-1開始的ES6探索之旅01：顏文字成精的箭頭函數 上篇 - 大哥，你指哪呢？

舒適提示：做者的爬坑記錄，對你等大神徹底沒有價值，別在我這浪費生命
舒適提示-續：大家要非得看，我也攔不住，可是至少得準備個支持ES6的Chrome瀏覽器吧？

以前在某些大神的代碼中出現一串神祕符號相似於num => console.log(num)
看的我瑟瑟發抖，心想你跟我鬧着玩呢？這段代碼要是能運行，簡直是顏文字成精了

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

後來知道這就是ES6中的重要特性，箭頭函數了

箭頭函數怎麼用

首先看看定義，和基礎用法

箭頭函數表達式的語法比函數表達式更 短，而且不綁定本身的this，arguments，super或 new.target。這些函數表達式最適合用於非方法函數，而且它們不能用做構造函數。

//基礎語法

(參數1, 參數2, …, 參數N) => {函數聲明}
(參數1, 參數2, …, 參數N) => 表達式（單一）
//至關於：(參數1, 參數2, …, 參數N) =>{ return表達式}

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

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

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

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

回過頭來，再看看怎麼使用，咱們有這樣幾個函數

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

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

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

能夠用箭頭函數改寫爲

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

是否是很酷，三行變一行
說的明白點，首先，經過定義的方式，不難看出箭頭函數必定是一個匿名函數，例子中的用法是把箭頭函數賦值給變量，看成通常方法使用，再有箭頭左邊的是這個函數的參數而箭頭右邊就是函數體，總的來講若是隻有一個參數，或者函數體中只有一行表達式，那麼不管是參數的小括號，仍是函數體的大括號均可以直接省略，而沒有參數的時候則須要寫上一對小括號

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

在使用中要注意一點

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

舉個例子

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

那麼箭頭函數具體有什麼用呢？

固然是用起來方便了

在上文中，咱們能夠明顯的感受到使用箭頭函數縮減了很多的代碼量，並且一旦熟悉了其使用，閱讀代碼也更加方便明確
上文的例子，是將箭頭函數賦值給變量看成普通方法來使用，而在我我的的開發過程當中，這麼使用的狀況基本上沒有…正如定義中所說

這些函數表達式最適合用於非方法函數

在這點上，能夠吧箭頭函數看成匿名函數來使用

個人理解中，箭頭函數這個概念應該弱化函數這個概念，把它理解爲一個普通的表達式，其實更方便平常的使用
在平常的開發中，有沒有明明不須要定義函數，卻還得寫function的地方呢，固然有了那就是在回調函數的使用中

以下面這個例子

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

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

其中對getNum()的調用就能夠改寫爲

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

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

this？哪一個？怎麼又是你！

起飛以前還須要明白箭頭函數的一個特徵，正如定義中後半句寫的

不綁定本身的this，arguments，super或 new.target

先無論arguments,super,new.target

this我但是認識你！，在函數中對this的使用必定要當心，稍不注意就會懵逼，在以前一篇文章中我曾經梳理過關於this的相關坑 javascript對象不徹底探索記錄01：this! which？- lskrat複習一下大概一句話歸納，函數中的this指的是調用該函數的對象

而回過頭來看箭頭函數，所謂的不綁定本身的this意義就是定義中的

箭頭函數不會建立本身的this；它使用封閉執行上下文的this值。
源自MDN Web docs - Web技術文檔／javascript／箭頭函數

換句話說，箭頭函數中的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

這不正是咱們想要的結果嗎？！
箭頭函數中的this妥妥的指向了這個對象，跟誰調用它徹底無關，雖然很爽，可是這也會出現一些問題，這就致使編寫不一樣類型函數時對this的使用會形成混淆
我是以爲沒辦法，只能經過對基礎原理的深透理解和開發的經驗來回避了

我的在面對這個問題時，仍是我剛纔說的能夠不要把箭頭函數看做函數就把它理解爲普通表達式，這樣也能方便的理解其對於this的解釋方式了

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

---

無聊的話：新年第一文，水平依舊幼稚，但願新的一年，緊密團結在一箇中心兩個基本點周圍開展工做！能有所進步！
無聊的話-續：恭喜我團17年破百萬，上東蛋，獲大獎