JavaScript 作用域

• 2020 年 9 月 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();