iT邦幫忙

0

30天不間斷的文章之旅_函式的基本介紹

哎呀!因為週末打了疫苗,不小心燒了兩天醒醒睡睡的,本來說好是30天不間斷的文章之旅,斷了2天,大家原諒原諒我吧~

那今天要來介紹的是JavaScript裡最常見、最常被使用到的函式 Function。 那老樣子若有錯誤或需要補充的地方,也歡迎在下方留言讓我知道喔~~~謝謝大家!!

函式的結構

https://ithelp.ithome.com.tw/upload/images/20211129/20142990ITKUV6sIFU.jpg
由上面的圖可以知道

  1. 當我們要宣告一段函式時,需要使用 function 的關鍵字。
  2. 後面加上函式的名稱,函式可以傳入參數,但必須先給予參數一個名稱(這裡給a),傳入的參數跟參數的名稱沒有關係,而傳入的參數可以是純值、可以是物件、也可以是另一段函式。
  3. 函式內可以包裹一段程式碼,而範圍就是限制在{}內。
  4. 可以使用 return 回傳一段值。
  5. {}外可以呼叫函式執行,()內的數值就是參數,會被傳入到函式內部使用。
    因此我們可以知道,函式是將一或多段的程式碼包裝起來,可以重複使用也方便維護。

函式定義的方式

  • 函式陳述式
  • 函式表達式
    (這裡介紹常見的兩個方式)

1. 函式陳述式

函式陳述式應該是最常見宣告函式的方式
https://ithelp.ithome.com.tw/upload/images/20211129/20142990ITKUV6sIFU.jpg
像一開始的範例就是使用這個方式。
使用函式陳述式的方式建立的函式,必須給予函是一個名稱,也稱為具名函式。在這裡的函式名稱 aFunction

2. 函式表達式

let aFunction = function(width, height) {
 console.log(width, height)
 return width * height;
}

console.log(aFunction(3, 4)); // 12

把一段函式透過等號運算值賦予到另一個變數上,這個就是函式表達式,這個方式可以不用幫函式加入名稱,因此也稱為匿名函式
那如果我們想要在函式表達式的函式加上名字,可以嗎?
ok!是可以這麼做的

let aFunction = function anotherFunction(width, height) {
  console.log(anotherFunction);
  return width * height;
}
console.log(aFunction(3, 4)); // 12

但是必須注意一個重點,這個 anotherFunction只會在自己的函式區塊內有效,也就是說:

let aFunction = function anotherFunction(width, height) {
  console.log(anotherFunction); // function
  return width * height;
}
console.log(aFunction(3, 4)); // 12
console.log(anotherFunction); //anotherFunction is not defined

跳出自己的函式區塊之後,anotherFunction就不存在了。

全域變數與區域變數

什麼是全域變數?什麼是區域變數?我們透過下面程式碼來了解。

var global = '全域變數';
function aFunction() {
  var global = '區域變數';
  console.log(global); //區域變數
}
aFunction();
console.log(global); //全域變數

在上述程式碼中,我們可以看到有兩個一樣的變數名稱global,但是一個在aFunction函式外,另一個aFunction函式內。在ES6以前,JavaScript 變數有效範圍的最小單位是以 function 做切分的。 因此在aFunction函式外的global是全域變數,而在aFunction函式內的global是屬於區域變數。

全域變數是在整份程式碼內都有效,而且會被記憶進電腦的記憶體內佔用空間。
但是區域變數只在該函式內有效,當函式執行完,區域變數也隨即被清空,記憶體會被釋放。也就是說,跳出該函式的範圍{},就無法取得函式內所宣告的變數了。

因此我們試著在 aFunction 內跟外取得 global變數,會發現我們取得了兩個不一樣的值,這個就是全域變數與區域變數的概念。

Hoisting (提升)

在上一篇變數宣告時,有提到變數會有Hoisting的狀況產生,還記得嗎?

console.log(myName); // undefined
var myName = 'Iven';

如果在 var 的變數前加入 console.log(),這個時候並不會出錯,則是會跳出 undefined,這表示這個變數在記憶體中已經有一個位置,只不過目前並沒有值。

在函式中也是有著 Hoisting 的概念的。

console.log(aFunction);  //undefined
aFunction(); // aFunction is not a function
var aFunction =  function() {
  var global = '區域變數';
  console.log(global);
}

在函式表達式的 Hoisting 跟變數宣告一樣,在函式執行之前,會先在記憶體中加入一個位置,但還沒有把函式賦予到指定的變數上,因此會得到 aFunction is not a function的結果。

那函式陳述式呢?
函式陳述式就不一樣囉!函式陳述式在創造階段就會優先載入函式。

aFunction('一個人');
function aFunction(people) {
  console.log('我是'+people); //我是一個人
}

因此,在函式前方直接執行函式也可以運行。

以上是今天介紹的函式的基本觀念,當然函式的學問絕對不只這些,還有立即函式、ES6推出的箭頭函式,我會再慢慢介紹的。
如果我有寫不對的地方,如果我有寫錯或是有需要補充的,都歡迎大家跟我說喔~
如果覺得我寫得不錯,很清楚的話也歡迎讓我知道喔~
謝謝大家觀看 /images/emoticon/emoticon07.gif


尚未有邦友留言

立即登入留言