javascript執行上下文、變量對象的方法

這篇文章主要講解了javascript執行上下文、變量對象的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

執行上下文 ExecutionContext

每當控制器(control)轉換到ECMAScript可執行代碼時，都會創建并進入到一個可執行上下文。

一段簡短的句子，卻包含著豐富的內容：

• 控制器：即js引擎
• 轉換：從一段可執行代碼跳轉到另一段可執行代碼
• 可執行代碼：全局代碼、函數代碼、eval代碼(分別對應三種作用域)
• 執行上下文：是一個抽象的概念，ECMA-262標準用這個概念同可執行代碼(executable code)概念進行區分

執行上下文在邏輯上組成一個堆棧。堆棧底部永遠都是全局上下文(global context)，堆棧頂部是當前/活動的執行上下文(activeExecutionContext)。堆棧在EC類型的變量(various kingds of EC)被推入或彈出的同時被修改。

例如，我們可以定義一個數組來模擬執行上下文堆棧：

ECStack = [
 globalContext,
 <foo> functionContext
]

變量對象 VariableObject

變量對象(VO)作為執行上下文的一個屬性存在，它存儲下列內容：

• 所有變量聲明 (var, VariableDeclaration)
  • VO的一個屬性，這個屬性由變量名稱和undefined值組成；如果變量名稱跟已經聲明的形式參數或函數相同，則變量聲明不會干擾已經存在的這類屬性。
• 函數聲明 (FunctionDeclaration, 縮寫為FD)
  • VO的一個屬性，這個屬性由一個函數對象(function-object)的名稱和值組成；如果變量對象已經存在相同名稱的屬性，則完全替換這個屬性。
• 以及函數的形參
  • VO的一個屬性，這個屬性由一個形式參數的名稱和值組成；如果沒有對應傳遞實際參數，那么這個屬性就由形式參數的名稱和undefined值組成；

VO = {
  // context data (var, FD, function arguments)
 }

當我們聲明一個變量或一個函數的時候，同時還用變量的名稱和值在VO里創建了一個新的屬性。
例如：

var m = 30;
function test(a,b) {
 var c = 20
 function d() {}
 var e = function _e() {};
}
test(10)

當進入“test”函數的上下文時(傳遞參數10)，AO如下：

AO(test) = {
 a: 10,
 b: undefined,
 c: undefined,
 d: <reference to FunctionDeclaration "d">
 e: undefined
};

test執行到最后時，對應此刻上下文堆棧：

ECStack = [
 globalContext: {
  VO: {
   m: 30,
   test: 
  }
 },
 test functionContext: {
  VO: {
   a: 10,
   b: undefined,
   c: 20,
   d: <reference to FunctionDeclaration "d">,
   e: <reference to FunctionDeclaration "_e">
  }
 }
]

關于變量

通常，各類文章和JavaScript相關的書籍都聲稱：“不管是使用var關鍵字(在全局上下文)還是不使用var關鍵字(在任何地方)，都可以聲明一個變量”。請記住，這絕對是謠傳：任何時候，變量只能通過使用var關鍵字才能聲明。

讓我們通過下面的實例看看具體的區別吧：

alert(a); // undefined
alert(b); // "b" is not defined
 
b = 10;
var a = 20;

所有根源仍然是VO和它的修改階段(進入上下文階段和執行代碼階段)：

VO = {
 a: undefined
};

我們可以看到，因為“b”不是一個變量，所以在這個階段根本就沒有“b”，“b”將只在執行代碼階段才會出現(但是在我們這個例子里，還沒有到那就已經出錯了)。

讓我們改變一下例子代碼：

alert(a); // undefined, we know why
 
b = 10;
alert(b); // 10, created at code execution
 
var a = 20;
alert(a); // 20, modified at code execution

關于變量，還有一個重要的知識點。變量相對于簡單屬性來說，變量有一個特性(attribute)：{DontDelete},這個特性的含義就是不同通過delete操作符直接刪除變量屬性。

a = 10;
alert(window.a); // 10
 
alert(delete a); // true
 
alert(window.a); // undefined
 
var b = 20;
alert(window.b); // 20
 
alert(delete b); // false
 
alert(window.b); // still 20

2018-8-2-再看執行上下文、變量對象

看完上述內容，是不是對javascript執行上下文、變量對象的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。