JavaScript 區域變數、全域變數及函數作用域範例

在 JavaScript 中，全域變數作用域與函數內宣告的區域變數作用域彼此獨立，但在特定情況下可能互相干擾。以下為 6 個測試範例展示這些差異：

//1.a：呼叫函式 abc()，發生在定義全域變數 varExample 之前

<script type="text/javascript">

abc(); // 呼叫函式abc()

window['varExample']=90; // 宣告全域變數 varExample 並賦予初值為90

console.log(varExample);

function abc(){ // 定義函式abc()

console.log(varExample); // 由於 JavaScript 的變數提升 (hoisting) 而 varExample 尚未宣告導致錯誤。

}

console.log(varExample);

</script>

//1.b：呼叫函式 abc()，是在定義全域變數 varExample 之後 (//1.a 的錯誤消失了)

<script type="text/javascript">

window['varExample']=90;

abc();

console.log(varExample); //90

function abc(){

console.log(varExample); //90

}

console.log(varExample); //90

</script>

//2：區域變數宣告在console.log(varExample)後

<script type="text/javascript">

window['varExample']=90; // 宣告全域變數 varExample 並賦予初值為90

console.log(varExample); //90

abc(); // 呼叫函式abc()

function abc(){ // 定義函式abc()

console.log(varExample); // undefined，由於 JavaSript 的變數提升，雖然變數 varExample 在函式內部被宣告，但在實際賦值前，它的值為 undefined。

var varExample=1;

}

console.log(varExample); //90

</script>

//3：區域變數宣告在console.log(varExample)前

<script type="text/javascript">

window['varExample']=90; //宣告全域變數 varExample 並賦予初值為90

console.log(varExample); //90 

abc(); // 呼叫函式abc()

function abc(){ // 定義函式abc()

var varExample=1;

console.log(varExample); //1

}

console.log(window.varExample); //90

</script>

//4：全域變數重新指派新值在console.log(varExample)前或後

<script type="text/javascript">

window['varExample']=90; //宣告全域變數 varExample 並賦予初值為90

console.log(varExample); //90 

abc(); // 呼叫函式abc()

function abc(){ // 定義函式abc()

console.log(varExample); //90

varExample=varExample+1;

console.log(varExample); //91

varExample=varExample+2;

}

console.log(varExample); //93，全域變數varExample的值變成93

</script>

//5：區域變數宣告在console.log(varExample)前

<script type="text/javascript">

window['varExample']=90; // 宣告全域變數 varExample 並賦予初值為90

console.log(varExample); //90 

abc(); // 呼叫函式abc()

function abc(){ // 定義函式abc()

var varExample=varExample+1;

console.log(varExample) ; // NaN，由於局部變數的提升 (hoisting)，使 var varExample 在運算時是 undefined，導致結果為 NaN。

}

console.log(varExample);//90

</script>

//6：區域變數宣告在console.log(varExample)前，函式abc(varExample)有一參數

<script type="text/javascript">

window['varExample']=90; // 宣告全域變數 varExample 並賦予初值為90

console.log(varExample); //90 

abc(varExample); // 呼叫函式 abc()，並同時引入變數 varExample

function abc(varExample){ // 定義函式abc(varExample)，參數varExample

var varExample=varExample+1;

console.log(varExample);//91

//varExample=varExample+2;//93

varExample=123;

console.log(varExample);//123

}

console.log(window.varExample);//90，本式全域變數與區域變數互不干擾

</script>

結論:

• 無論是全域變數還是區域變數，都應在使用前宣告並賦予初始值。尤其是在試驗1、2 和 5 中，變數在使用前未宣告，這會導致錯誤或非預期行為，應引起注意。