箭頭函式:更短的函式寫法

把傳統函式的 function 拿掉,再加上箭頭 => 就會變成箭頭函式。

// 傳統函式
var callSomeone = function(someone) {
  return someone + "吃飯了";
};

// 箭頭函式
var callSomeone = someone => {
  return someone + "吃飯了";
};

console.log(callSomeone("小明")); // "小明吃飯了"

如果函式的 Code 只有一行 return ...,則可以再省略大括號 {}return,改為只有一行的形式。

var callSomeone = someone => someone + "吃飯了";
console.log(callSomeone("小明")); // "小明吃飯了"

另外,參數只有一個的時候 (someone) 的括號其實可以省略,但如果是不帶入參數的情況就不能省略,所以個人習慣一律都不省略。

特性 1:沒有 arguments 參數,請善用其餘參數

傳統函式預設的 arguments 參數是一個類陣列 (Array-like) 物件,它的值就是我們傳進函式的所有參數。

但是 ES6 的箭頭函式沒有 arguments 參數,如果我們呼叫它只會出現 arguments is not defined 的錯誤訊息。

類陣列 (Array-like) 是指一樣有 length 這項屬性,以及索引從 0 開始等特性,但是沒有陣列內建的方法像是 forEach() 或是 map()

// 傳統函式可以使用 arguments 參數
const updateEasyCard = function(five) {
  console.log(five); // 5
  console.log(arguments); // Arguments(4) [5, 10, 15, 20, callee: ƒ, Symbol(Symbol.iterator): ƒ]
};
updateEasyCard(5, 10, 15, 20);

如果想要在箭頭函式中像是 arguments 參數那樣大量使用參數的話,可以使用之前其餘參數來幫忙做到,而且其餘參數會組出一個真正的陣列,我們可以在它身上使用各種陣列方法。

// 箭頭函式使用其餘參數達到 arguments 參數的效果
const updateEasyCard = (five, ...arg) => {
  console.log(five); // 5
  console.log(arg); // (3) [10, 15, 20]
};
updateEasyCard(5, 10, 15, 20);

特性 2:this 綁定的差異

  • 傳統函式:綁定呼叫方法的那個物件。
  • 箭頭函式:綁定到定義時所在的執行環境下的物件。

傳統函式的 this 會指向呼叫方法的物件,範例中 callName()setTimeout 都是用一般傳統函式的寫法。

另外,因為 setTimeout 完整的寫法是 window.setTimeout,所以其實呼叫 setTimeout 的是全域物件 window

// 傳統函式
var name = "全域阿婆";
var auntie = {
  name: "漂亮阿姨",
  callName: function() {
    // this => auntie
    console.log(`1, ${this.name}, ${this}`); // 1, 漂亮阿姨, [object Object]
    setTimeout(function() {
      // this => window
      console.log(`2, ${this.name}`); // 2, 全域阿婆
      console.log(`3, ${this}`); // 3, [object Window]
    }, 10);
  }
};
auntie.callName();

我們試著把函式 callName 改成箭頭函式,執行後會發現裡面的 this 都是指向全域的 window
因為箭頭函式沒有自己的 this 變數,裡面所使用的 this 的值是由上下文決定的,而不是看呼叫方法的物件。

在執行 auntie.callName() 之前,所有的 this 都已經被定義過了。當 Parser 在讀程式碼、定義這些 this 的時候,所在的執行環境是全域執行環境,因此 this 就會指向定義時所在的執行環境的物件也就是 window 物件。

var name = "全域阿婆";
var auntie = {
  name: "漂亮阿姨",
  callName: () => {
    console.log(`1, ${this.name}, ${this}`); // 1, 全域阿婆, [object Window]
    // 這邊 setTimeout 就算改用傳統函式也一樣,因為外層是箭頭函式了
    setTimeout(() => {
      console.log(`2, ${this.name}`); // 2, 全域阿婆
      console.log(`3, ${this}`); // 3, [object Window]
    }, 10);
  }
};
auntie.callName();

常用的兼容寫法 - self

如果我們想要用 ES6 箭頭函式又擔心 this 指向的問題,可以在一開始就指定一個變數 self,不過外層函式依然只能是傳統函式喔。

var auntie = {
  name: "漂亮阿姨",
  // 在傳統函式裡面盡情地使用箭頭函式
  callName() {
    // 定義 self 變數
    var self = this;
    // 使用箭頭函式
    setTimeout(() => {
      console.log(this);
      console.log(self, self.name);
    }, 10);
  }
};
auntie.callName();

補充一下,因為定義 setTimeout 時執行環境就是在 callName() 函式執行環境下,所以其實 setTimeout 裡面的 this 本來就是指向 auntie 物件。不過定義 self 還是可以幫助到多層的情況。

Vue 的 Methods 建議使用傳統函式

根據上面的案例,我們知道使用箭頭函式時比較不好掌握 this 的使用。
我們在寫 Vue 的 methods 時很常使用 this 去取用元件的 data,像是 this.name 這類的寫法,這時候如果使用的是箭頭函式就很可能會出錯。

所以在 Vue 的 methods 裡面會建議使用傳統函式與縮寫的方式來呈現。

// 傳統函式配合縮寫,原本是 callName: function() {...}
callName () {
    console.log('1', this.name, this);
    setTimeout(function () {
      console.log('2', this.name);
      console.log('3', this);
    }, 10);
  },

這個寫法不是箭頭函式喔,它只是縮寫的傳統函式而已 👀

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫