【ES6基礎】箭頭函數（Arrow functions）

ES6中，除了let和const新特性，箭頭函數是使用頻率最高的新特性了。若是你曾經瞭解如日中天的JavaScript衍生語言CoffeeScript, 就會清楚此特性並不是ES6首創。箭頭函數顧名思義是使用箭頭（=>）定義的函數，屬於匿名函數一類。

今天的文章內容將會從如下幾個方面，介紹箭頭函數：

• 使用語法
• this穿透
• 箭頭函數和傳統函數的區別

本篇文章閱讀時間預計8分鐘

使用語法

箭頭函數有四種使用語法

一、單一參數的單行箭頭函數

以下段代碼所示，很簡單：

const fn= foo =>`${foo} world`;複製代碼

這是箭頭函數最簡潔的形式，經常使用於用做簡單的處理函數，如過濾。以下段代碼所示：

let array=['a','bc','def','ghij'];
array=array.filter(item=>item.length>=2);複製代碼

二、多參數的單行箭頭函數 語法也很簡單，以下段代碼所示：

const fn=(foo,bar) => foo+bar複製代碼

在實際開發中，函數的參數不會只有一個，在箭頭函數中，多參數的語法跟普通函數同樣，用括號包裹參數項。咱們常常處理函數，如排序，示例代碼以下：

let array=['a','bc','def','ghij'];
array=array.sort((a,b) => a.length < b.length);複製代碼

三、多行箭頭函數 單一參數，以下段代碼所示：

foo => {
    return `${foo} world`;
}複製代碼

多參數，以下段代碼所示：

(foo,bar) => {
    return foo+bar;
}複製代碼

四、無參數箭頭函數

若是一個箭頭函數無參數傳入，則須要用一對空的括號來表示空的參數列表。

const greet = () => 'Hello World'複製代碼

以上都是被支持的箭頭函數的表達方式，其最大的好處就是簡單明瞭，省略了function關鍵字，而使用 => 代替。相對於傳統的function函數，箭頭函數在簡單的函數使用中更爲簡潔直觀。

書寫箭頭的函數過程當中，咱們應該注意如下幾點：

一、使用單行箭頭函數時，應避免換行

錯誤的用法，以下段代碼所示：

const fn=x => x*2 //SyntaxError複製代碼

正確的寫法，以下：

const fn= x => x*2 //ok複製代碼

二、參數列別的右括弧、箭頭應在一行

錯誤的用法，以下段代碼所示：

const fn = (x,y) //SyntaxError
=> {
   return x*y;
}複製代碼

下段代碼書寫是正確的：

const fn= (x,y) => { //ok
    return x*y
}

const fn= (x,
           y) => { //ok
    return x*y        
}複製代碼

三、單行箭頭函數返回只能包含一條語句

錯誤的書寫，以下段代碼所示：

const fn1= x => x=x*2; return x+2; //SyntaxError複製代碼

正確的書寫，以下段代碼所示：

const fn2= x => {
    x=x*2;
    return x+2;
} //ok複製代碼

四、若是單行箭頭返回一個對象，請用圓括號包裹

錯誤的書寫，以下段代碼所示,解析引擎會將其解析成一個多行箭頭函數：

const ids=[1,2,3];
const users=ids.map(id=>{id:id});
//wrong:[ undefined, undefined, undefined ]複製代碼

正確的書寫，以下段代碼所示：

const ids=[1,2,3];
const users=ids.map(id=>({id:id}));
//Correct:[ { id: 1 }, { id: 2 }, { id: 3 } ]複製代碼

箭頭函數十分簡潔，特別適合單行回調函數的定義，好比咱們有如下需求:

咱們有一個這樣的名字數組names,['Will','Jack','Peter','Steve','John','Hugo','Mike']，輸出序號爲偶數的名字[ 'Will', 'Peter', 'John', 'Mike' ],咱們如何使用箭頭函數在一行語句完成呢，以下段代碼所示：

const names=['Will','Jack','Peter','Steve','John','Hugo','Mike'];
const newSet=names
.map((name,index)=>({
    id:index,
    name:name
}))
.filter(man => man.id %2 ==0)
.map(man => [man.name])
.reduce((a,b) => a.concat(b))複製代碼

this穿透

事實上，箭頭函數不只書寫簡潔，還有一個神奇的功能，就是將函數內部的this延伸上一層做用域中，及上一層的上下文會穿透到內層的箭頭函數中，讓咱們先看一段實際的例子，以下段所示：

var Widget={
  // A
    init:function () {
    // B
        document.addEventListener("click", function (event){
    //C
            this.doSomething(event.type);
        }, false);
    },
    doSomething:function (type) {
        console.log("Handling"+ type+"event");
    }
};
Widget.init();複製代碼

這段代碼會如何輸出呢，想必你們都猜到了吧，輸出undefined,爲何呢？咱們在B位置內聲明瞭函數（C區域），this關鍵詞的指向B區域的函數，因爲B區域內沒有doSomething函數聲明，所以輸出undefined，ES6以前咱們如何修正此問題呢？

咱們可使用bind方法改變this指向A區域Widget對象，示例代碼以下：

var Widget={
  // A
    init:function () {
        // B
        document.addEventListener("click", (function (event) {
            //C
            this.doSomething(event.type);
        }).bind(this), false);
    },
    doSomething:function (type) {
        console.log("Handling"+ type+"event");
    }
};
Widget.init();複製代碼

下面這種方法是咱們最經常使用的方法，咱們在B區域聲明瞭that變量，並將其this賦值，確保c區域this的指向至Widget對象：

var Widget={
 // A
    init:function () {
        // B
        var that=this;
        document.addEventListener("click", function (event) {
                //C
            that.doSomething(event.type);
            console.log(that);
        }, false);
    },
    doSomething:function (type) {
        console.log("Handling"+ type+"event");
    }
};
Widget.init();複製代碼

有了箭頭函數，咱們可使用箭頭函數的this穿透功能，將this的做用域延伸至上一層B區域函數，以下段代碼所示:

var Widget={
//A
    init:function () {
    //B
        document.addEventListener("click", (event) => {
        //C
            this.doSomething(event.type);
        }, false);
    },
    doSomething:function (type) {
        console.log("Handling"+ type+"event");
    }
};
Widget.init();複製代碼

箭頭函數是否是更簡單，代碼更清晰呢。

還有一個狀況須要注意，箭頭函數對上下文的綁定是強制的，沒法經過call或aplly進行改變，以下段代碼所示：

function widget() {
    this.id=123;
    this.log=()=>{
      console.log(this)
        console.log('widget log',this.id);
    }
}

var pseudoWidget={
    id:456
};

new widget().log.call(pseudoWidget);//123複製代碼

上述代碼會如何輸出呢，因爲箭頭函數對上下文的綁定是強制的，所以this指向不會指向pseudoWidget對象,所以輸出123。

箭頭函數和傳統函數的區別

一、箭頭函數做爲匿名函數,是不能做爲構造函數的,不能使用new

以下段代碼所示，咱們使用new方法，會提示以下信息：

const B =()=>({wechat:"前端達人"});
let b = new B(); //TypeError: B is not a constructor複製代碼

二、箭頭函數不綁定arguments,可使用剩餘參數(rest)解決

筆者在《【ES6基礎】展開語法(Spread syntax)》文章裏介紹過剩餘參數，這裏就不過多介紹，不清楚的能夠點擊文章連接進行查看。

function A(a){
    console.log(arguments); //[object Arguments] {0: 1}
}

var B = (b)=>{
    console.log(arguments); //ReferenceError: arguments is not defined
}

var C = (...c)=>{ //...c即爲rest參數
    console.log(c); //[3]
}
A(1);
B(2);
C(3);複製代碼

三、箭頭函數this指向具有穿透特性，會捕獲其所在上下文的this值

四、箭頭函數沒有原型屬性

var a = ()=>{
    return '前端達人';
}

function b(){
    return '前端達人';
}
console.log(a.prototype);//undefined
console.log(b.prototype);//object{...}複製代碼

五、箭頭函數不能當作Generator函數,不能使用yield關鍵字

六、箭頭函數對上下文的綁定是強制的，沒法經過call或aplly進行改變

小節

今天的內容就介紹到這裏，咱們能夠看出使用箭頭函能減小代碼量，更加簡介易讀。在使用箭頭函數時，咱們必定要理解箭頭函數和傳統函數的區別，若是函數功能簡單，只是簡單的邏輯處理，儘可能使用箭頭函數。

ES6相關文章

【ES6基礎】let和做用域

【ES6基礎】const介紹

【ES6基礎】默認參數值

【ES6基礎】展開語法(Spread syntax)

【ES6基礎】解構賦值（destructuring assignment）

更多精彩內容，請微信關注」前端達人」公衆號！