Day21. 函式宣告和函式運算式

Day21. 函式宣告和函式運算式

本日閱讀進度:第十章 一級函式(429~441頁)

重點摘要:

1.函式宣告

到目前為止,我們都是使用function關鍵字、名稱、參數以及程式碼區塊進行標準的函式宣告(function declaration):

function meow(num) {
  for (var i = 0; i < num; i++) {
    console.log("Meow!");
  }
}
meow(3);
//"Meow!"
//"Meow!"
//"Meow!"

2.函式運算式

如果在述句裡使用function關鍵字,稱之為函式運算式(function expression)

var wang = function(num) {
  for (var i = 0; i < num; i++) {
    console.log("Wang!");
  }
}
wang(3);
//"Wang!"
//"Wang!"
//"Wang!"

3.瀏覽器解析流程

假設現在有一段程式碼如下:

//part1
var migrating = true;

//part2
var wang = function(num) {
  for (var i = 0; i < num; i++) {
    console.log("Wang!");
  }
};

//part3
function meow(num) {
  for (var i = 0; i < num; i++) {
    console.log("Meow!");
  }
}

//part4
if (migrating) {
  meow(3);
  wang(3);
}

瀏覽器解析頁面時會先找尋函式宣告,也就是part3。找到後,它就會建立一個函式,並把函式址參器賦值給一個跟函式同名的變數。

之後瀏覽器會回到程式碼頂端,由上到下開始執行程式。也就是:

part1 => part2 => part3(由於已經處理過,會跳過) => part4(印出3次”Meow!”和3次”Wang!”)

在part2,瀏覽器會建立一個址參器以便指向這個新的函式,並把該函式賦值給wang變數。

4.函式宣告和函式運算式的區別

  • 使用函式宣告時,會先進行函式的建立和設置,之後才會執行其餘的程式碼;使用函式運算式時,函式的建立是在程式碼執行期間進行的。

  • 使用函式宣告時,它會自動替你把函式址參器賦值給一個變數;使用函式運算式時,需要自己把所得到的址參器賦值給一個變數。

ps.江郎才盡。今天的標題沒有梗。

本文同步發表於iT邦幫忙

Recent post