ECMAScript 之 Function

Function 是 ECMAScript 的主體，一共提供了 4 種方式定義 function。

Version

ECMAScript 5

ECMAScript 2015

Function Declaration

function sum(x, y) {
  return x + y;
}

console.log(sum(1, 2));

最傳統的方式，以 function 定義 function，這種方式類似 var ，會有 Hoisting，因此 Function Declaration 可以寫在呼叫端後面，如：

console.log(sum(1, 2));

function sum(x, y) {
  return x + y;
}

Function Expression

const sum = function(x, y) {
  return x + y;
}

console.log(sum(1, 2));

以 function 建立 Anonymous Function，再讓變數 reference 該 Anonymous Function，這種寫法沒有 Hoisting，因此 Function Expression 必須寫在呼叫端前面。

Constructor Function

const sum = new Function('x', 'y', 'return x + y');

console.log(sum(1, 2));

const sum = new Function('x, y', 'return x + y');

console.log(sum(1, 2));

由於 function 也是 object，因此也可使用 Constructor Function 方式建立 function。

Function 的每個 parameter 都是 argument，或者只用一個 argument，中間以 , 隔開皆可，且這種方式也沒有 Hoisting。

使用 new Function 有個特點： 所有 argument 都是 string 。

const param = 'x, y';
const body = 'return x + y';
const sum = new Function(param, body);

console.log(sum(1, 2));

所有 argument 都是 string，看似很荒謬，但也由於是 string，你就有機會以 湊字串 或 讀取設定檔 的方式動態建立 function。

平常幾乎不會使用 new Function() 定義 function，但若想動態以 湊字串 方式建立 function，或者 function 定義來自於 設定檔 ，就有機會使用 new Function()

Arrow Function

const sum = (x, y) => x + y;

console.log(sum(1, 2));

ECMAScript 2015 迎來 Arrow Function，因此 Function Expression 也可以搭配 Arrow Function，當然也沒有 Hoisting。

Conclusion

• 4 種寫法只有 Function Declaration 有 Hoisting
• 實務上甚少使用 Constructor Function 建立 function，除非想動態湊 function，或由設定檔建立 function，也由於是 string，可能要注意被惡意 injection 攻擊
• 隨著 ECMAScript 2015 迎入 Arrow Function，使用 Function Expression + Arrow Function 的寫法越來越常見

Reference

山田祥寬, 新一代 JavaScript 程式設計精髓