iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
自我挑戰組

JavaScript老學徒筆記—馬步篇系列 第 13

【Day12】能力封裝--函式

函式的作用在於將一段或多段函式包裝在一起,方便反覆使用,一目了然也方便維護。當需要重複執行一次計算或重複做一件事的時候,就會需要用到函式。

像這樣就是一個函式:

function firstFun () {
	console.log('桃花島的五行八卦陣');
}

函式執行前要先被定義,但是定義好的函式不會自動執行,要在程式中呼喊愛情,啊!不對!是呼叫函式,函式才會動起來!

最常見的函式宣告方式有以下三種:

  • 函式宣告(Function Declaration)
  • 函式表達式(Function Expression)
  • 透過new Function關鍵字建立函式

函式宣告(Function Declaration)

function 函式名稱 (參數1, 參數2...){
	//do something
}
  • 用function開頭,後面接著函式名稱。
  • ()小括號中放的式參數,參數可以不只一個,每個參數中間以逗號 「,」隔開。
  • {}大括號中放的是執行的程式內容。

我們已可以把參數帶入function中使用:

function firstFun (name) {
	console.log( name + '闖入桃花島的五行八卦陣');
}
firstFun('郭靖')  //郭靖闖入桃花島的五行八卦陣

函式表達式(Function Expression)

函式表達式長這個樣子:

var 變數名稱 = function 函式名稱(){
	//do something
}

函式表達式清楚地展示了如何將一個函式儲存在一個變數中,從而透過變數我們可以反覆地叫用函式。函式的名稱只有在「自己函式的區塊內」有效,離開這個函式的範圍,函式的名稱就失去了效用。

透過「變數名稱()」就可以呼叫函式,所以「函式名稱」不是一定要的,這種沒有名字的函式在JavaScript是允許的,通常被稱為「匿名函式」。

var 變數名稱 = function (){
	//do something
}
var firstFun = function  (name) {
	console.log( name + '闖入桃花島的五行八卦陣');
}
firstFun('郭靖')  //郭靖闖入桃花島的五行八卦陣

透過new Function關鍵字建立函式

第三種則是透過 new關鍵字 + Function的方式來建立函式物件。

var 變數名稱 = new Fnction ('參數','do something')

因為這種方式,每次執行都要解析字串,效能甚差,實務上很少使用。

return

對一個新手而言,剛遇到這個return實在是丈二金剛摸不著腦?return到底是要轉到哪裡去?

後來搞懂了,原來函式執行後,return會中止程式執行並回傳一個值(value),如果沒有值可以回傳,則會會傳undefined。

var funNoReturn = function square(num){
	num * num;
}
funNoReturn(2);
//undefined  沒有回傳值,所以undefined
var funReturn = function square(num){
	return num * num;
}
funReturn(2);
//4  加上retrurn之後,就有回傳值了

回傳值是函式輸出的值,可以帶入其他的程式碼中繼續運算。函式可以接受多個參數,但是只能回傳一個值,如果沒有告訴函是要回傳什麼,就會回傳undefined。

也可以把函式呼叫當作值來使用:

var funReturn = function square(num){
	return num * num;
}

funReturn(2) + funReturn(3);
//13

我們也可以利用return來結束函示執行,如果函式的任意一個參數無效,就提前跳出函式。無效指的是,參數不符合函式所定義的條件。

var fun = function (num){
	if(num > 5){
		return;
	}
	return num * num;
}
fun(6);  //undefined
fun(2);  //"4"

fun(6)因為num >5,參數符合if條件 ,就執行{}內程式碼,return跳出了函式,回傳undefined。

fun(2)因為num<5,參數不符合if條件,所以繼續往下執行return num * num,回傳值為4。


上一篇
【Day11】忙得團團轉的迴圈
下一篇
【Day13】return的妙傳得分
系列文
JavaScript老學徒筆記—馬步篇35

尚未有邦友留言

立即登入留言