Scope介紹

w3schools：Scope determines the accessibility (visibility) of variables

• 變數在程式中可以被存取的範圍。

Scope 的分別

以範圍來區分，可分為區域變數，全域變數。

• 區域變數(Local Variable): 可呼應以函式做區隔，函式內進行宣告且是有效的範圍，為區域變數。
• 全域變數(Global Variable): 在所有作用域都可存取的變數
  • 所有人都看得到它
  • 在 function 中，找不到 a 的宣告，所以往上一層找，a=20

    var a = 20
    function test() {

      console.log(a);//20
    };
    test();
    console.log(a);// 20

• 在fuction中有宣告 var a = 10;
  • 注意test()中宣告var a = 10;，只有在該範圍內可以取得

    var a = 20
    function test() {
      var a = 10;
      console.log(a);//10
    };
    test();
    console.log(a);// 20

JS的作用域，function來區隔

• 可以看到在函式中，可以得到a變數宣告的值
• 但在外面的console.log(a)就沒有

   function test() {
      var a = 10;
      console.log(a);//10
    };
    test();
    console.log(a);// a is not defined

在ES6： let 與 const 對 scope 的定義

ES6以前，如使用 var 宣告，作用域是以 function 為基準
ES6開始，只要有 let 和 const 宣告的block({ })就是一個新的作用域 => Block Scope

//var的作用域是整個function，所以他可以取得b = 10
  function test() {
      var a = 60;
      if (a === 60) {
        var b = 10
      }
      console.log(b); //10
    }
    test()

//在if中，宣告方式改為let，就無法印出b，因為他的作用域就只有在if這個block中
 function test() {
      var a = 60;
      if (a === 60) {
        let b = 10
      }
      console.log(b); //ReferenceError: b is not defined
    }
    test()

補充：範圍鏈 Scope chain

• 會循著範圍鏈（Scope chain）一層一層往外找
• 在inner()中，沒有宣告a，所以它會往上一層找
  • 可以觀察語法行數，以及截圖結果的呈現

      var a = 'global'
      function test() {
      var a = 'test scope a';
      var b = 'test scope b';
      console.log(a, b);  //JS 19行
      function inner() {
        var b = 'inner scope b';
        console.log(a, b);  //JS 22行
      }
      inner();
    }

    test();

    console.log(a);  //JS 29行

• 透過Scope in JavaScript圖解，呈現出作用域範圍，以及可以取得的變數有哪幾個
  

參考資料：
lidemy:進階 JavaScript：那些你一直搞不懂的地方
Scope 作用域
Day 6：湯姆克魯斯與唐家霸王槍——變數的作用域(Scope)