uncategorized

箭頭函式(Arrow Function)

arrow function, es6, this

箭頭函式 Arrow Function 是 ES6 非常受人喜愛的功能，同時支援普通函式所具備的功能，包括預設值、解構、rest 參數，它擁有以下幾個特性：

  • 更短的函式寫法(怎麼寫)
  • 綁定 this(怎麼用)

更短的函式寫法

先說結論，使用箭頭函式，以下兩種寫法是相等的。

1
2
3
4
5
6
//normal function
function add(x){
  return x + 5
}
//arrow function
const add = x => x + 5

Step by Step

讓我們先寫一般普通的 Function，帶兩個參數 x 跟 y，然後 return x + y

1
2
3
4
//normal function
function add(x, y){
  return x + y
}

Arrow Function 把函式本身儲存在一個變數或常數，中間用等號 = 隔開

1
2
3
const add = function (x, y){
  return x + y
}

然後我們把 function 拿掉，參數的後面加上 =>，這樣我們就完成了我們的箭頭函式。

1
2
3
4
const add = (x, y) => {
  return x + y
}
//省略 function，加上 =>

如果我們的函式只有單行運算式，我們還可以省略後面的花括號 {}，然後 return 也可以省略

1
2
const add = (x, y) => x + y
// 省略 {} 與 return

這裡有一個重點，如果我們省略了 {}，就會有一個隱含的 return 出現在運算式前面，如果沒有省略 {}，運算式將會如實呈現。

1
2
3
4
5
6
const add = (x, y) => x + y

function add(x, y){
  return x + y
}
//沒加 {} 等於 return x + y

1
2
3
4
5
6
const add = (x, y) => {x + y}

function add(x, y){
  x + y
}
//有加 {}，裡面的程式碼如實呈現，所以沒有 retrun

如果你只有一個參數，你甚至可以省略參數的圓括號

1
2
3
4
const add = (x) => x + 5

const add = x => x + 5
//省略圓括號

關於參數的圓括號

  • 如果只有一個參數，圓括號可省略
  • 如果沒有參數，或是有兩個以上的參數，圓括號一定要加
1
2
3
4
5
6
7
8
const sayHi = () => 'Hello, World!'
//沒有參數，要加()

const add = (n1, n2) => n1 + n2
//兩個以上參數，要加()

const add = n1, n2 => n1 + n2
//報錯

如果 return 的是一個 object，花括號 {} 外面要加圓括號 ()

1
const family = (father, mother) => ({father: father, mother: mother})

綁定 this

傳統函式的 this 是動態的，會依呼叫的方法而決定 this。箭頭函式的 this 是看何時定義。

1
2
3
4
5
6
7
8
9
10
var ooo = {
  aaa: function(){
    console.log(this)
  },
  bbb: () => {
    console.log(this)
  }
};
ooo.aaa() // {aaa:f, bbb: f}
ooo.bbb() // window

參考連結:
React 16 - The Complete Guide
MDN - 箭頭函式
ES6篇 - 箭頭函式
ECMAScript 6 入门
鐵人賽：箭頭函式 (Arrow functions)
Arrow Functions in JavaScript
ES6 箭頭函數 Arrow Function
深入探討 TypeScript 之 Arrow Function

Share