84-作用域与作用域链

作用域

• 作用：变量的使用范围

分类

• 全局作用域

  • 全局变量，在页面任意位置都可以使用

• 局部(函数)作用域

  • 局部变量，只能在声明变量的函数内使用

• 块级作用域

  • 在 当前一对{}中有效

var a = 1
function one() {  
    var b = 2   
    console.log("one:", a);// 1    
    console.log("one:", b);// 2
}
function two() {  
    var c = 3    
    console.log("two:", a);// 1   
    console.log("two:", b);// 报错   
    console.log("two:", c);// 3
}
one()
two()
console.log("global:", a);// 1
console.log("global:", b);// 报错 
console.log("global:", c);// 报错

• 特例：没有使用关键字声明变量时，该变量自动变为全部变量，在页面任意位置都可以使用该变量

  function one() {  
      a = 1;
  }
  one()
  console.log(a);//1
  

作用域链

• 在作用域发生嵌套时，会形成变量的链式结构进行访问，称为作用域链

  • 当前作用域中没有找到该变量，返回到上一层作用域中进行寻找，找到了则直接使用该变量；没有找到则再返回到上一层作用域进行寻找，直到在全局中仍然未找到该变量，则程序直接报错

• 作用域链的作用：决定了变量的访问顺序（从近到远）

  var a = 1
      function one() {  
      var a = 2 
      function two() {    
          function three() {  
              console.log(a);  // 2  three->two->one    
          }      
      three()     
      console.log(a); // 2  two->one   
      }  
      
      two()  
      console.log(a); //2  one
  }
  
  one()
  console.log(a); // 1
  

• 练习

  var a = 1;
  function one() {    
      var b = 2;    
      console.log(`one:${b}`);//  one 2  
  
      function two() {    
          var c = 3;   
          console.log(`two:${c}`);// two 3  
  
      function three() {        
          var d = 4;          
          console.log(`three:${d}`);//three 4     
      }      
  
      function four() {   
      var e = 5;        
      console.log(`four:${e}`);  //four 5            
      console.log(`four:${b}`);  // four two one 2            
      console.log(`four:${d}`); // 报错  未定义   
      }     
      three();     
      console.log(`two:${b}`);//   two  ->one 2    
      four();     
      console.log(`two:${e}`); //  报错   
      }   
      two();  
      console.log(`one:${c}`);// 报错
      }
      one();
      console.log(`global:${a}`); //1
      
      //依次输出为什么？   2->3->4->2->5->2->报错->报错->报错->1