JavaScript[15] -- 做用域

全局做用域

1. 在<script></script>標籤裏，即爲全局做用域。
2. 在函數體以外,<script>標籤內聲明的變量就是全局變量。

3. 全局做用域內的變量能夠在任何其餘的做用域訪問和修改。

   <script>
       vara = 0;
       function func1(){
           a = 1;
           console.log(a);     
           console.log(b);     
       };
       func1();     // 1  b is not defined
   </script>
   
   <script>
       varb = 2;        
       func1();    // 1 2
   </script>

局部做用域

1. 一個函數體就是一個新的局部做用域。
2. 函數內部定義的變量在局部做用域內。
3. 函數外部做用域不能訪問內部做用域的變量。

4. 每一個函數有不一樣的做用域,在其餘函數中是不能夠訪問的(一個函數訪問另外一個函數變量的時候,經過傳遞參數)。

   <script>       
       function func1(){
           var a = 0;  
       };
   
       function func2(){
           var b = 2;             
           console.log(b);
           console.log(a);
       };
   
       func2();    // 2   a is not defined
   
       console.log(b); // b is not defined 
   </script>

做用域鏈

1. 函數做用域裏面訪問一個變量,先從自身開始找,若是沒有,就依次往上一級做用域查找,直到全局做用域,全局做用沒有就報錯。

2. 當咱們處於某一個做用域裏面,修改某個變量值的時,先修改自身做用域,若是沒有就依次修改上一個做用域。

   <script>       
       var a = 10;
       var b = 30;
       function func(){
           var a = 20; // 聲明局部變量a
           a = 2;      // 改變局部變量a
           b = 3;      // 本做用域中無b變量，會依次更改上層做用域中的變量
           c = 4;      // 給未被聲明的變量賦值，會泄露帶window中
           d = 5;      // （未報錯？）本做用域中無d變量，會依次更改上層做用域中的變量,所有沒有則報錯
           console.log(a);
       };
   
       console.log(b);     // 30       全局變量b
       // console.log(c);     //         c is not defined
       func();             // 2        局部變量a
       console.log(a);     // 10       全局變量a
       console.log(b);     // 3        被下層做用域修改的變量b
       console.log(c);     // 4        被泄露到window中的變量c
   </script>

delete

1. 刪除未聲明的變量,可是不能夠刪除已經聲明的變量

   <script>       
       var a = 10;
       b = 30;
      
       delete a;
       delete b;
   
       console.log(a);     // 10
       console.log(b);     // b is not defined
   </script>

塊做用域（ES6新增）

1. let , const 不單單是聲明變量的區別,它們還有支持塊做用域的機制(注意:不是大括號,if,switch,for產生的塊)

2. let,consts聲明的變量不會泄露到頂層對象，只能聲明以後再使用,var能夠先賦值,在聲明

   <script>
       if(true){
           var a = 10;
           let b = 20;
           const c = 30;
       };
   
       console.log(a);     // 10
       console.log(b);     // b is not defined
       console.log(c);     // b is not defined
   </script>

注意

• 多個做用域問題

  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  
  <script>
  
      var aDiv = document.getElementsByTagName("div");
  
      for(var i = 0; i < 5; i++){  
  
          aDiv[i].index = i;      // 解決i使用var聲明時，在函數做用域中的變量i一直是最後執行結果的問題
  
          aDiv[i].onclick = function(){     
  
              console.log(i);             // i使用var聲明，結果一直都是5， i使用let聲明，結果是0 1 2 3 4 
                                         // 函數體和for循環不處於同一個做用域，需等前一個做用域執行完，纔會執行本做用域
              console.log(this.index);    // 0 1 2 3 4 
          }
      }
  
  </script>