iT邦幫忙

2021 iThome 鐵人賽

DAY 21
1
自我挑戰組

JavaScript 核心觀念系列 第 21

【Day21】什麼是函式?

函式功能

函式在 JavaScript 中為物件型別,以下列出它一般的物件差別

  • 被呼叫的能力
  • {} 能撰寫程式碼
  • () 能傳遞參數
  • 有自己的 this 和執行環境
  • return 能回傳值
  • 名稱(選配),沒名稱的叫匿名函式,反之為具名函式

範例:

function fn(parameter) {
    const localVariable = '區域變數';
    console.log(this, localVariable);  // this、區域變數
    return `附加一段${parameter}`  // 回傳
};

const data = fn('參數');  // 呼叫函式

console.log(data);

在範例中可以看出函式擁有自己的 this 和變數,

以及回傳參數和被呼叫的能力,

functionA('參數') 為表達式,

因此能夠將函式中 return 的結果賦予到變數 data 中,

所以 data 的值會是函式中 return 的內容,

接著我們來看函式陳述式和函式表達式的內容

函式陳述式和函式表達式

我們先來看函式陳述式的結構

function fnA() {
    console.log('函式陳述式', '具名函式');
    console.log(fnA);
};

fnA();

當我們顯示 fnA 時,

會看見 f 的後方會顯示函式名稱 fnA

這種函式稱為具名函式,

而函式陳述式一定要給名稱,

因此函式陳述式都是具名函式

接著看函式表達式

const fnB = function() {
    console.log('函式表達式', '匿名函式');
    console.log(fnB);
};

fnB();

當我們顯示 fnB 時,

會看見 f 的後方沒有函式名稱,

這類函式則稱為匿名函式,

但函式表達式也能使用具名函式

const fnC = function fnD() {
    console.log('函式表達式', '具名函式')
    console.log(fnC);
    console.log(fnD);
};

fnC();

當我們顯示 fnCfnD 時,

會發現雖然宣告的變數為 fnC,但顯示的函式名稱都是 fnD

那是因為我們在宣告函式時,就已經給它函式名稱 fnD

但有一點要注意,

函式表達式中具名函式的函式名稱只能在函式內呼叫,在函式外呼叫會出錯

const fnC = function fnD() {};

console.log(fnD);


上一篇
【Day20】淺層複製及深層複製
下一篇
【Day22】立即函式(IIFE)
系列文
JavaScript 核心觀念30

尚未有邦友留言

立即登入留言