[JavaScript] Scope變數使用範圍,區域變數與全域變數。
JavaScript Scope
JavaScript Scope為變數的有效範圍,也就是變數可以使用的範圍。
區域變數
當變數在function裡宣告即為區域變數,區域變數只能使用於該function內。
範例:
<!DOCTYPE html>
<html>
<body>
<p id="car"></p>
<p id="type"></p>
<script>
function Myfunction() {
var Mycar = "Lexus";
}
Myfunction();
document.getElementById("type").innerHTML = typeof Mycar;
document.getElementById("car").innerHTML = Mycar;
</script>
</body>
</html>
變數Mycar宣告於function Myfunction內 ,變數Mycar為區域變數。變數會在function開始執行時建立,並在function執行完成後刪除變數。因此在function Myfunction執行完畢後,接下來的程式碼便使用不到變數Mycar了。
另外,若在function Myfunction(參數) 裡指派參數,參數也是在function裡的區域變數。
全域變數
當變數在function外宣告即為全域變數,全域變數可以在網頁所有的<script>與function使用。
範例:
<!DOCTYPE html>
<html>
<body>
<p id="car"></p>
<p id="type"></p>
<script>
var Mycar = "";
function Myfunction() {
Mycar = "Lexus";
}
Myfunction();
document.getElementById("type").innerHTML = typeof Mycar;
document.getElementById("car").innerHTML = Mycar;
</script>
</body>
</html>
變數Mycar宣告於function外,變數Mycar為全域變數。變數會在宣告時建立,並在網頁關閉後刪除變數。所以全域變數可以在function內與function外不斷使用。
另外,當指派一個值給一個從未宣告的變數時,變數會自動為全域變數。
將上面範例的宣告註解:
<!DOCTYPE html>
<html>
<body>
<p id="car"></p>
<p id="type"></p>
<script>
//var Mycar = ""; 不宣告變數,自動變為全域變數
function Myfunction() {
Mycar = "Lexus";
}
Myfunction();
document.getElementById("type").innerHTML = typeof Mycar;
document.getElementById("car").innerHTML = Mycar;
</script>
</body>
</html>
上面兩個範例都能顯示如下畫面:
全域變數與HTML
JavaScript宣告的全域變數,在HTML屬於window的物件。全域變數與window物件會互相的覆蓋。
使用window.Mycar來取得變數:
<!DOCTYPE html>
<html>
<body>
<p id="car"></p>
<p id="type"></p>
<script>
var Mycar = "";
function Myfunction() {
Mycar = "Lexus";
}
Myfunction();
document.getElementById("type").innerHTML = typeof window.Mycar;
document.getElementById("car").innerHTML = window.Mycar;
</script>
</body>
</html>