ES6 箭頭函數(shù) 從了解到深入

Eminjannn 發(fā)布于2019-08-20 16:37 / 2883人閱讀

摘要：有傳聞?wù)f，箭頭函數(shù)的語(yǔ)法，是受到了的影響，并且它與中的語(yǔ)法一樣，共享上下文。箭頭函數(shù)是新增加的一個(gè)特性。箭頭函數(shù)沒(méi)有自己的值，其值是通過(guò)繼承其它傳入對(duì)象而獲得的通常來(lái)說(shuō)是上一級(jí)外部函數(shù)的的指向。

箭頭函數(shù) 1. 簡(jiǎn)單的定義：

胖箭頭函數(shù) Fat arrow functions，又稱(chēng)箭頭函數(shù)，是一個(gè)來(lái)自ECMAScript 2015（又稱(chēng)ES6）的全
新特性。有傳聞?wù)f，箭頭函數(shù)的語(yǔ)法=>，是受到了CoffeeScript 的影響，并且它與CoffeeScript中的
=>語(yǔ)法一樣，共享this上下文。

箭頭函數(shù)的產(chǎn)生，主要由兩個(gè)目的：更簡(jiǎn)潔的語(yǔ)法和與父作用域共享關(guān)鍵字this。接下來(lái)，讓我們來(lái)看幾個(gè)詳細(xì)的例子
當(dāng)需要編寫(xiě)一個(gè)簡(jiǎn)單的單一參數(shù)函數(shù)時(shí)，可以采用箭頭函數(shù)來(lái)書(shū)寫(xiě)，標(biāo)識(shí)名 => 表達(dá)式。
這樣就可以省卻 function 和 return 的輸入，還有括號(hào)，分號(hào)等。箭頭函數(shù)是ES6新
增加的一個(gè)特性。

let f = v => v;

最直接的感覺(jué)就是簡(jiǎn)便，當(dāng)然不可能就是這么一點(diǎn)好處，下面就一起來(lái)探討一下。

幾個(gè)小細(xì)節(jié) ：

如果箭頭函數(shù)的代碼塊多余一條語(yǔ)句，就必須要使用大括號(hào)將其括起來(lái)，并且使用
return 語(yǔ)句返回。

由于大括號(hào)會(huì)被解釋位為代碼塊，所以如果箭頭函數(shù)直接返回一個(gè)對(duì)象，必須在外
面加上括號(hào)。

  let f = id => ({age: 22, name: Alice })

箭頭函數(shù)還可以和解構(gòu)賦值 Destructuring 聯(lián)合使用.

  const f = ({first, last}) => first + "" + last;

可以簡(jiǎn)化回調(diào)函數(shù)，大大簡(jiǎn)化和縮短代碼行數(shù)。

2. 箭頭函數(shù)和普通函數(shù)的區(qū)別

this的指向
普通函數(shù)與箭頭函數(shù)有個(gè)微小的不同點(diǎn)。 箭頭函數(shù)沒(méi)有自己的this值 ，其this值是通

過(guò)繼承其它傳入對(duì)象而獲得的,通常來(lái)說(shuō)是上一級(jí)外部函數(shù)的 this 的指向。

  function f() {
    setTimeout( () => {
      console.log("id:", this.id);
    },100);
  }

  f.call( { id: 42 }); //id: 42;

這個(gè)例子中， setTimeout 的參數(shù)是一個(gè)箭頭函數(shù)，每隔100毫秒運(yùn)行一次，如果是普通函
數(shù)，執(zhí)行的 this 應(yīng)該指向全局對(duì)象，但是箭頭函數(shù)會(huì)讓 this 總是指向函數(shù)所在的對(duì)象

箭頭函數(shù)里面嵌套箭頭函數(shù)會(huì)有多少個(gè)this呢？
看一個(gè)簡(jiǎn)單的例子

  function f() {
    return () => {
      return () => {
        return () => {
          console.log("id:", this.id);
        };
      };
    };
  }
  f().call( {id: 42})()()(); //id: 42

上面的代碼中只有一個(gè) this，就是函數(shù)f的this 。這是因?yàn)樗械膬?nèi)層函數(shù)都是箭頭函數(shù)
都沒(méi)有自己的this，都是最外層f函數(shù)的this。
注意：還有三個(gè)變量在箭頭函數(shù)中也是不存在的arguments , super, new.target所以順理成
章，箭頭函數(shù)也就不能再用這些方法call(),apply(),bind(),因?yàn)檫@是一些改變this指向的方法，
箭頭函數(shù)并沒(méi)有this啊。

  var adder = {
    base : 1,
    add : function(a) {
    var f = v => v + this.base; return f(a);
  },
    addThruCall: function(a) {
    var f = v => v + this.base;
    var b = { base : 2 };
    return f.call(b, a);
  }
};
    console.log(adder.add(1));

3. 怎么處理好箭頭函數(shù)的使用問(wèn)題呢？

使用非箭頭函數(shù)來(lái)處理由object.method()語(yǔ)法調(diào)用的方法。因?yàn)樗鼈儠?huì)接收到來(lái)自調(diào)用者的
有意義的this值。

在其它場(chǎng)合都使用箭頭函數(shù)。

4. 使用箭頭函數(shù)的注意點(diǎn)

箭頭函數(shù)在參數(shù)和箭頭之間不能換行。

函數(shù)體內(nèi)的this對(duì)象就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。

"use strict";
var obj = { a: 10};
Object.defineProperty(obj, "b", {
    get: () => {
    console.log(this.a, typeof this.a, this);
    return this.a+10;
    // represents global object "Window", therefore "this.a" returns "undefined"
  }
});

不可以當(dāng)作構(gòu)造函數(shù)，簡(jiǎn)單說(shuō)就是不能再使用new命令了，不然會(huì)報(bào)錯(cuò)。

var Foo = () => {};
var foo = new Foo();
// TypeError: Foo is not a constructor

不可以使用arguments 對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在，如果實(shí)在要用可以用rest代替。

不可以使用yield命令，箭頭函數(shù)不可用作Generator函數(shù)。

值得注意的一點(diǎn)就是this對(duì)象的指向是可變的，但在箭頭函數(shù)內(nèi)是固定的。

5. 總結(jié)

箭頭函數(shù)是我最喜歡的ES6特性之一。使用=>來(lái)代替function是非常便捷的。但我也曾見(jiàn)過(guò)只使用
=>來(lái)聲明函數(shù)的代碼，我并不認(rèn)為這是好的做法，因?yàn)?>也提供了它區(qū)別于傳統(tǒng)function，其所
獨(dú)有的特性。我個(gè)人推薦，僅在你需要使用它提供的新特性時(shí)，才使用它。

當(dāng)只有一條聲明語(yǔ)句(statement)時(shí)，隱式 return。

需要使用到父作用域中的this。