[Day 19] JS - 作用域 Scope

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)