js的解析順序作用域嚴格模式的解析-js教程-PHP中文網

一、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(){}

#　　　　function a(){}

##　　##　　　　x = 5;

　　　　a() ------------->執行到這個函數的過程中在重新進行以上兩步驟

　　　　　　　　　　　　　　　　　　　,尋找宣告var x;　　（函數作用域）

　　　　　　　　　　　　2. 執行

##　　　　　2. 執行

##　　　　　　函數作用域中存在，並且還沒有執行到賦值的那一步,那麼這裡彈出的東西就是undefined;

　　　　　　　　　　　　　　x = 10;

　〠　　x = 10;

　〠　alert(x) 所以彈片瀏覽器彈出視窗的內容是 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.尋找聲明

　　　　　　　　　　　　　　2.執行

　　　　　　　　　　　　　　alert(x) 　　　　　　alert(x) ##　　　　　　　　　　　　　　x = 10;

　　alert(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；

.第四個例子

　　子作用域可以向父級作用域找變量，直到全域作用域為止，反之不行。如果子作用域有同樣的變量，那麼他就會使用自己的，不會去找爸爸要。

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

fn()

登入後複製

　　解析過程

#　　1.尋找宣告

　　　　var a;

　　　　function fn

##　　2.執行

　　　　a = 5;

　　　　fn()----------------------- ---------------> 函數

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

登入後複製

以上是js的解析順序作用域嚴格模式的解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！