0%

JS 核心觀念筆記 - 具名函式與匿名函式的基本認識

core

函式的基本認識

先前JS 筆記 - 認識函式 function 與使用有基本的介紹,本篇會更詳盡介紹具名函式與匿名函式的差異與用法。

函式具有以下特性

  • 可被呼叫。
  • 具有片段程式碼。
  • 可擁有名稱。

下方有一個範例程式碼:

1
2
3
4
5
6
7
8
9
function fnA(param) {
let localVar = "區域變數";
console.log(this, localVar); //Window "區域變數"

return param; //函式有回傳的功能
}

var data = fnA("參數"); //帶入的參數會放入函式使用
console.log(data); //參數

函式類型

函式陳述式

  • 也稱為具名函式。
  • 可被呼叫,並且有片段程式碼。
1
2
3
4
function fnA() {
console.log("函式陳述式");
}
fnA();

函式表達式

  • 也稱為匿名函式。
  • 宣告一個變數,其值為函式,可不具名,並且得到的值賦予到左邊的變數上。
  • 再透過呼叫變數來執行函式內容。

    並非所有的匿名函式都是函式表達式。

1
2
3
4
let fnB = function () {
console.log("函式表達式");
};
fnB();

具名函式可以在函式內被調用

  • 宣告變數後方為具名函式,呼叫變數 fnC 後,取得的值會是 fnD 函式的內容,因 fnC 是變數,fnD 是變數的值。
  • fnD 只能在內容只能在 fnD 中被調用。
1
2
3
4
let fnC = function fnD() {
console.log(fnC, fnD);
};
fnC();

具名函式可在函式內被調用

如果把 console 移到函式外面則跳錯。

1
2
3
4
5
let fnC = function fnD() {
console.log(fnC, fnD);
};
fnC();
console.log(fnC, fnD);

fnD