iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 16
3
Modern Web

JavaScript基礎二三事系列 第 16

Day16 函式陳述句與函式表示式

今天來看Function Statement(函式陳述句)與Function Expression(函式表達式、表示式)

等等...StatementExpression又是什麼東西呢?

Statement

程式碼的單位,這段程式碼不會產生一個值

Expression

程式碼的單位,這段程式碼最終會產生(回傳)一個值,而這個值不一定會被開發者賦予變數。

看看以下程式碼
我們先宣告一個變數a,然後直接在瀏覽器console做後續動作

  • 輸入a = 3,瀏覽器console回傳3,這代表這段程式碼是Expression
  • 輸入10 + 5,瀏覽器console回傳15,它也是Expression
  • 輸入a === 3,回傳true(成立),它也是Expression
  • 若我們直接用物件實體語法創造物件,將物件指向變數a,瀏覽器console也回傳一個物件,它也是一個Expression

接著看看以下程式碼

if(a === 3){
    console.log(a);
}

if()(),需要布林值truefalse來決定這個程式判斷會不會成立,故()裡面會放表示式,但if(){}這段程式碼本身是陳述句,本身不會回傳值,我們也無法將它賦予、指向給變數。

var app = if(a === 3){
    console.log(a);
}

現在拉回來函式,函數的定義也有分為StatementExpression

例如:

function cat(){
    console.log("貓咪");
}

當電腦在執行轉譯的JS程式碼時,上面這段程式並不會報錯,因為它是Function Statement函式陳述句,程式碼本身不會回傳值,除非我們呼叫執行使其執行。

而這種先宣告函式定義,等待我們(開發者)呼叫執行的寫法,也稱為Function Declaration函式宣告,它會在電腦的創造階段它就會被設定進記憶體,發生提升Hoisting現象。

我們可以這樣寫不會報錯

cat()

function cat(){
    console.log("貓咪");
}

呼叫執行cat的cat()雖然寫在函式定義上面,但電腦在創造階段就先把函式設定進記憶體,在執行階段呼叫其內容,創造其函式執行環境,關於Hoisting可以參考第三天的筆記

由於函式就是物件,cat()這段程式碼,還可以理解成透過cat去查找在記憶體中的function,找到名子NAME屬性cat的函式物件,接著執行其程式屬性console.log("貓咪");,關於這部分,可以參考昨天筆記。

Function Expression函式表示式呢?

var dog = function(){
    console.log("狗");
}

dog();


當程式執行到=運算子右邊的程式碼,才建立這個函式物件,將其指向變數dog,並且它可以當成一個,所以是Function Expression表示式。

這裡的函式並沒有名子,也就是說它是一個匿名函式var dog = function()可以理解是將這個逆名函式在記憶體中的位址傳給變數dog。

而呼叫執行它的程式碼dog(),則可以理解是透過變數dog有的地址,去呼叫查找在記憶體中的該匿名函式,並執行其程式屬性console.log("狗");

那這樣寫呢?

dog();

var dog = function(){
    console.log("狗");
}

變數會在創造階段被設定進記憶體,所以程式碼實際上會像這樣:

var dog
dog();

dog = function(){
    console.log("狗");
}

發生了提升現象,呼叫函式時變數dog其實沒有函式,自然報錯dog is not a function

而函式在呼叫執行時,也可以傳參數進去。
接續上面的內容,這裡建一個Function Statement

function log(a){
	console.log(a);
}

然後也可以把Function Expression表示式當成參數傳進去

透過變數

log(dog)

或直接放入匿名函式

log(function(){
    console.log("狗");
})

結果

若是想要直接執行這個傳進去的匿名函式,原本的Function Statement可以改成這樣

function log(a){
	a();
}
log(function(){
    console.log("狗");
})


 
 
 
 
小結
今天複習了StatementExpression的差別,也複習了函式表示式、函式陳述句,瞭解函式可以當參數傳入其他函式。
明天來看JavaScript的傳值by value傳址by reference

今天的筆記內容可以參照Udemy課程:JavaScript 全攻略:克服JS 的奇怪部分4-35


上一篇
Day15 函式就是物件
下一篇
Day17 傳值by value與傳址by reference
系列文
JavaScript基礎二三事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言