es6 - 箭頭函數

es6 - 箭頭函數

哇，箭頭函數...，聽起來好NB，可是若是你知道它是由於使用了=>這樣相似箭頭的符號 ，因此才叫箭頭函數。 瞬間感受：「呵，這名字起的...」。

es6增長了箭頭函數的特性固然不是爲了裝B，它能夠看做是js中函數的一次進化。

咱們知道，在js中，函數有着不同的地位，除了做爲普通函數外，它能夠用來構造自定義類型，做爲對象的方法，經過調用bind方法獲得一個新函數。在後三者的使用中，大多數狀況下都要用到一個特性 this。

函數中，this是動態綁定的，它的值是根據調用的上下文來肯定的，關於函數的4種使用方式，書中都已經有了詳細介紹，再也不贅述。可是，this在帶來強大能力的同時，也增長了編程錯誤的概率。即便是有經驗的開發者，在使用this時，也可能由於疏忽而致使錯誤，並且，它會讓代碼更加難以理解。

箭頭函數，能夠解決上面的問題。

並且，箭頭函數能夠寫的很是的簡潔。

語法

箭頭函數簡潔的語法

程序員很懶的，咱們熱衷於各類腳本語言，語法糖。不就是由於他們可以讓開發更有效率，讓代碼寫的更少，更爽嗎？箭頭函數簡化了函數的語法。

(arg1, arg2, ...) => {
    //...
}

上面是一個標準的箭頭函數的寫法，左邊的()中填入函數參數，右邊的{}中寫入執行語句。

當函數參數只有一個時，()能夠省略。 當右邊{}中只有單行語句時，{}能夠省略。可能有下面這種形式：

let square = x => x*x ;

它至關於普通函數的

let square = function(x){
    return x*x;
}

箭頭函數的用法有如下幾種：

let sum = (num1, num2) => num1 + num2 ; //做爲普通函數使用

let arr2 = [1,2,3,4].map( item => item*2 ); //做爲回調使用

(() => { //語句... })();                    //做爲當即執行的匿名函數使用

箭頭函數中的this

箭頭函數與普通函數最大的不一樣就是this，前面已經講過了，普通函數中this是根據上下文肯定的。而在箭頭函數中，沒有this綁定。

也就是說箭頭函數的this的值再也不根據調用時上下文肯定，而是像普通變量那樣根據定義時的做用域鏈進行查找。若是箭頭函數外部是一個非箭頭函數，箭頭函數內部this的值就與該函數一致。 若是箭頭函數外部是全局環境，那麼this的值就是全局對象 - window(瀏覽器環境)或global(node環境)。
好比：

var PageHandler = {
    id: '123456',
    init: function(){
        document.addEventListener("click",
            event => this.doSomething(event.type), false);
    },
    doSomething: function(type){
        console.log("Handling" + type + "for" + this.id);
    }
}

在上面這段代碼中，因爲箭頭函數中this與其外部init函數保持一致，所以，this保存的就是PageHandler對象的引用，因此能夠調用doSomething方法。

若是使用普通函數代替箭頭函數，那麼這樣使用this會致使錯誤，由於這時this指向的document對象。 通用的解決方法是在init中保存this的引用var _this = this，而後使用_this代替this。

箭頭函數的arguments

js函數中的arguments給了咱們操做函數參數極大的便捷和靈活性。 可是，同this同樣，在箭頭函數中，沒有arguments綁定。

箭頭函數中的arguments依然要根據定義時的做用域鏈進行查找。

雖然，箭頭函數中咱們沒法再使用arguments來操做函數參數， 可是咱們可使用es6中的剩餘參數特性來得到同之前arguments一樣的效果。好比：

let sum = (...rest) => console.log(rest.length)

注意事項

• 在使用箭頭函數的簡寫形式時，要注意一點：

let getData = () => {name: 'icode007', age: 27}; //會報錯

報錯的緣由是js把 =>右邊對象的{}當成了函數體的{}， 所以，要使用()把對象包裹起來

let getData = () => ({name: 'icode007', age: 27});

• 在箭頭函數中，不只僅是this，arguments沒有綁定。

一樣沒有綁定的還有super：es6特性，super指向當前對象的原型對象，至關於Object.getPrototypeOf(this).call(this)

new.target: es6特性，用於肯定函數的使用方式，若是做爲普通函數調用，該值等於undefined，若是做爲構造函數調用，該值指向新建立對象實例的構造器。

最佳實踐

箭頭函數相比於普通函數有不少優點：代碼簡潔，性能更好，避免了this的問題等，所以能夠大量使用。

就我的感受來說，箭頭函數更接近於函數的本來的能力。若是僅僅是想封裝一段代碼，或是做爲回調函數使用，而不是用做構造函數，函數綁定等功能。使用箭頭函數能夠更好。總之，當你在函數中無需使用this時，使用箭頭函數多是更好的選擇。

箭頭函數也有不少不適合的場景：
好比，做爲方法使用時，不要使用箭頭函數。不要爲了過度追求代碼的簡潔而讓函數變得難以閱讀和理解等。 知乎這篇文章對箭頭函數的一些不適合的場景進行了總結，能夠做爲參考。

何時不能使用箭頭函數？：知乎

能夠關注個人專欄學習es6, 打算對es6知識進行一下系統總結，歡迎共同窗習。

參考文獻: MDN: 箭頭函數