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

函式的基本認識

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

函式具有以下特性

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

下方有一個範例程式碼：

function fnA(param) {
  let localVar = "區域變數";
  console.log(this, localVar); //Window "區域變數"

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

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

函式類型

函式陳述式

• 也稱為具名函式。
• 可被呼叫，並且有片段程式碼。

function fnA() {
  console.log("函式陳述式");
}
fnA();

函式表達式

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

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

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

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

• 宣告變數後方為具名函式，呼叫變數 fnC 後，取得的值會是 fnD 函式的內容，因 fnC 是變數，fnD 是變數的值。
• fnD 只能在內容只能在 fnD 中被調用。

let fnC = function fnD() {
  console.log(fnC, fnD);
};
fnC();

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

let fnC = function fnD() {
  console.log(fnC, fnD);
};
fnC();
console.log(fnC, fnD);