JavaScript 作用域

阿新 • • 發佈：2020-09-16

1.作用域

1.1作用域概述

通常來說，一段程式程式碼中所用到的名字並不總是有效和可用的，而限定這個名字的可用性的程式碼範圍就是這個名字的作用域。作用域的使用提高了程式邏輯的區域性性，增強了程式的可靠性，減少了名字衝突。

JavaScript（es6前）中的作用域有兩種：

全域性作用域
區域性作用域（函式作用域）

1.2 全域性作用域

作用於所有程式碼執行的環境(整個script標籤內部)或獨立的js檔案。

<script>
    var num = 10;
    console.log(num);
</script>

1.3 區域性作用域

    作用於函式內的程式碼環境，就是區域性作用域。 
 
    因為跟函式有關係，所以也稱為函式作用域。

 function fn() {
        // 區域性作用域
        var num = 20;
        console.log(num);
      }
      fn();

1.4 jS沒有塊級作用域

塊作用域由 { } 包括。
在其他程式語言中（如 java、c#等），在 if 語句、迴圈語句中建立的變數，僅僅只能在本 if 語句、本迴圈語句中使用，如下面的Java程式碼：

java有塊級作用域：
```
if(true){
  int num = 123;
  system.out.print(num);   
// 123
}
system.out.print(num);    // 報錯
```
以上java程式碼會報錯，是因為程式碼中 { } 即一塊作用域，其中宣告的變數 num，在 “{ }” 之外不能使用；而與之類似的JavaScript程式碼，則不會報錯。

js中沒有塊級作用域（在ES6之前）
```
if(true){
  var num = 123;
  console.log(123); //123
}
console.log(123);   //123
```

2 .變數的作用域

在JavaScript中，根據作用域的不同，變數可以分為兩種：

全域性變數
區域性變數

2.1 全域性變數

在全域性作用域下宣告的變數叫做全域性變數（在函式外部定義的變數）。

全域性變數在程式碼的任何位置都可以使用
在全域性作用域下 var 宣告的變數是全域性變數
特殊情況下，在函式內不使用 var 宣告的變數也是全域性變數（不建議使用）

2.2 區域性變數

在區域性作用域下宣告的變數叫做區域性變數（在函式內部定義的變數）

區域性變數只能在該函式內部使用
在函式內部 var 宣告的變數是區域性變數
函式的形參實際上就是區域性變數

2.3 全域性變數和區域性變數的區別

全域性變數：在任何一個地方都可以使用，只有在瀏覽器關閉時才會被銷燬，因此比較佔記憶體
區域性變數：只在函式內部使用，當其所在的程式碼塊被執行時，會被初始化；當代碼塊執行結束後，就會被銷燬，因此更節省記憶體空間

2.4 注意：

如果在函式內部沒有宣告直接賦值的變數也屬於全域性變數
函式的形參也可以看作區域性變數

3.作用域鏈

只要是程式碼都一個作用域中，寫在函式內部的區域性作用域，未寫在任何函式內部即在全域性作用域中；如果函式中還有函式，那麼在這個作用域中就又可以誕生一個作用域；根據在[內部函式可以訪問外部函式變數]的這種機制，用鏈式查詢決定哪些資料能被內部函式訪問，就稱作作用域鏈。

案例分析1：
function f1() {
    var num = 123;
    function f2() {
        console.log( num );
    }
    f2();
}
var num = 456;
f1();

作用域鏈：採取就近原則的方式來查詢變數最終的值
var a = 1;
function fn1() {
    var a = 2;
    var b = '22';
    fn2();
    function fn2() {
        var a = 3;
        fn3();
        function fn3() {
            var a = 4;
            console.log(a); //a的值 ?
            console.log(b); //b的值 ?
        }
    }
}
fn1();