[JavaScript] Scope變數範圍

[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>

 

 END 

回目錄