iT邦幫忙

2021 iThome 鐵人賽

DAY 11
2
Modern Web

從零開始的JS學習之路系列 第 11

[Day11] 函式 function

函式是 JavaScript 非常重要的特性,指的是將一或多段程式包起來,之後可以重覆使用。JavaScript 在執行時的呼叫堆疊也是以函式作為單位。

用 typeof 去檢查一個函式的型別他會顯示 function,但他仍然屬於 Object 物件型別的一種,可以把它視作可以被呼叫(be invoked)的特殊物件。 -- 008

函式宣告方式有好幾種,但通常會有三個部分

  • 函式名稱(但也可能沒有)
  • 參數,在括號 () 內的部分
  • 執行內容,在大括號 {} 內的部分

這是在 VS code 裡的預設範本。function 是函數的宣告方式,通常會給函數一個名稱,然後括號是參數(parameters),參數與參數間用 , 隔開。

這邊括號中的 params 跟 008 敘述的 arguments 不一樣,咦,是什麼意思?
如下寫一個簡單的 function,下面呼叫函式內的值就是 arguments

function sum(a, b) {
  return a + b;
}
sum(3, 4); // 7,呼叫函式傳值給 a, b
sum(6, 7); // 13,呼叫函式傳值給 a, b
sum(8, 2); // 10,呼叫函式傳值給 a, b
console.log(sum(3, 4), sum(6, 7), sum(8, 2));

搜尋 stackoverflow 裡面的回答,簡單的說:
Parameter:函式宣告裡的參數。
Argument:引數,呼叫函式時傳給 params 的資料。

定義函式的方式

  • 宣告函式 - 如上所舉例的就是宣告函式。
  • 函式運算式 - 將函式指定給某個變數,就是沒有名稱的函式。

宣告一個變數 = 一個函式,而函式沒有指定名稱,稱為匿名函式

var QQㄋㄟㄋㄟ好喝到咩噗茶 = function(珍珠, 奶茶) {
  return 珍珠 + 奶茶;
};

也可以再替 function 命名

var QQㄋㄟㄋㄟ好喝到咩噗茶 = function 珍奶(珍珠, 奶茶) {
  return 珍珠 + 奶茶;
};

但這名稱只在自己的函式作用域大括號 {} 裡有效,離開 {} 變數名珍奶就不存在了。
看使用情境而定,可以透過變數名取得函式,不一定要另外命名。

var QQㄋㄟㄋㄟ好喝到咩噗茶 = function 珍奶(珍珠, 奶茶) {
  console.log(typeof 珍奶); // typeof function
  return 珍珠 + 奶茶;
};
console.log(typeof 珍奶); // typeof undefined
  • 透過 new Function 關鍵字建立
    使用關鍵字 new Function 來建立物件函式,但由於每次執行都要解析"字串",運作效能較差,所以實際上較少使用。
var foo = new Function("number", "return number * number");
foo(50); // 2500

呼叫函式的方式

如上的方法,直接輸入函式名稱(參數),例:sum(3, 4)、foo(50);其他呼叫的方式還有 .call() 跟 .apply(),但還沒念到,今天就先到這裡。

參考資料

What's the difference between an argument and a parameter? -- stackoverflow
008 天重新認識 JavaScript
QQㄋㄟㄋㄟ好喝到咩噗茶


上一篇
[Day10] 迴圈練習
下一篇
[Day12] 從 function 談變數的 Scope
系列文
從零開始的JS學習之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
南國安迪
iT邦新手 3 級 ‧ 2021-09-26 19:35:28

QQㄋㄟㄋㄟ好喝到咩噗茶

/images/emoticon/emoticon33.gif

0
Mao
iT邦新手 1 級 ‧ 2021-09-27 16:14:38

有 QQㄋㄟㄋㄟ好喝到咩噗茶 就給讚
/images/emoticon/emoticon01.gif

Rex iT邦新手 3 級 ‧ 2021-09-27 21:52:11 檢舉

因為剛好要引用,才有辦法講出正確的名字
/images/emoticon/emoticon01.gif

我要留言

立即登入留言