06-作用域+预解析

js作用域

1. js作用域：就是代码名字(变量)在某个范围内起作用和效果，目的是为了提高程序的可靠性更重要的是减少命名冲突

2. js作用域在(es6)之前有：全局作用域和局部作用域

3. 全局作用域：整个script标签

4. 局部作用域(函数作用域) 在函数内部就是局部作用域，这个代码只在函数内部起效果和作用

 <script>
      var num = 10;
      var num = 30;
      var num = 50;
      console.log(num); //打印 50
      function fn() {
        // 局部作用域(函数作用域)
        var num = 20;
        console.log(num);
      }
      fn();
    </script>

变量的作用域

变量的作用域：根据作用域的不同将变量分为全局变量和局部变量

1. 全局变量：在全局作用域下的变量，在全局下都可以使用

2. 局部变量，在局部作用域下的变量，后者在函数内部的变量就是局部变量

3. 从执行效率来看全局变量和局部变量

   全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
   局部变量当程序执行完毕后就会销毁，比较节约内存

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

      function fn() {
        console.log(num);
      }
      fn();
      //注意：函数的形参可以看做是局部变量
      function fun(arn) {
        var num1 = 10; //num1就是局部变量，只能在函数内部使用
        num2 = 20;
      }
      fun();
 	  console.log(num1); //num1 is not defined
      console.log(num2); //20
    </script>

js没有块级作用域

1. js中没有块级作用域js的作用域：全局作用域 局部作用域 现阶段我们js 没有 块级作用域
2. js 也是在 es6 的时候新增的块级作用域
3. 块级作用域｛｝ if{} for{}

 <script>
      // java
      // if(xx) {
      //int num = 10;
      // }
     
      //外面的是不能调用num的
      if (3 < 5) {
        var num = 10;
      }
      console.log(num);
    </script>

作用域链

作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值，这种结构称为作用域链，也称为就近原则

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

作用域链案例

核心: 站在目标出发，一层一层的往外查找

 <script>
      // 案例1
      function f1() {
        var num = 123;

        function f2() {
          var num = 0;
          console.log(num); //结果：0
        }
        f2();
      }
      var num = 456;
      f1();

      // 案例2
      var a = 1;

      function fn1() {
        var a = 2;
        var b = "22";
        fn2();

        function fn2() {
          var a = 3;
          fn3();

          function fn3() {
            var a = 4;
            console.log(a); //a的值 4
            console.log(b); //b的值 22
          }
        }
      }
      fn1();
    </script>

预解析(了解)

1. js引擎运行js分为两步：预解析、代码执行
   (1)预解析：js引擎会把js里面的var还有function提升到当前作用域的最前面
   (2)代码执行：按照代码书写的顺序从上往下执行

2. 预解析分为变量预解析（变量提升）和 函数预解析(函数提升)
   (1)变量提升就是把所有的变量声明提升到当前作用域最前面，不提升赋值操作
   (2)函数提升 就是把所有的函数声明提升到当前作用域的最前面，不调用函数

 <script>
      // 1问
      //   console.log(num); //报错：num is not defined

      // 2问
      console.log(num); //undefined
      var num = 10;
      //相当于执行了以下代码
      var num;
      console.log(num); //undefined(首先定义了一个名为"num"的变量，但是没有给他赋值，然后输	        出“num”值，没有给他赋值，所以他的值是“undefined”)
      num = 10;

      // 3问
      //   fn();
      //   function fn() {
      //     console.log(111);
      //   }

      // 4问
      fun();
      var fun = function () {
        console.log(22); //报错fn is not defined
      };
      //相当于执行了以下代码
      // var fun;
      // fun();
      // fun = function () {
      //   console.log(22); //报错fn is not defined(因为声明了fun，但没有赋值，第二步直接调			   用，所以就报错)
      // };
    </script>