iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 8
0
Modern Web

好 Js 不學嗎 !? JavaScript 入門中的入門。系列 第 8

[Day08] JavaScript - 函式與作用域

大綱

  • 自訂函式
  • 函式的多重用法

自訂函式
函式是一組定義好的程式敘述,當主程式需要使用函式內定義的程式敘述時,只要呼叫該函式,就可以執行,也就是將程式『模組化』的意思。

使用函式有下列幾項優點:

  1. 可重複使用,簡化程式流程。
  2. 程式除錯容易。
  3. 便於分工合作完成程式。

自訂函式:函式的定義與呼叫
函式必須先行定義,定義好的函式並不會自動執行,只有在程式中呼叫該函式名稱之後,才會執行該函式。

定義函式:
JavaScript 中的函式包含函式名稱,定義函式的格式如下:

function 函式名稱 () {
  程式敘述;

  return 回傳值  //可省略
}

呼叫函式:
函式呼叫的格式如下:
函式名稱 ();

範例:

<script>
function myJob() {                                //定義 myJob 函式
  console.log('呼叫了 myJob 函式 !');
}

myJob()  //呼叫函式
</script>

以上範例中,我們定義了一個沒有參數的函式,並且呼叫它。如果想要讓函式能依照不同的狀況而做不同的處理,這時我們可以給函式參數。

自訂函式:函式參數
函式可以將參數傳入函式裡面,成為函式裡的參數,讓程式能夠根據這些變數做處理。函式參數只會純活在函式裡面,函式執行完畢也會跟著結束。

定義函式表示方式如下:
function 函式名稱(參數 1, 參數 2, 參數 3, ....., 參數 n) {...};

參數與參數之間必須以逗號 (,) 區隔。呼叫函式傳入的引數數量最好與函式所定義的參數數量相符合,格式如下:
函式名稱(引數 1, 引數 2, ...., 引數 n)

JavaScript 呼叫函式的時候,並不會對引數數量做檢查,只從左到右將引數與參數配對,沒有配對到的參數會是 undefined。

自訂函式:函式回傳值
當我們希望能取得函式執行處理之後的結果,那麼就可以利用 return 敘述來達成,其格式如下:
return value;
return 敘述會終止函式執行並回傳 value,如果省略 value 則表示只終止函式執行,會回傳 undefined。

補充說明:
函式內變數請使用 var 或 let 來宣告,當函式執行完記憶體也會回收,如果不進行宣告,變數會是全域變數,就算函式結束,變數也要等到整個程式結束才會被釋放。

函式的多重用法
JavaScript 的函式屬於一級函式,所謂一級函式具有下列特性:

  • 可以指定給變數
  • 可以當作引數傳給函式使用
  • 可以做為函式的回傳值
    因此 JavaScript 函式用法非常彈性,接下來來了解函式多重用法以及需要留意的限制。

函式的多重用法:函式宣告式
函式宣告式 (Function Declaration,簡稱 FD) 就是一般具名函式寫法,前面介紹的函式寫法都屬於函式宣告式。函式宣告在執行階段之前就會被建立,因此也具有提供 (Hoisting) 的特性,整個程式同一個作用域 (scope) 內都可以呼叫這個函式,呼叫函式方法不管放在函式定義之前或之後都可以,很方便就能夠重複利用。

函式的多重用法:函式表達式
函式表達式 (Function Expressions,簡稱 FE) 是用等號 (=) 將函式宣告式轉換為函式表達式,也有人稱為『函式運算式』或『函式實字 (function literal)』,格式如下:

var 變數 = function [函式名稱] (參數1, 參數1, ... , 參數n) {
  程式敘述;
  return 回傳值;
}

其用法如下:

var myFunc = function(a, b) {
  console.log('a=' +a+', b='+b);
}
myFunc(10, 20);    //執行結果:a=10, b=20

函式的多重用法:立即執行函式 (IIFE)
立即執行函式 (Immediately Invoked Function Expression,簡寫為 IIFE) 顧名思義就是可以立即執行的函式,也稱為自執行函式。我們只要在函式表達式後方加上小括號 (),JS 引擎一看到它就會建立函式馬上執行,並把執行後的值傳給變數,函式完成使命就不存在了。

立即執行函式常常被使用於只執行一次的程式碼,例如程式的初始化。使用匿名函式的好處,是執行完畢所佔的記憶體就會立即回收。

函式的多重用法:箭頭函式 (Arrow function)
箭頭函式 (Arrow function) 是一種函式精簡的寫法。基本格式如下:

(參數) => {
  程式敘述;
  return value;
}

底下是一般函式表達式的寫法:

var myFunc = function(a, b) {    //函式表達式
  return a + b;
}
console.log(myFunc(10, 20))    //呼叫函式

如果改用箭頭函式就直接以箭頭來替代 function,如下所示:

var myFunc = (a, b) => {          //箭頭函式表達式寫法
  return a + b;
}
console.log(myFunc(10, 20))  //呼叫函式

如果函式裡只有單一敘述,也可以省略大括號 {} 與 return 關鍵字,如下式:
var myFunc = (a, b) => a +b;

要特別注意的是箭頭函式沒有自己的 this、arguments、super 或 new.target,因此不能使用前幾天鐵人賽文章介紹過的方法 console.log(arguments) 來查看參數的個數。

函式的多重用法:作用域鏈 (Scope chain) 與閉包 (Closure)
有學過 JS 的我們應該都對作用域不陌生才對,函式裡的變數只能存活在這個函式裡面,這個函式的區域範圍就是變數的『作用域 (Scope)』。

可使用自由變數的內部函式我們稱它為『閉包 (Closure)』。閉包具有物件導向程式『資料隱藏』與『封裝』的特性,將私有的函式與變數包在函式裡,只透過一個公開的介面讓外部叫用,當撰寫套件程式或是需要團隊協同合作,擔心變數名稱會衝突,就可以使用閉包。


上一篇
[Day07] JavaScript - 集合物件
下一篇
[Day09] JavaScript - 物件、方法與屬性 (上)
系列文
好 Js 不學嗎 !? JavaScript 入門中的入門。30

尚未有邦友留言

立即登入留言