iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
自我挑戰組

邊工作邊進行前端學習之旅系列 第 19

[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)


上一篇
[Day 18] JS - 變數提升Hoisting
下一篇
[Day 20] JS - 變數宣告
系列文
邊工作邊進行前端學習之旅30

尚未有邦友留言

立即登入留言