zoukankan      html  css  js  c++  java
  • js的解析顺序 作用域 严格模式

    一、javascript的解析顺序

      我们大家所理解的代码的执行顺序都是从上到下的,但是实际上确不是这样的。我们看一下下面的代码。

      

    1 alert(a);
    2 var a = 1;

      如果执行顺序是从上到下的,在上面弹出一个a,浏览器会认为从上到下执行的,那么当它alert(a)的时候,他就会发现没有这个东西,那么他就会报错,但是实际上他弹出来的结果是undefined。返回值是undefined说明a没有被定义也就是没有赋值。下面我来讲解一下javascript的解析顺序。

      1.ES5中有声明意义的关键字

        var   会存在变量提升

        function  也有声明变量的的作用。

      2.解析顺序

        1.找声明  var、function   声明:只是声明变量,而不包括赋值。

        2. 执行

        注意:以上两步 都遵循从上至下,执行的时候遇到等号,先看等号的右边。

        注意:当function声明的变量和var声明的变量重名时,function的变量权重会比var声明的要高。

      下面多来几个例子解析一下就清楚许多了,但是看例子之前要知道一下什么叫作用域。

    二、作用域

      作用域就是:起作用的范围分为下面两种

      1.全局作用域

      2.函数作用域

        他们两个的区别看下面的例子仔细分析。

    三、看几个例子解析一下执行顺序的步骤

     1. 第一个例子:

    var x = 5;
        a();
        function a(){
            alert(x);
            var x = 10;
        }
    alert(x);

      解析过程

      1,.寻找声明   (看全局作用域)

        var x;

        function a(){} 

      2.执行

        x = 5;

        a()  ------------->执行到这个函数的过程中在重新进行以上两步

                1,寻找声明 var x;  (函数作用域)

                2. 执行

                  alert(x);  这个x在函数作用域中存在,并且还没有执行到赋值的那一步,那么弹出的东西就是undefined;

                  x = 10;

        alert(x)    这里弹窗是全局变量  5;    

      所以浏览器弹窗的内容是   undefined  5

     2. 第二个例子

     a()
     function a(){
        alert(x);
        var x = 10;
     }
    alert(x);

      解析过程 按照上面的例子一样分析

      1. 寻找声明

       function a(){}

      2.执行

       a()------------------------->函数

                1.寻找声明

                  var x;

                2.执行

                  alert(x)    弹出未定义

                  x = 10;

      alert(x);  这里的x会从全局中寻找x,但是发现并没有x,所 以浏览器会 报错     x is not  defined x没有被定义

      所以浏览器的弹出的内容是  undefined  报错

     

      我相信看了这两个例子的人都对这个解析过程都有了清除的了解,如果还是不太了解,建议重新看一次。

      下面介绍几个需要注意的地方, 直接上例子

     3. 第三个例子

      前面讲到了当function声明的变量和var声明的变量重名时,function的变量权重会比var声明的要高。来一个例子证明一下

      

    alert(a)
    
    function a() {
        alert("函数")
    }
    
    var a = 1;  
    alert(a)

      解析过程

      1.寻找声明

       function a(){}

       var a;

      2. 执行

        alert(a) 前面说到了function的声明比var声明的权重高,所有执行这个的时候他会弹出这个 函数块(函数体)

        a = 1;

        alert(a);     这里弹出的就是 1 了

      所以最后的结果就是 函数块 1;

     4.第四个例子

      子作用域可以向父级作用域找变量,直到全局作用域为止,反之不行。 如果子作用域有同样的变量,那么他就会使用自己的,不会去找爸爸要。

      

    var a = 5;
    
    function fn() {
        alert(a)
    }
    
    fn()

      解析过程

      1.寻找声明

        var a;

        function fn(){}

      2.执行

        a = 5;

        fn()--------------------------------------> 函数

                        1.找声明

                        2.执行

                         alert(a);  他这里没有a 所以去找爸爸要。  a = 5;   所以弹窗是  5

      所以最后结果为  弹窗5

      下面看一下爸爸会不会去找儿子要东西

    function fn(){
        var b = 5; 
        return b;    
    }
    fn();
    alert(b);

      1.寻找声明

        function fn(){}

      2. 执行

        fn()----------------------------------------> 函数

                          1.寻找声明

                            1.var b;

                          2.执行

                            return b;

      alert(b);   //我们看一下返回值是多少   b is not defined   他说b没有被定义,说明父作用域不可以向自作用域去寻找变量。

     5. 第五个例子

      当一个变量无中生有时,不管从哪个作用域出来的,统统归到window下,下面看两个例子

      

      fn();
      alert(a);
      var a = 0;
      alert(a);
      function fn(){
         var a = 1;
      }

    这一个例子应该可以自己分析了  最后的结果是  undefined   0

    我们再来看一下下面这个你会很吃惊

      fn()
      alert(a)
      var a = 0;
      alert(a);
      function fn(){
          a = 1;
      }

      明明都一样,我吃惊什么 返回值不是还是 undefined 和 0 吗

      但是你有没有发现倒数第二行 上面的声明了 下面的没有声明,来解析一波

      1.寻找变量

        var a;

        function fn(){}

      2.fn()---------------------------->函数

              a = 1;  这个时候就说到了那一点,无中生有的变量,统统归到window下面

      所以下面的执行过程

      alert(a)    这里的弹窗就是  1 了

       a = 0;

         alert(a)   弹出 0

      所以最后的结果是   1       0 

    四、严格模式

      严格模式下的代码执行时,非常严格

      变量不允许无中生有

      意义:规范代码开发的流畅,逻辑

      

    "use strict"
    a = 1;
    alert(a);

    当我们写后面两句代码的时候不会报错和出现问题,但是当我们加上第一句代码的时候,我们在这样写的时候就会报错了。所以我们还是按照规范的标准来,提高自己的能力

    五、可能好多人做了上面的例子感觉不太过瘾,下面我再给出几个例子,可以自己去分析分析,我会在最后面给出答案。

    1. 第一个例子    //  10 报错

    var a = 10;
    alert(a);
    a()
    function a(){
        alert(20);
    }

    2.第二个例子   undefined 1 0

    var a = 0;
        function fn(){
            alert(a);
            var a = 1;
            alert(a);
        }
        fn();
        alert(a);

    3.第三个例子 当同样的声明同样的名字重复时,后面写的会覆盖前面写的  //2  1  1  3

     a()
        var a = function(){
            alert(1)
        }
        a();
        function a(){
            alert(2);
        }
        a();
        var a = function(){
            alert(3);
        }
        a()

     如果你看到我的文章可以收获一些知识,那么我会非常高兴的。

     

  • 相关阅读:
    字符串的输入函数gets
    51nod 1113(矩阵快速幂简单题)
    矩阵快速幂基础
    hdu-2141(二分查找+暴力)
    opencv 摄像头 指定大小 数量 的图片
    Windows环境下使用tensorflow opencv的小事儿
    Vue+D3 V4 实现模块化
    Vue安装
    js 日历
    js基础
  • 原文地址:https://www.cnblogs.com/z937741304/p/7712646.html
Copyright © 2011-2022 走看看