前端三十｜10. [JS] 一般函式與箭頭函式的差異？

旅程來到了第 10 天，這趟旅程真的有點硬啊…不過每天只要花一點點時間，就能讓逐漸讓自己變強，這樣的感覺是不是很棒呢？

今天的主題輕鬆一點，來看看 JavaScript ES6 中大家都會用的箭頭函式與一般函式的差異。

本系列文已經重新編校彙整編輯成冊，並正式出版囉！

《前端三十：從 HTML 到瀏覽器渲染的前端開發者必備心法》好評販售中！

喜歡我文章內容的讀者們，歡迎您前往購買支持！

一般函式

在 ES6 版本之前的 JavaScript 是沒有箭頭函式可以用的，僅有最基本的一般函式。基本語法相信大家少說也寫過成千上萬次，對它應該都不太陌生，那麼這邊僅針對幾點可能容易被忽略的特性，做一些簡單的分享：

建立

開發者可以透過 function 及 () 關鍵字來定義、撰寫函式：

function fn() {
  // something awesome
}

另一種常見的寫法，是宣告一個變數，等號右邊放上函式宣告：

var newFunc = function fn() {
  // something awesome
}

兩種寫法在使用上唯一的差異，就是第二種寫法在宣告前不能使用。

快問快答小知識：
Q：請問第二種寫法中的 newFunc.name 是什麼？
A：是 fn，而不是 newFunc 喔～

另外還有一種透過函數建構子的宣告方法：

var func = new Function('str', 'console.log(str)')
func('test')

但這樣子撰寫就無法利用 JavaScript 引擎會事先解析程式並準備 EC 的特性，造成效能上的冗余浪費，非常不推薦使用。

屬性

函式在 JavaScript 中，其實是一個可被呼叫（Callable）的物件，除了可執行、擁有例如 apply()、bind()、call() 之類的方法外，也擁有一些函式特有的屬性：

• name：函式的名稱
• length：可接收參數的數量