JavaScript Function Definitions

 

一、Function Declaration

一個 Function Declaration 例子如下

function myFunction(a, b) {
    return a * b;
}

由於 Function Declaration 不是立刻執行陳述句，所以其結尾不需加「;」號。

一個 Function Declaration 需要有一個 function name。

 

二、Function Expression

一個 Function Expression 例子如下

var x = function (a, b) { return a * b };

也等於

var x = function multiple(a, b) { return a * b };

Function Declaration 跟 Function Expression 的差別在於有沒有加「;」號與將其指定到變數。

 

三、Function Constructor

一個 Function Constructor 例子如下

var myFunction = new Function("a", "b", "return a * b");

黃色框都是關鍵字。

 

四、Function Hoisting

Hoisting is JavaScript's default behavior of moving declarations to the top of the current scope.

一個 Function Hoisting 例子如下

myFunction(5);
function myFunction(y) {
    return y * y;
}

 

五、Self-Invoking Function

Self-Invoking Function 形式如下，注意括號 (parenthese) 的擺放

(function print() { console.log("hello") })();
(function print() { console.log("hello") }());
(function () { console.log("hello") }());
(function () { console.log("hello") })();

以上四個例子結果皆相等。

Self-Invoking Function 可以不需要 function name。

Self-Invoking Function 也可以指的是 Immediately-invoked function expression (IIFE)。

 

六、Arrow Function

// ES5
var a = function (x, y) {
    return x * y;
}
// ES6
var b = (x, y) => x * y;

1、Arrow Function 是 ES6 語法。

2、Arrow Function 是 Function Expression 的簡化語法。

3、由上例子可知道 Arrow Function 簡化 function 關鍵字、return 關鍵字、大括號 (curly brackets)。

4、Arrow Function 不能使用 this 關鍵字

var o = {
    myvalue: 3,
    sum: (x, y) => x * y + this.myvalue
};
o.sum(2, 3);

5、Arrow Function 不支援 Function Hoisting

b(2, 3);
var b = (x, y) => x * y;

6、Arrow Function 也可以擁有 return 關鍵字、大括號 (curly brackets)。

var b = (x, y) => { return x * y };