首先，我們要知道執(zhí)行環(huán)境和作用域是兩個完全不同的概念。

函數(shù)的每次調(diào)用都有與之緊密相關(guān)的作用域和執(zhí)行環(huán)境。從根本上來說，作用域是基于函數(shù)的，而執(zhí)行環(huán)境是基于對象的(例如：全局執(zhí)行環(huán)境即window對象)。

換句話說，作用域涉及到所被調(diào)用函數(shù)中的變量訪問，并且不同的調(diào)用場景是不一樣的。執(zhí)行環(huán)境始終是this關(guān)鍵字的值，它是擁有當(dāng)前所執(zhí)行代碼的對象的引用。每個執(zhí)行環(huán)境都有一個與之關(guān)聯(lián)的變量對象，環(huán)境中定義的所有變量和函數(shù)都保存在這個對象中。雖然我們編寫的代碼無法訪問這個對象，但解析器在處理數(shù)據(jù)時會在后臺使用它。

執(zhí)行環(huán)境（也稱執(zhí)行上下文–execution context）

當(dāng)JavaScript解釋器初始化執(zhí)行代碼時，它首先默認進入全局執(zhí)行環(huán)境，從此刻開始，函數(shù)的每次調(diào)用都會創(chuàng)建一個新的執(zhí)行環(huán)境。

每個函數(shù)都有自己的執(zhí)行環(huán)境。當(dāng)執(zhí)行流進入一個函數(shù)時，函數(shù)的環(huán)境就會被推入一個環(huán)境棧中（execution stack）。在函數(shù)執(zhí)行完后，棧將其環(huán)境彈出，把控制權(quán)返回給之前的執(zhí)行環(huán)境。ECMAScript程序中的執(zhí)行流正是由這個便利的機制控制著。

執(zhí)行環(huán)境可以分為創(chuàng)建和執(zhí)行兩個階段。在創(chuàng)建階段，解析器首先會創(chuàng)建一個變量對象（variable object，也稱為活動對象 activation object），它由定義在執(zhí)行環(huán)境中的變量、函數(shù)聲明、和參數(shù)組成。在這個階段，作用域鏈會被初始化，this的值也會被最終確定。在執(zhí)行階段，代碼被解釋執(zhí)行。

Demo：

<script type="text/javascript">
  function Fn1(){
    function Fn2(){
      alert(document.body.tagName);//BODY
      //other code...
    }
    Fn2();
  }
  Fn1();
  //code here
</script>

小結(jié)

當(dāng)javascript代碼被瀏覽器載入后，默認最先進入的是一個全局執(zhí)行環(huán)境。當(dāng)在全局執(zhí)行環(huán)境中調(diào)用執(zhí)行一個函數(shù)時，程序流就進入該被調(diào)用函數(shù)內(nèi)，此時JS引擎就會為該函數(shù)創(chuàng)建一個新的執(zhí)行環(huán)境，并且將其壓入到執(zhí)行環(huán)境堆棧的頂部。瀏覽器總是執(zhí)行當(dāng)前在堆棧頂部的執(zhí)行環(huán)境，一旦執(zhí)行完畢，該執(zhí)行環(huán)境就會從堆棧頂部被彈出，然后，進入其下的執(zhí)行環(huán)境執(zhí)行代碼。這樣，堆棧中的執(zhí)行環(huán)境就會被依次執(zhí)行并且彈出堆棧，直到回到全局執(zhí)行環(huán)境。

此外還要注意一下幾點：

單線程

同步執(zhí)行

唯一的全局執(zhí)行環(huán)境

局部執(zhí)行環(huán)境的個數(shù)沒有限制

每次某個函數(shù)被調(diào)用，就會有個新的局部執(zhí)行環(huán)境為其創(chuàng)建，即使是多次調(diào)用的自身函數(shù)(即一個函數(shù)被調(diào)用多次，也會創(chuàng)建多個不同的局部執(zhí)行環(huán)境)。

作用域

當(dāng)代碼在一個環(huán)境中執(zhí)行時，會創(chuàng)建變量對象的一個作用域鏈（scope chain）。作用域鏈的用途是保證對執(zhí)行環(huán)境有權(quán)訪問的所有變量和函數(shù)的有序訪問。

作用域鏈包含了執(zhí)行環(huán)境棧中的每個執(zhí)行環(huán)境對應(yīng)的變量對象。通過作用域鏈，可以決定變量的訪問和標識符的解析。

注意：全局執(zhí)行環(huán)境的變量對象始終都是作用域鏈的最后一個對象。

在訪問變量時，就必須存在一個可見性的問題(內(nèi)層環(huán)境可以訪問外層中的變量和函數(shù)，而外層環(huán)境不能訪問內(nèi)層的變量和函數(shù))。更深入的說，當(dāng)訪問一個變量或調(diào)用一個函數(shù)時，JavaScript引擎將不同執(zhí)行環(huán)境中的變量對象按照規(guī)則構(gòu)建一個鏈表，在訪問一個變量時，先在鏈表的第一個變量對象上查找，如果沒有找到則繼續(xù)在第二個變量對象上查找，直到搜索到全局執(zhí)行環(huán)境的變量對象即window對象。這也就形成了Scope Chain的概念。

作用域鏈圖，清楚的表達了執(zhí)行環(huán)境與作用域的關(guān)系(一一對應(yīng)的關(guān)系)，作用域與作用域之間的關(guān)系(鏈表結(jié)構(gòu)，由上至下的關(guān)系)。

Demo:

var color = "blue";
function changeColor(){
 var anotherColor = "red";
 function swapColors(){
  var tempColor = anotherColor;
  anotherColor = color;
  color = tempColor;
  // 這里可以訪問color, anotherColor, 和 tempColor
 }
 // 這里可以訪問color 和 anotherColor，但是不能訪問 tempColor
 swapColors();
}
changeColor();
// 這里只能訪問color
console.log("Color is now " + color);

上述代碼一共包括三個執(zhí)行環(huán)境：全局執(zhí)行環(huán)境、changeColor()的局部執(zhí)行環(huán)境、swapColors()的局部執(zhí)行環(huán)境。

全局環(huán)境有一個變量color和一個函數(shù)changecolor();

changecolor()函數(shù)的局部環(huán)境中具有一個anothercolor屬性和一個swapcolors函數(shù)，當(dāng)然，changecolor函數(shù)中可以訪問自身以及它外圍（即全局環(huán)境）中的變量;

swapcolor()函數(shù)的局部環(huán)境中具有一個變量tempcolor。在該函數(shù)內(nèi)部可以訪問上面的兩個環(huán)境（changecolor和window）中的所有變量，因為那兩個環(huán)境都是它的父執(zhí)行環(huán)境。

上述代碼的作用域鏈如下圖所示：

從上圖發(fā)現(xiàn)。內(nèi)部環(huán)境可以通過作用域鏈訪問所有的外部環(huán)境，但是外部環(huán)境不能訪問內(nèi)部環(huán)境中的任何變量和函數(shù)。

標識符解析（變量名或函數(shù)名搜索）是沿著作用域鏈一級一級地搜索標識符的過程。搜索過程始終從作用域鏈的前端開始，然后逐級地向后（全局執(zhí)行環(huán)境）回溯，直到找到標識符為止。

執(zhí)行環(huán)境與作用域的區(qū)別與聯(lián)系

執(zhí)行環(huán)境為全局執(zhí)行環(huán)境和局部執(zhí)行環(huán)境，局部執(zhí)行環(huán)境是函數(shù)執(zhí)行過程中創(chuàng)建的。

作用域鏈是基于執(zhí)行環(huán)境的變量對象的，由所有執(zhí)行環(huán)境的變量對象(對于函數(shù)而言是活動對象，因為在函數(shù)執(zhí)行環(huán)境中，變量對象是不能直接訪問的，此時由活動對象(activation object,縮寫為AO)扮演VO(變量對象)的角色。)共同組成。

當(dāng)代碼在一個環(huán)境中執(zhí)行時，會創(chuàng)建變量對象的一個作用域鏈。作用域鏈的用途：是保證對執(zhí)行環(huán)境有權(quán)訪問的所有變量和函數(shù)的有序訪問。作用域鏈的前端，始終都是當(dāng)前執(zhí)行的代碼所在環(huán)境的變量對象。

小練習(xí)

<script type="text/javascript">
(function(){
  a= 5;
  console.log(window.a);//undefined
  var a = 1;//這里會發(fā)生變量聲明提升
  console.log(a);//1
})();
</script>

window.a之所以是undefined，是因為var a = 1;發(fā)生了變量聲明提升。相當(dāng)于如下代碼：

<script type="text/javascript">
(function(){
  var a;//a是局部變量
  a = 5;//這里局部環(huán)境中有a，就不會找全局中的
  console.log(window.a);//undefined
  a = 1;//這里會發(fā)生變量聲明提升
  console.log(a);//1
})();
</script>

以上就是小編為大家?guī)淼睦仙Ｕ勗鶭S執(zhí)行環(huán)境與作用域全部內(nèi)容了，希望大家多多支持腳本之家~

最新評論