javascript-作用域|预解析

• javascript的两种作用域
  • 作用域
    • javascript作用域：变量在某个范围内起作用和效果；目的是为了提高程序的可靠性，更重要的是减少命名冲突
    • javascript作用域(es6)之前：全局作用域和局部作用域
      • 全局作用域：整个script标签或者一个单独的js文件
      • 局部作用域：在函数内部就是局部作用域，变量只在函数内部起作用；因此局部作用域也叫函数作用域
  • 变量的作用域
    • 全局变量：作用域是全局，整个script标签或者一个单独的js文件
    • 局部变量：作用域是局部，变量只在函数内部起作用
    • 特殊情况：在函数内部没有声明的变量(不带var的)也称为全局变量

    • <script>
              <!--特殊情况，在函数内部的全局变量(不带var直接赋值的变量)-->
              var num1=100;//全局变量
              function fn(形参) {//形参也是局部变量
                  var num2=20;//局部变量
                  num3=30;//特殊的全局变量；不建议这样用
              }
              console.log(num1);//不会报错，因为全局变量作用域是整个script标签
              console.log(num3);//不会报错，因为num3是全局变量
              console.log(num2);//会报错，因为num2是局部变量只在函数内部起作用，需要调用函数fn
      </script>

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

    • <script>
              <!--作用域链查找遵守就近原则-->
              var num=1;
              function fn() {
                  var num=2;
                  function fun(){
                      console.log(num);//两个num取哪个？就近原则，打印的是2
                  }
                  fun()
              }
              fn()
      </script>

• 全局变量和局部变量的区别
  • 全局变量只有浏览器关闭时才会被销毁，比较占内存资源
  • 局部变量 当程序执行完毕就会销毁，更节省内存空间
• 如何在作用域链中查找变量的值
  • 就近原则
• 预解析
  • 导读：js代码是由浏览器中的javascript的解释器(又称js引擎)来执行的，js解释器在运行javascript代码的时候分为两步：预解析和代码执行
  • js解释器在运行javascript代码的时候分为两步走：先预解析 再代码执行
    • ​​​​​​​1、预解析：j s引擎会把j s里面的所有var 和function 关键字 提升到当前作用域的最前面
      • ​​​​​​​预解析分两种：
        • ​​​​​​​变量预解析：就是把所有的var声明提升到当前作用域的最前面，不提升赋值操作；变量预解析又叫做变量预提升
        • 函数预解析：就是把所有的function声明提升到当前作用域的最前面，不调用函数
    • 2、代码执行：按照代码书写顺序从上至下执行
  • 预解析案例

    • <script>
              <!--案例1-->
              var num =10;
              fun();
              function fun() {
                  console.log(num);//结果是undefined
                  var num=20;
              }
      </script>
      <script>
              <!--案例2-->
              var num=10;
              function fn() {
                  console.log(num);//结果是undefined
                  var num=20;
                  console.log(num);//结果是20
              }
              fn();
      </script>
          
      <script>
              <!--案例3-->
              var a=18;
              f1();
              function f1() {
                  var b=9;
                  console.log(a);//结果是undefined
                  console.log(b);//结果是9
                  var a='123';
              }
      </script>
      <script>
          
              <!--案例4-->
              f1();
              console.log(c);//4。结果是9
              console.log(b);//5。结果是9
              console.log(a);//6。结果是报错a not defined.(注意是报错了，不是undefined，因为全局变量中没有声明a）
              function f1() {
                  var a=b=c=9;
                  //var a=b=c=9不是集体声明；集体声明应该写成var a=9,b=9,c=9;
                  //var a=b=c=9相当于以下代码：
                  // var a;
                  // a=9;//注意：a是局部变量
                  //b=9;c=9;//注意：b,c是全局变量（在函数内部不带var的变量）
                  console.log(a);//1。结果是9
                  console.log(b);//2。结果是9
                  console.log(c);//3。结果是9
              }
      </script>