4 種建立 function 方式

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

Version


ECMAScript 5
ECMAScript 2015

Function Declaration


1
2
3
4
5
function sum(x, y) {
return x + y;
}

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

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

1
2
3
4
5
console.log(sum(1, 2));

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

function000

Function Expression


1
2
3
4
5
const sum = function(x, y) {
return x + y;
}

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

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

function001

Constructor Function


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

console.log(sum(1, 2));
1
2
3
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

function002

1
2
3
4
5
const param = 'x, y';
const body = 'return x + y';
const sum = new Function(param, body);

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

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

function003

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

Arrow Function


1
2
3
const sum = (x, y) => x + y;

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

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

function004

Conclusion


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

Reference


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

2018-11-09