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.　第二个例子

<p style="margin-bottom: 7px;">a() function a(){<br/>    alert(x);    <br/>    var x = 10;<br/> }<br/>alert(x);<br/></p>

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

　　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()

Atas ialah kandungan terperinci js的解析顺序作用域严格模式的解析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!