iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 5
1
Modern Web

JavaScript 初心者筆記系列 第 5

JavaScript 初心者筆記: 函式基本觀念

在之前的文章中,我們反覆認知到變數就是將我們需要用到的資料儲存起來;而我們接下來要認識的函式,則是幫助我們預先將某項工作所需要的執行步驟先儲存起來,當有需要時就可要求函式執行這些步驟。

函式的意義

函式的用途在於,如果需要做重複性很高的動作,可以把這個動作設計成一組程式碼。通常在做比較大型的應用時,都會切成好幾個函式,例如:一個函式用來新增、一個函式用來刪除……。這樣程式碼就會變得比較精簡。我認為函式可以理解成自己設計的公式組合,裡面可以代入參數,以達到特定目的或答案。

相較於一般程式碼是由上到下依序讀取,函式則會被解譯器優先讀取,也就是說,就算先呼叫函式名稱再宣告函式內容,依然可以正常執行,這就是所謂的提升(hoisting)。

函式的寫法

基本組合:宣告函式 + 函式名稱

function greet(){
  alert('歡迎光臨!');
  alert('請問你要點些什麼?');
}

函式名稱後面有小括號,裡面可以帶入參數。大括號裡放的則是你希望函式做的動作。寫好之後並不會執行,需要執行該函式時,只要呼叫它就可以了。呼叫方式如下:
greet();

上面這種經過宣告而成立的函式稱為命名函式,必須經過呼叫才會執行;而還有另一種函式叫做匿名函式,顧名思義,是不用取名字的,而且位置要放在我們期望它執行的地方,解譯器執行到這一行的時候才會執行,因此也無法另外呼叫它。

//點擊按鈕觸發匿名函式
document.getElementById('按鈕 id 名').onclick = function(){
  alert('你好');
}

全域變數與區域變數

乍看之下「變數」不應該放在函式篇,但是以下要談的東西必須搭配函式的概念才比較好理解。讓我們來了解一下全域與區域變數的意涵。

  • 區域變數:寫在函式內的變數稱為區域變數,只在函式內有效,當函式執行完以後就結束了,所以當我們在函式的外面再去查詢的時候是查不到變數值的。
  • 全域變數:寫在函式之外稱為全域變數,會被記憶在 window 物件中(window 物件是什麼之後會提到),但是記憶體會越來越肥,所以還是比較推薦使用區域變數。

如何在函式外讀取區域變數值

如果要在函式外把區域變數撈出來,只要在函式外宣告一個空值的全域變數,而函式內不需再另外宣告變數。之後,呼叫函式,再用 console.log(變數名),就查得出值了。

// 宣告一個空值全域變數
var total;
function count(num,price){
  // 不需再次宣告,直接賦值
  total = num * price;  
}
// 記得要先執行函式才讀得到函式內的變數值
count(8,10);
// 查詢,可以查到 total 為 80
console.log(total);

因為區域變數只有在這個函式內才被賦予意義(值),函式結束後值就消滅,所以如果在函式內外同時進行宣告,那在函式外查詢變數的話依然是空值喔。
所以只需要在函式外宣告一次變數,函式內的程式碼發現內部沒有變數宣告時,就會自己去找外面是否有變數宣告,如此一來,之後就可以在函式外查得到變數值了。


關於函式的基本觀念在本篇大致講完了,下一篇要講的是如何實際用函式執行功能。


上一篇
JavaScript 初心者筆記: 用變數進行數學運算
下一篇
JavaScript 初心者筆記: 函式實際操作 - 參數與數學運算
系列文
JavaScript 初心者筆記30

尚未有邦友留言

立即登入留言