Tag: Hoisting

想必這個是踏入JavaScript第一個大魔王吧!? (疑

首先我們要提2個階段:

• 創造階段
• 執行

給予肝肝的工程師小額捐款'v' ETH/ERC20

範例1:  
function callname(){
    console.log('Jen');
    //Jen 這個callname() 裡面的內容已經被完整的創造
}

callname();

範例2:  
callname();

function callname(){
    console.log('Jen');
    //Jen 這個callname() 裡面的內容已經被完整的創造
}

範例1~2的輸出結果

解釋:

Function 函式會優先被創造( 提升 )

內容陳述式也是! *不包含記憶體區塊

你會發現, 函式內容為”字串” 陳述式

下一段改成”變數內容”, 會怎麼樣呢??

變數_內容

範例3
//創造階段
function callname(){
    console.log(Jen);
    //Jen沒有創造階段, 沒有記憶體空間, 也沒有執行
}

//執行
callname();

範例3的輸出結果

我們將範例3 ,var變數進行創造 “記憶體區塊”

//創造階段
var  Jen 
function callname(){
    console.log(Jen);
    //Jen 在創造階段已經有記憶體區塊
}

//執行
callname();

解釋:

對於var 創造, 會將var 宣告的動作宣稱 “提升”

會發現僅僅是沒在 記憶體區間內 給予 “數值”。

好啦! 給予Jen 一個數值之後

範例4
//創造階段
var  Jen =1;

///創造階段
function callname(){
    console.log(Jen);
    
}

//執行階段 此時才會把 Jen= 1 賦予值
callname();

解釋:

第一行 var Jen =1; 將記憶體區間宣告出來 = “提升”

要到了callname() 執行階段, var Jen 才會被賦予 = 1

我把第一行 var Jen=1

移動到Function 後方檢驗看看??

範例5
function callname(){
    console.log(Jen);
    
}

var Jen=1;
callname();

Funtion 之後, var Jen=1 執行創造階段 (提升)

再來從執行階段>> callname() 將賦予值給 Jen

一樣按照 :

• 創造階段
• 執行

結語

• Function & 內部陳述式, 優先Hoisting /提升

• var 宣告記憶體區間 Hoisting /提升

這只是第一階段的提升觀念
畢竟先了解創造>>執行的順序, 之後把各種觀念加進去, 對於往後對JS的深度語法有很大的幫助喔!