【JavaScript高階進階】JavaScript變數/函式提升的細節總結

// 測試1

console.log(`----------test1--------------`);

console.log(global); // undefined

var global = `hahaha`;

console.log(global); // hahaha



function fn(){

console.log(a); // undefined

var a = `aaa`;

console.log(a); // aaa

}

// 如果一個變數沒有定義的話就去輸出，就會報出錯誤

//console.log(a); // error : undefined

fn();





// 程式碼執行思路解析

/*var global; // 變數提升，全域性作用域範圍內，此時只是宣告，並沒有賦值

console.log(global); // undefined

global = `hahaha`; // 此時給變數賦值

console.log(global); // 輸出已經賦值過的global變數



function fn(){

var a; // 變數提升為函式作用域範圍內

console.log(a);

a = `aaa`;

console.log(a);

}

fn();*/





// 測試2 ： 函式提升

console.log("------------------函式提升測試-----------------");

console.log(f1); // [Function: f1]

console.log(f2); // undefined



function f1(){ // 這塊程式碼會自動函式提升，整個程式碼塊提升到檔案的最開始部分



}

var f2 = function(){



}

console.log(f2);




// 測試3

console.log("------------test3---------------");

// 第一步會先去執行f1（）函式，執行完畢這個函式之後開始列印輸出這個函式的返回值

console.log(f1()); // undefined 123456hahaha

function f1(){

console.log(`aaa`); // aaa

return `123456hahaha`;

}



console.log(f4); // var f4 undefined

var f4 = function(){

console.log(`f4 executed!`);

return `f4 hahaha!`;

}

console.log(f4, typeof f4); // 這裡得到的實際上是一個函式





// 測試4

console.log(`-------------test4------------`);

console.log(aaa); // undefined

aaa = `987654321`; // 987654321

console.log(aaa);

var aaa = `123456789`;

console.log(aaa); // 123456789

var aaa = `789`;

console.log(aaa); // 789




// 測試5

console.log(`--------------test5----------------`);

var a = `12346789`;

(function(){

// 這裡的a預設是回去尋找全域性作用域裡面的a變數

console.log(a); /// error : a is not defined

a = `113579`;

var b = `bbb`;

console.log(a);

})();





// 測試6

// 在方法外邊不加上一個var是不能來定義變數的

//01. 都加var，在方法內則是區域性變數，在方法外則是全域性變數。

//02. 在方法內,加var為區域性變數，不加var則是全域性變數（在執行當前方法之後）

//console.log(bianliang); // error : is not defined

console.log(`-----------------test6-----------------`);

function test(){

//console.log(shuchubianliang); // error : is not defined

}

test();



var aaaa = `I`m a in all`

function test1 () {

// 相當於是var a, 然後輸出a的值，當然是undefined

console.log(aaaa)

//console.log(window.a)



var a = `I`m a in test1`

console.log(a)

}



test1()




// JavaScript會把作用域裡的所有變數和函式提到函式的頂部宣告

// JavaScript會使用undefined預設值建立變數a

console.log(aaaaaaa); // error

var aaaaaaa = `11`;





console.log(`------------test7-------------`);

//思考題： 請問下面的結果是什麼？ 為什麼？ 寫下你的答案

show();

var a = true;

if( a ){

function show(){

console.log( 1 );

}

}else {

function show(){

console.log( 2 );

}

}




//函式宣告, 形如:

function show(){

console.log( `函式宣告方式` );

} // 會被提升為全域性



//函式表示式, 形如:

var show = function(){

console.log( `表示式方式` );

} // 不會被提升為全域性的