面试必备-作用域、作用域链、预解析

1.变量分为局部变量和全局变量，

2.作用域：就是变量的使用范围；所以，作用域也分为局部作用域和全局作用域

3.JS中没有块级作用域，也就是说：一对大括号{}定义的变量，这个变量可以在大括号外面使用。

　　栗子1：

  <script>
   while(true){
     var num = 10;
     break
   }
   console.log(num)   //10
  </script>

　　栗子2：

  <script>
   {
     var num = 10;
   }
   console.log(num)   //10
  </script>

　　栗子3：

  <script>
   if(true){
     var num = 10;
   }
   console.log(num)   //10
  </script>

4.函数中定义的变量是局部变量

  <script>
   function f1(){
     var num = 10;
   }
   console.log(num)   //Uncaught ReferenceError: num is not defined
  </script>

5.作用域链：变量的使用，从里向外，层层搜索,搜做到了就可以直接使用了

　　栗子1：

  <script>
  var num = 10;         //作用域链：级别0
  function f1(){
    var num = 20;       //作用域链：级别1
    function f2(){
      var num = 30;     //作用域链：级别2
      console.log(num)
    }
    f2()
  }
  f1();       //30
  </script>

 

　　栗子2：

 

  <script>
  var num = 10;         //作用域链：级别0
  function f1(){
    var num = 20;       //作用域链：级别1
    function f2(){
      // var num = 30;     //作用域链：级别2
      console.log(num)
    }
    f2()
  }
  f1();       //20
  </script>
</body>

 

　　栗子3：

 

  <script>
  var num = 10;         //作用域链：级别0
  function f1(){
    // var num = 20;       //作用域链：级别1
    function f2(){
      // var num = 30;     //作用域链：级别2
      console.log(num)
    }
    f2()
  }
  f1();       //10
  </script>

 

　　栗子4：

 

  <script>
  // var num = 10;         //作用域链：级别0
  function f1(){
    // var num = 20;       //作用域链：级别1
    function f2(){
      // var num = 30;     //作用域链：级别2
      console.log(num)
    }
    f2()
  }
  f1();       //Uncaught ReferenceError: num is not defined
  </script>

 

6.预解析：在浏览器解析代码之前，把变量的声明和函数的声明提前（提升到该作用于的最上面）

　　划重点！！！变量提升，不提升赋值；函数提升，不调用函数！函数内部也有预解析执行过程

 

  <script>
    console.log(num)    //Uncaught ReferenceError: num is not defined;未定义报错

    console.log(num)    //undefined;定义了未赋值
    var num = 100      //预解析过程为：var num ; console.log(num); num=100;

    f1()
    function f1(){
      console.log("这个函数执行了")     //这个函数执行了
    }
    // 预解析过程为：function f1(){console.log("这个函数执行了")}; f1()

    f2();
    var f2 = function(){
      console.log("abc")    //Uncaught TypeError: f2 is not a function
    }
    // 预解析过程为：var f2; f2(); f2=function(){console.log("abc")}
    // 第二步中执行f2函数，但因为f2只是一个变量不是函数，所以报错：f2不是函数
  </script>

 

经典面试题~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

第一题：

  <script>
    f1();
    console.log(c)
    console.log(b)
    console.log(a)
    function f1() {
      var a = b = c = 9;
      console.log(a)  
      console.log(b)
      console.log(c)
    }
    // 9(19行) 9(20行) 9(21行) 
    // 9(14行) 9(15行) Uncaught ReferenceError: a is not defined(16行)
  </script>

预解析过程：

 function f1() {
      var a = b = c = 9;   ===》等价于：var a = 9,b=9,c=9(a是var为当前函数内作用域，b、c无var全局作用域)
      console.log(a)  
      console.log(b)
      console.log(c)
    }
f1();

 console.log(c)
 console.log(b)
 console.log(a)

第二题：

  <script>
    f1();
    console.log(c)
    console.log(b)
    console.log(a)
    function f1() {
      var a = 9, b=9, c=9;
      console.log(a)  
      console.log(b)
      console.log(c)
    }
    // 9(19行) 9(20行) 9(21行) 
    //Uncaught ReferenceError: c is not defined(14行) 14行就开始出错了，其实a、b、c都是报这个错误
  </script>

预解析过程：

 function f1() {
      var a = 9，b =9, c = 9;   ===》等价于：var a = 9,var b=9, var c=9(a、b、c是var为当前函数内作用域)
      console.log(a)  
      console.log(b)
      console.log(c)
    }
f1();

 console.log(c)
 console.log(b)
 console.log(a)
第三题：

  <script>
   var ppx = "x";
   function f1(){
     console.log(ppx);
     var ppx= "y"
     function ppx(){
       console.log(ppx)
     }
     console.log(ppx)
     ppx()
   }
   f1();
   //ƒ ppx(){console.log(ppx)} (15行)
   //y
   //1.html:21 Uncaught TypeError: ppx is not a function
  </script>

预解析过程：

　　var ppx;

 function f1(){
     var ppx;
     function ppx(){　　　　//函数定义，但未调用，所以什么也不打印
       console.log(ppx)
     }
     console.log(ppx)　　　　//打印上面的ppx函数
　　　ppx="y"　　　　　　　　　　//ppx是一个变量，值为y,

　　　console.log(ppx)　　　　　　//打印y

     ppx()　　　　　　　　　　　　//报错！此时的ppx是变量而不是函数
   }
ppx="x"
f1();