javascript執行環境及作用域詳解_javascript技巧

最近在重讀《javascript高級程式設計3》，覺得應該寫一些部落格記錄學習的一些知識，不然都忘光啦。今天要總結的是js執行環境和作用域。

先來先來看看執行環境 

一、執行環境
        書上概念，而執行環境定義了變數或函數有權存取的其他數據，決定了他們各自的行為。每個執行環境都有一個與之關聯的變數物件。環境中定義的所有變數和函數都保存在這個物件中。雖然我們在編寫程式碼的時候無法存取這個對象，但解析器在處理資料時會在後台使用到它。

　　執行環境是一個概念，一種機制，它定義了變數或函數是否有權存取其他資料

 在javascript中，可執行的JavaScript程式碼分成三種：
       1. Global Code，即全域的、不在任何函數裡面的程式碼，例如：一個js檔案、嵌入在HTML頁面中的js程式碼等。
       2. Eval Code，即使用eval()函數動態執行的JS程式碼。
       3. Function Code，即使用者自訂函數中的函數體JS程式碼。

跳過Eval Code，只說全域執行環境和函數執行環境。 

1、全域環境：

　　全域環境是最外圍的一個執行環境。全域執行環境被認為是window物件。因此所有全域變數和函數都是作為window物件的屬性和方法建立的。程式碼載入瀏覽器時，全域執行環境被建立(當我們關閉網頁或瀏覽器時全域執行環境才被銷毀)。例如在一個頁面中，第一次載入JS程式碼時建立一個全域執行環境。

　　這也是為什麼閉包有一個記憶體外洩的缺點。因為閉包中外部函數被當成了全域環境。所以不會被銷毀，一直保存在記憶體中。

2、函數執行環境

　　每個函數都有自己的執行環境，當執行進入一個函數時，函數的執行環境就會被推入一個執行環境堆疊的頂部並取得執行權。當這個函數執行完畢，它的執行環境又從這個堆疊的頂端被刪除，並且把執行權並還給之前執行環境。這就是ECMAScript程式中的執行流程。

　　也可以這樣解讀：當呼叫一個 JavaScript 函數時，函數就會進入與該函數相對應的執行環境。如果又呼叫了另一個函數，則會建立一個新的執行環境，並且在函數呼叫期間執行過程都處於該環境中。當呼叫的函數傳回後，執行過程會傳回原始執行環境。因而，運行中的 JavaScript 程式碼就構成了一個執行環境堆疊。

　　當函數被呼叫時函數的局部環境被創建（函數內的程式碼執行完畢後，該環境被銷毀，同時保存在其中的所有變數和函數定義也隨之被銷毀)。

2-1定義期 

　　函數定義的時候，都會創建一個[[scope]]屬性，通這個物件對應的是一個物件的列表，列表中的物件僅能javascript內部訪問，沒法透過語法存取。

　　（scope也就是作用域的意思。） 

　　我們定義一全域函數A，那麼A函數就建立了一個A的[[scope]]屬性。此時，[[scope]]裡面只包含了全域物件【Global Object】。

　　而如果， 我們在A的內部定義一個B函數，那麼B函數同樣會創建一個[[scope]]屬性，B的[[scope]]屬性包含了兩個對象，一個是A的活動對象Activation Object、一個是全域對象，A的活動對像在前面，全域物件排在後面。

　　簡而言之，一個函數的[Scope]屬性中物件列表的順序是上一層函數的Activation Object對象，然後是上上層的，一直到最外層的全域物件。  

下面是範例程式碼：A只有一個scope，B有兩個scope

// 外部函数
function A(){
  var somevar;
  
  // 内部函数
 function B(){
   var somevar;
  }
}

2-2執行期 

　　當函數被執行的時候，就是進入這個函數的執行環境，首先會創一個它自己的活動物件【Activation Object】（這個物件中包含了this、參數(arguments)、局部變數(包括命名的參數)的定義和一個變數物件的作用域鏈[[scope chain]]，然後，把這個執行環境的[scope]按順序複製到[[scope chain]]裡，最後把這個活動物件推入到[ [scope chain]]的頂部。

// 第一步页面载入创全局执行环境global executing context和全局活动象
// 定义全局[[scope]],只含有Window对象
// 扫描全局的定义变量及函数对象:color【undefined】、changecolor【FD创建changecolor的[[scope]]，此时里面只含有全局活动对象】,加入到window中，所以全局变量和全局函数对象都是做为window的属性定义的。
// 程序已经定义好所以在此执行环境内任何位置都可以执行changecolor(),color也已经被定义，但是它的值是undefined

// 第二步color赋值"blue"
var color = "blue";

// 它是不需要赋值的，它就是引用本身
function changecolor() {
 // 第四步进入changecolor的执行环境
 // 复制changecolor的[[scope]]到scope chain
 // 创建活动对象，扫描定义变量和定义函数，anothercolor【undefined】和swapcolors【FD创建swapcolors的[[scope]]加入changecolor的活动对象和全局活动对象】加入到活动对象,活动对象中同时还要加入arguments和this
 // 活动对象推入scope chain 顶端
 // 程序已经定义好所以在此执行环境内任何位置都可以执行swapcolors(),anothercolor也已经被定义好，但它的值是undefined
 
 // 第五anothercolor赋值"red"
 var anothercolor = "red";
 
 // 它是不需要赋值的，它就是引用本身
 function swapcolors() {
  // 第七步进入swapcolors的执行环境，创建它的活动对象
  // 复制swapcolors的[[scope]]到scope chain
  // 扫描定义变量和定义函数对象，活动对象中加入变量tempcolor【undefined】以及arguments和this
  // 活动对象推入scope chain 顶端
  
  // 第八步tempcolor赋值anothercolor,anothercolor和color会沿着scope chain被查到，并继续往下执行
  var tempcolor = anothercolor;
   anothercolor = color;
   color = tempcolor; 
 }

 // 第六步执行swapcolors,进入其执行环境
 swapcolors();
}

// 第三步执行changecolor,进入其执行环境
changecolor();

 var color="blue";
 function changecolor(){
 var anothercolor="red";
 function swapcolors(){
 var tempcolor=anothercolor;
 anothercolor=color;
 color=tempcolor;
  // Todo something  
  }
 swapcolors();
}
changecolor();
 //这里不能访问tempcolor和anocolor;但是可以访问color;
alert("Color is now "+color);

if(true){
  var myvar = "张三"; 
 }
 alert(myvar);// 张三

for (var i=0;i<10;i++){
   console.log(i) 
  }
  
  alert(i); // 10

var name = "小明";
function getName(){
 alert( name ); //'undefined'
 var name = '小黄';
 alert(name ); //小黄
}
getName()

var name = "小明";
function getName(){
 var name;
 alert( name ); //'undefined'
 var name = '小黄';
 alert(name ); //小黄
}
getName()