函式宣告方式

• function 命令

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

• 函式表示式

var f = function(x, y) {
return x + y;
}

• Function建構函式

var f = new Function('x', 'y', 'return x + y');

• 箭頭函式

var f = (x, y) => { return x + y; }

函式宣告提升

JavaScript 引擎將函式名視同變數名，所以採用function命令宣告函式時，整個函式會像變數宣告一樣，被提升到程式碼頭部。

hoisted(); // "foo"

function hoisted() {
    console.log("foo"); 
}

// 等同於
function hoisted() {
    console.log("foo"); 
}

hoisted(); // "foo"
 

但是，如果採用賦值語句定義函式，JavaScript 就會報錯。

hoisted(); // TypeError: hoisted is not a function

var hoisted = function () {
    console.log("foo"); 
}

// 等同於
var = hoisted;

hoisted(); // TypeError: hoisted is not a function
hoisted = function () {
    console.log("foo"); 
}

函式作用域

定義

JavaScript 只有兩種作用域：一種是全域性作用域，變數在整個程式中一直存在，所有地方都可以讀取；另一種是函式作用域，變數只在函式內部存在。

對於頂層函式來說，函式外部宣告的變數就是全域性變數（global variable），它可以在函式內部讀取。

var a = 1;
function f() {
    console.log(a);
}

f(); // 1

在函式內部定義的變數，外部無法讀取，稱為“區域性變數”（local variable）。

function f() {
    var a = 1;
}

console.log(a); // ReferenceError: a is not defined

函式內部變數提升

function f() {
    console.log(a);
    var a = 1;
}

f() // undefined

// 等同於
function f() {
    var a;
    console.log(a);
    a = 1;
}

f() // undefined
 

參考資料

• https://wangdoc.com/javascript/types/function.html
• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/function