iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

我的JavaScript日常系列 第 7

JavaScript Day 7. 淺談 Function

自己常常在寫程式的時候,因為習慣一種寫法就很自然寫下去,不太會去思考為什麼要這樣用,就像每天早上都會去上課,所以上課是理所當然的,而忽略掉我們為什麼要上課;因此今天就來為平常寫程式常常很自然就寫下去的 function ,做個小筆記幫助自己去了解它的意義。


引用 MDN 的說法:

函式是構成 JavaScript 的基本要素之一。一個函式本身就是一段 JavaScript 程序—包含用於執行某一個任務或計算的語法。要呼叫某一個函式之前,你必需先在這個函式欲執行的 scope 中定義它。

上面這一段說法,我最多可以理解成「要執行一段程式需要寫一個 function。」,然後我還是不明白他背後的意義。有一天問了同學為什麼要用 function 呢?就在這一次終於獲得一個我看的懂的答案。

想像 function 是一個工具箱,裡面裝了許多用途的工具,要使用這些工具必須打開工具箱才能順利使用。有些工具很零散,為了讓桌面看起來整齊乾淨,我們可以使用許多工具箱把它們一箱一箱裝起來。

類似這樣子的解說好像蠻適合我的,很容易領悟XD

以下開始介紹函式的使用方法:

  • 具名函式 (Named Function)
  • 匿名函式 (Anonymous Function)

具名函式 (Named Function)

具名函式,指的就是有名字的函式,通常的寫法是在 function 的旁邊加上自定義名稱,大概的寫法如下:

function morningAction () {
    console.log("起床");
}

morningAction ();

匿名函式 (Anonymous Function)

匿名函式,指的就是沒有名字的函式,模式大概是 變數名稱=function(){ ... } 這個樣子,把一個函式透過指定給某個變數:

let a = function() {
  console.log('Hello');
}

a();

Calling Functions (函式呼叫)
我們在寫函式的時候會發現,如果只是把函式寫出來,這個函式是不會自動運作的,因為函式必須透過呼叫他才能正常運行;可以看到上面的範例,在函式的底下寫了一段 morningAction () 這個就是呼叫函式,做了這個動作以後函式才會執行。

IIFE (立即執行函式)
IIFE全名為 ( Immediately Invoked Function Expression ),是一個定義完立即執行的函式,他又稱為 ( Self-Executing Anonymous Function ),中文為「自我執行匿名函式」。

IIFE 立即函式的寫法範例:

let hello = function(name){
	console.log('Hello ' + 'Abe');
}();

// Hello Abe

可以看到與上面不同的是,這一次我們沒有特地把 hello() 寫出來,而是電腦直接讀到後面的 (),就知道要立刻呼叫這個函式,這個就是立即函式的寫法。

使用立即函式的好處是,能夠立即執行程式碼,省略了呼叫的步驟,還可以避免污染全域,因為我們可以讓執行的對象只存在 IIEF 裡,因此可以避免污染到其他地方的變數。另外,在這裡我沒有特別針對 IIEF 做介紹,只是解釋了 IIEF 的用法。



參考資料:
有點長的淺談 JavaScript function 函式
MDN IIFE



上一篇
JavaScript Day 6. let or const or var
下一篇
JavaScript Day 8. 淺談 Function-操作實例
系列文
我的JavaScript日常31

尚未有邦友留言

立即登入留言