首頁 > 文章 > web前端 > javascript中作用域的解說與應用（程式碼範例）

javascript中作用域的解說與應用（程式碼範例）

不言原創: 2018-09-14 17:54:591252瀏覽

本篇文章帶給大家的內容是關於javascript中作用域的講解與應用（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

JavaScript作用域

作用域是可存取變數的集合。

在JavaScript中，物件和函數同樣也是變數。

在JavaScript中，作用域可存取變量，對象，函數的集合。

作用域在函數內可以修改。

JavaScript局部作用域

變數在函數內聲明，變數為局部變數（局部作用域）

局部變數：只能在函數內部存取。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <button onclick="myFunction(1,2)">试一试</button>
    <p id="demo"></p>
</body>
<script type="text/javascript">
    function name() {
        //在此处声明一个变量
        var a = 10;
        //函数内可以调用 a
    }
    //此处（函数外）不能调用变量 a
　　//因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量名
　　//局部变量在函数开始执行时创建，函数执行完毕后，变量会自动销毁

</script>
</html>

JavaScript全域變數

變數在函數外定義，即為全域變數。

全域變數有全域作用域，網頁中所有腳本和函數都可使用。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <button onclick="myFunction(1,2)">试一试</button>
    <p id="demo"></p>
</body>
<script type="text/javascript">
    /* 在此处声明一个全局变量 */
    var a = 10;
    function name() {
        //函数内可以调用 a
    }
    //此处也能调用变量 a
</script>
</html>

如果變數在函數內沒有宣告（沒有使用var關鍵字宣告）改變量為全域變數。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <button onclick="myFunction(1,2)">试一试</button>
    <p id="demo"></p>
</body>
<script type="text/javascript">
    
    function name() {
        /* 在此处声明一个变量 */
          a = 10;
　　　　　/* a没有使用var关键字声明，则默认为全局变量 */

    }
    
</script>
</html>

JavaScript變數生命週期

變數的生命週期在它的宣告時初始化。局部變數在函數執行完畢後銷毀。全域變數在頁面關閉後銷毀。

函數參數

函數參數只在函數內作用，是局部變數。

HTML中的全域變數

在HTML中，全域變數是window對象，所有資料變數都屬於window對象。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <button onclick="myFunction(1,2)">试一试</button>
    <p id="demo"></p>
</body>
<script type="text/javascript">
    function name() {
         a = 10;
    }
    //此处可使用window.a调用变量 a
</script>
</html>

全域變數或函數可以覆寫window物件的變數或函數。局部變數包括window對象，可以覆寫全域變數和函數。

在es6中提供了let關鍵字和const關鍵字

let的宣告方式與var相同，用let來取代var宣告變量，就可以把目前變數限制在程式碼區塊中。

使用const宣告的是常數，其值一旦被設定就無法被更改。

javascript中作用域的解說與應用（程式碼範例）

相關文章