js-作用域

1、作用域：简单点就是一个变量在某个范围内起的作用和范围，主要是提高程序运行的可靠性和变量命名的冲突！

<body>
  <script>
    // 1、在es6之前，有两种作用域！分为全局作用域和局部作用域
    // 2、全局作用域其实上一个变量的作用范围在整体代码中的使用！
    // 在es6之中主要是：（1）、script标签中的变量
    // （2）、外部js文件
    // 3、局部变去量是在函数内部的变量，也称之为函数变量。
    // 4、全局变量和局部变量因为作用域的不同，所以定义同一个变量的时候并不会冲突
    var num=10;
    
    console.log(num);
    var fun1=function(){
      var num=20;
      console.log(num);
    }
    fun1();
  </script>
</body>

 

 

 

定义变量在同一个作用域并且是名称相同的话，就是产生覆盖。

<script>
  // 1、全局变量：在全局作用域里定义的变量
  // 主要有两种形式:（1）在script标签中定义的变量
                    // (2)、在函数中定义的变量，并且没有使用变量var来定义类型
                    
  var num1=10;
  console.log(num1);
  function f1(){
    var num2=20;
    console.log(num2);//只能在函数被调用之后，函数内部进行访问！
    num3=30;
  }
  f1();//在函数没有调用的时候没有指向，此时的作用域也不会起作用！
  console.log(num3);
  // console.log(num2);//此时因为全局作用域不能使用局部变量，所以会报错。
  // 2、局部变量在局部作用域里使用的变量，有两种情况：
  // （1）、在函数内部定义的变量；(2)、传入函数的形参。
  var f2=function(aru)
  {
    console.log(aru);
  }
  f2();
  console.log(aru);//会报错，因为作为函数的形参也是局部变量，不能被打印；
</script>

 





 




 


2、函数作用域链的访问进制：


就是内部函数可以访问外部函数的变量，并且采取链式就近的原则。


 




<script>
  var num=10;
  var f3=function(){
    var num=20;
    function f4(){
      console.log(20);
      // 因为内部函数可以访问外部函数的变量，采用链式就近原则进行访问，所以是20
    }
    f4();
  }
  f3();
</script>






3、作用域的案例：




<script>
  var num=456;
  function f5(){
    var num=123;
    function f6(){
      var num=9;
      console.log(num);//站在目标出发，找到要输出的目标！
    }
    f6();
  }
  f5();
</script>






 


 


 




<!-- 案例二：输出目标的值 -->
<script>
  var a=1;
  function f1(){
    var a=2;
    var b='22';
    function f2(){
      var a=3
      function f3(){
        var a=4;
        console.log(a);
        console.log(b);
      }
      f3();
    }
    f2();
  }
  f1();
</script>






 


 


 完美进行输出就近目标的值，采用链式作用域的原则！


4、预解析




<body>
  <!-- 1、预解析的联系和使用 -->
  <script>
    // 1、变量未定义和为赋值的回收，会出现报错！
    // console.log(num);

    // 2、出现undefined
    // console.log(num1);
    // var num1=10;
    // --------------------------------
    // 本质上：var num1;
    // console.log(num1);
    // num1=10
    

    // 3、定义函数:函数字面量的方法来定义函数，无论在前面调用还是后面调用均是可以的
    //  f1();
    //  function f1(){
    //   var num=20;
    //   console.log(num);
    // }
    // f1();
    // ---------------------------------------\
    // 本质上：
    // function f1(){
    //   var num=20;
    //   console.log(num);
    // }
    // f1();
    // 直接提升到作用域的前面


    // 4、采用匿名函数的调用方法
    // f2();
    // 采用匿名函数的方法调用函数，在前面调用报错
    var f2=function(){
      var num=30;
      console.log(num);
    }
    f2();
    // 正常运行！
    // --------------------------------
    // 本质上：
    // (1)、在前面调用：
    // var f2;
    // f2();
    // function (){
    //   var num=30;
    //   console.log(num);
    // }
    // 此时相当于定义了变量未赋值，然后直接调用，会出现函数为调用的情况
    // -----------------------------------------------
    // (2)、var f2;
    // function (){
    //   var num=30;
    //   console.log(num);
    // }
    // f2();
    // 此时因为定义了斌量，定义了哈数，在最后调用，会成功指向！nice!完美！！！！

  </script>
  <!-- 2、js的代码执行步骤和相关的 -->
  <script>
    // 1、代码执行：（1）预解析；（2）代码直接从上到下开始执行啊
    // 2、预解析的时候，会将变量解析（变量提升），函数解析（函数提升）
    // 3、变量提升的时候智慧树将定义变量提升，不会提升变量的赋值。所以会出现undefined
    // 4、函数提升就是将字面量定义函数的方法，进行提升。即提升到作用域的前面
    // 5、匿名函数本质上是定义的函数赋值给一个变量
    
  </script>
</body>




因为要解释的文字都在代码里，都不在赘述！




 <script>
    // 1、案例一：
    var num=10;
    fun();
    function fun(){
      console.log(num);
      var num=20;
    }
    // 本质上：
    // var num;
    // function fun(){
    //   var num;
    //   console.log(num);
    //   num=20
    // }
    // num=10;
    // fun();
    // 最终会输出undefined
  </script>




案例二：


 




 // 2、案例二：
    var num=10;
    function fun(){
      console.log(num);
      var num=20;
      console.log(num);
    }
    fun();
    // 本质上：
    var num;
    function fun(){
      console.log(num);
      var num=20;
      console.log(num);
    }
    num=10;
    fun();
    // 判断结果正确！




 







            

            
posted @ 
2022-03-29 18:11 
starter123 
阅读(57) 
评论(0) 
 
收藏 
举报