日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間:8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
JavaScript內(nèi)部原理之變量對象

我們總是會在程序中定義一些函數(shù)和變量,之后會使用這些函數(shù)和變量來構(gòu)建我們的系統(tǒng)。

目前創(chuàng)新互聯(lián)已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站改版維護、企業(yè)網(wǎng)站設(shè)計、惠陽網(wǎng)站維護等服務(wù),公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。

然而,對于解釋器來說,它又是如何以及從哪里找到這些數(shù)據(jù)的(函數(shù),變量)?當(dāng)引用一個對象的時候,在解釋器內(nèi)部又發(fā)生了什么?

許多ECMA腳本程序員都知道,變量和執(zhí)行上下文是密切相關(guān)的:

 
 
 
  1. var a = 10; // 全局上下文中的變量  
  2.    
  3. (function () {  
  4.   var b = 20; // 函數(shù)上下文中的本地變量  
  5. })();  
  6.    
  7. alert(a); // 10  
  8. alert(b); // "b" is not defined 

不僅如此,許多程序員也都知道,ECMAScript標準中指出獨立的作用域只有通過“函數(shù)代碼”(可執(zhí)行代碼類型中的一種)才能創(chuàng)建出來。比方說,與C/C++不同的是,在ECMAScript中for循環(huán)的代碼塊是無法創(chuàng)建本地上下文的:

 
 
 
  1. for (var k in {a: 1, b: 2}) {  
  2.   alert(k);  
  3. }  
  4.    
  5. alert(k); // 盡管循環(huán)已經(jīng)結(jié)束,但是變量“k”仍然在作用域中 

下面就來詳細介紹下,當(dāng)申明變量和函數(shù)的時候,究竟發(fā)生了什么。

數(shù)據(jù)申明

既然變量和執(zhí)行上下文有關(guān),那它就該知道數(shù)據(jù)存儲在哪里以及如何獲取。這種機制就稱作變量對象:

A variable object (in abbreviated form — VO) is a special object related with an execution context and which stores:

◆ variables (var, VariableDeclaration);

◆ function declarations (FunctionDeclaration, in abbreviated form FD);

◆ and function formal parameters

◆ declared in the context.

舉個例子,可以用ECMAScript的對象來表示變量對象:

 
 
 
  1. VO = {}; 

VO同時也是一個執(zhí)行上下文的屬性:

 
 
 
  1. activeExecutionContext = {  
  2.   VO: {  
  3.     // 上下文中的數(shù)據(jù) (變量申明(var), 函數(shù)申明(FD), 函數(shù)形參(function arguments))  
  4.   }  
  5. }; 

對變量的間接引用(通過VO的屬性名)只允許發(fā)生在全局上下文中的變量對象上(全局對象本身就是變量對象,這部分會在后續(xù)作相應(yīng)的介紹)。 對于其他的上下文而言,是無法直接引用VO的,因為VO是實現(xiàn)層的。

申明新的變量和函數(shù)的過程其實就是在VO中創(chuàng)建新的和變量以及函數(shù)名對應(yīng)的屬性和屬性值的過程。

如下所示:

 
 
 
  1. var a = 10;  
  2.    
  3. function test(x) {  
  4.   var b = 20;  
  5. };  
  6.    
  7. test(30); 

上述代碼對應(yīng)的變量對象則如下所示:

 
 
 
  1. // 全局上下文中的變量對象  
  2. VO(globalContext) = {  
  3.   a: 10,  
  4.   test:   
  5. };  
  6.    
  7. // “test”函數(shù)上下文中的變量對象  
  8. VO(test functionContext) = {  
  9.   x: 30,  
  10.   b: 20  
  11. }; 

但是,在實現(xiàn)層(標準中定義的),變量對象只是一個抽象的概念。在實際執(zhí)行上下文中,VO可能完全不叫VO,并且初始的結(jié)構(gòu)也可能完全不同。

不同執(zhí)行上下文中的變量對象

變量對象上的一些操作(比如:變量的初始化)和行為對于所有的執(zhí)行上下文類型來說都已一樣的。從這一點來說,將變量對象表示成抽象的概念更加合適。 函數(shù)上下文還能定義額外的與變量對象相關(guān)的信息。

 
 
 
  1. AbstractVO (generic behavior of the variable instantiation process)  
  2.    
  3.   ║  
  4.   ╠══> GlobalContextVO  
  5.   ║        (VO === this === global)  
  6.   ║  
  7.   ╚══> FunctionContextVO  
  8.            (VO === AO,  object and  are added) 

接下來對這塊內(nèi)容進行詳細介紹。

全局上下文中的變量對象

首先,有必要對全局對象(Global object)作個定義。

全局對象是一個在進入任何執(zhí)行上下文前就創(chuàng)建出來的對象;此對象以單例形式存在;它的屬性在程序任何地方都可以直接訪問,其生命周期隨著程序的結(jié)束而終止。

全局對象在創(chuàng)建的時候,諸如Math,String,Date,parseInt等等屬性也會被初始化,同時,其中一些對象會指向全局對象本身——比如,DOM中,全局對象上的window屬性就指向了全局對象(但是,并非所有的實現(xiàn)都是如此):

 
 
 
  1. global = {  
  2.   Math: ,  
  3.   String:   
  4.   ...  
  5.   ...  
  6.   window: global  
  7. }; 

在引用全局對象的屬性時,前綴通??梢允÷裕驗槿謱ο笫遣荒芡ㄟ^名字直接訪問的。然而,通過全局對象上的this值,以及通過如DOM中的window對象這樣遞歸引用的方式都可以訪問到全局對象:

 
 
 
  1. String(10); // 等同于 global.String(10);  
  2.    
  3. // 帶前綴  
  4. window.a = 10; // === global.window.a = 10 === global.a = 10;  
  5. this.b = 20; // global.b = 20; 

回到全局上下文的變量對象上——這里變量對象就是全局對象本身:

 
 
 
  1. VO(globalContext) === global; 

準確地理解這個事實是非常必要的:正是由于這個原因,當(dāng)在全局上下文中申明一個變量時,可以通過全局對象上的屬性來間地引用該變量(比方說,當(dāng)變量名提前未知的情況下)

 
 
 
  1. var a = new String('test');  
  2.    
  3. alert(a); // directly, is found in VO(globalContext): "test"  
  4.    
  5. alert(window['a']); // indirectly via global === VO(globalContext): "test"  
  6. alert(a === this.a); // true  
  7.    
  8. var aKey = 'a';  
  9. alert(window[aKey]); // indirectly, with dynamic property name: "test" 

函數(shù)上下文中的變量對象

在函數(shù)的執(zhí)行上下文中,VO是不能直接訪問的。它主要扮演被稱作活躍對象(activation object)(簡稱:AO)的角色。

 
 
 
  1. VO(functionContext) === AO; 

活躍對象會在進入函數(shù)上下文的時候創(chuàng)建出來,初始化的時候會創(chuàng)建一個arguments屬性,其值就是Arguments對象:

 
 
 
  1. AO = {  
  2.   arguments:   
  3. }; 

Arguments對象是活躍對象上的屬性,它包含了如下屬性:

◆ callee —— 對當(dāng)前函數(shù)的引用

◆ length —— 實參的個數(shù)

◆ properties-indexes(數(shù)字,轉(zhuǎn)換成字符串)其值是函數(shù)參數(shù)的值(參數(shù)列表中,從左到右)。properties-indexes的個數(shù) == arguments.length;

arguments對象的properties-indexes的值和當(dāng)前(實際傳遞的)形參是共享的。

如下所示:

 
 
 
  1. function foo(x, y, z) {  
  2.    
  3.   // 定義的函數(shù)參數(shù)(x,y,z)的個數(shù)  
  4.   alert(foo.length); // 3  
  5.    
  6.   // 實際傳遞的參數(shù)個數(shù)  
  7.   alert(arguments.length); // 2  
  8.    
  9.   // 引用函數(shù)自身  
  10.   alert(arguments.callee === foo); // true  
  11.    
  12.   // 參數(shù)互相共享  
  13.    
  14.   alert(x === arguments[0]); // true  
  15.   alert(x); // 10  
  16.    
  17.   arguments[0] = 20;  
  18.   alert(x); // 20  
  19.    
  20.   x = 30;  
  21.   alert(arguments[0]); // 30  
  22.    
  23.   // 然而,對于沒有傳遞的參數(shù)z,  
  24.   // 相關(guān)的arguments對象的index-property是不共享的  
  25.    
  26.   z = 40;  
  27.   alert(arguments[2]); // undefined  
  28.    
  29.   arguments[2] = 50;  
  30.   alert(z); // 40  
  31.    
  32. }  
  33.    
  34. foo(10, 20); 

上述例子,在當(dāng)前的Google Chrome瀏覽器中有個bug——參數(shù)z和arguments[2]也是互相共享的。

處理上下文代碼的幾個階段

至此,也就到了本文最核心的部分了。處理執(zhí)行上下文代碼分為兩個階段:

進入執(zhí)行上下文

執(zhí)行代碼

對變量對象的修改和這兩個階段密切相關(guān)。

要注意的是,這兩個處理階段是通用的行為,與上下文類型無關(guān)(不管是全局上下文還是函數(shù)上下文都是一致的)。

進入執(zhí)行上下文

一旦進入執(zhí)行上下文(在執(zhí)行代碼之前),VO就會被一些屬性填充(在此前已經(jīng)描述過了):

◆ 函數(shù)的形參(當(dāng)進入函數(shù)執(zhí)行上下文時)

—— 變量對象的一個屬性,其屬性名就是形參的名字,其值就是實參的值;對于沒有傳遞的參數(shù),其值為undefined

◆ 函數(shù)申明(FunctionDeclaration, FD) —— 變量對象的一個屬性,其屬性名和值都是函數(shù)對象創(chuàng)建出來的;如果變量對象已經(jīng)包含了相同名字的屬性,則替換它的值

◆ 變量申明(var,VariableDeclaration) —— 變量對象的一個屬性,其屬性名即為變量名,其值為undefined;如果變量名和已經(jīng)申明的函數(shù)名或者函數(shù)的參數(shù)名相同,則不會影響已經(jīng)存在的屬性。

看下面這個例子:

 
 
 
  1. function test(a, b) {  
  2.   var c = 10;  
  3.   function d() {}  
  4.   var e = function _e() {};  
  5.   (function x() {});  
  6. }  
  7.    
  8. test(10); // call 

當(dāng)以10為參數(shù)進入“test”函數(shù)上下文的時候,對應(yīng)的AO如下所示:

 
 
 
  1. AO(test) = {  
  2.   a: 10,  
  3.   b: undefined,  
  4.   c: undefined,  
  5.   d:   
  6.   e: undefined  
  7. }; 

注意了,上面的AO并不包含函數(shù)“x”。這是因為這里的“x”并不是函數(shù)申明而是函數(shù)表達式(FunctionExpression,簡稱FE),函數(shù)表達式不會對VO造成影響。 盡管函數(shù)“_e”也是函數(shù)表達式,然而,正如我們所看到的,由于它被賦值給了變量“e”,因此它可以通過“e”來訪問到。關(guān)于函數(shù)申明和函數(shù)表達式的區(qū)別會在第五章——函數(shù)作具體介紹。

至此,處理上下文代碼的第一階段介紹完了,接下來介紹第二階段——執(zhí)行代碼階段。

執(zhí)行代碼

此時,AO/VO的屬性已經(jīng)填充好了。(盡管,大部分屬性都還沒有賦予真正的值,都只是初始化時候的undefined值)。

繼續(xù)以上一例子為例,到了執(zhí)行代碼階段,AO/VO就會修改成為如下形式:

 
 
 
  1. AO['c'] = 10;  
  2. AO['e'] = ; 

再次注意到,這里函數(shù)表達式“_e”仍在內(nèi)存中,這是因為它被保存在申明的變量“e”中,而同樣是函數(shù)表達式的“x”卻不在AO/VO中: 如果嘗試在定義前或者定義后調(diào)用“x”函數(shù),這時會發(fā)生“x為定義”的錯誤。未保存的函數(shù)表達式只有在定義或者遞歸時才能調(diào)用。

如下是更加典型的例子:

 
 
 
  1. alert(x); // function  
  2.    
  3. var x = 10;  
  4. alert(x); // 10  
  5.    
  6. x = 20;  
  7.    
  8. function x() {};  
  9.    
  10. alert(x); // 20 

上述例子中,為何“x”打印出來是函數(shù)呢?為何在申明前就可以訪問到?又為何不是10或者20呢?原因在于,根據(jù)規(guī)則——在進入上下文的時候,VO會被填充函數(shù)申明; 同一階段,還有變量申明“x”,但是,正如此前提到的,變量申明是在函數(shù)申明和函數(shù)形參之后,并且,變量申明不會對已經(jīng)存在的同樣名字的函數(shù)申明和函數(shù)形參發(fā)生沖突, 因此,在進入上下文的階段,VO填充為如下形式:

 
 
 
  1. VO = {};  
  2.    
  3. VO['x'] =   
  4.    
  5. // 發(fā)現(xiàn)var x = 10;  
  6. // 如果函數(shù)“x”還未定義  
  7. // 則 "x" 為undefined, 但是,在我們的例子中  
  8. // 變量申明并不會影響同名的函數(shù)值  
  9.    
  10. VO['x'] =  

隨后,在執(zhí)行代碼階段,VO被修改為如下所示:

 
 
 
  1. VO['x'] = 10;  
  2. VO['x'] = 20; 

正如在第二個和第三個alert顯示的那樣。

如下例子再次看到在進入上下文階段,變量存儲在VO中(因此,盡管else的代碼塊永遠都不會執(zhí)行到,而“b”卻仍然在VO中):

 
 
 
  1. if (true) {  
  2.   var a = 1;  
  3. } else {  
  4.   var b = 2;  
  5. }  
  6.    
  7. alert(a); // 1  
  8. alert(b); // undefined, but not "b is not defined" 

關(guān)于變量

大多數(shù)講JavaScript的文章甚至是JavaScript的書通常都會這么說:“申明全局變量的方式有兩種,一種是使用var關(guān)鍵字(在全局上下文中),另外一種是不用var關(guān)鍵字(在任何位置)”。 而這樣的描述是錯誤的。要記住的是:

使用var關(guān)鍵字是申明變量的唯一方式

如下賦值語句:

 
 
 
  1. a = 10;  

僅僅是在全局對象上創(chuàng)建了新的屬性(而不是變量)?!安皇亲兞俊辈⒉灰馕吨鼰o法改變,它是ECMAScript中變量的概念(它之后可以變?yōu)槿謱ο蟮膶傩?,因為VO(globalContext) === global,還記得吧?)

不同點如下所示:

 
 
 
  1. alert(a); // undefined  
  2. alert(b); // "b" is not defined  
  3.    
  4. b = 10;  
  5. var a = 20; 

接下來還是要談到VO和在不同階段對VO的修改(進入上下文階段和執(zhí)行代碼階段):

進入上下文:

 
 
 
  1. VO = {  
  2.   a: undefined  
  3. }; 

我們看到,這個階段并沒有任何“b”,因為它不是變量,“b”在執(zhí)行代碼階段才出現(xiàn)。(但是,在我們這個例子中也不會出現(xiàn),因為在“b”出現(xiàn)前就發(fā)生了錯誤)

將上述代碼稍作改動:

 
 
 
  1. alert(a); // undefined, we know why  
  2.    
  3. b = 10;  
  4. alert(b); // 10, created at code execution  
  5.    
  6. var a = 20;  
  7. alert(a); // 20, modified at code execution 

這里關(guān)于變量還有非常重要的一點:與簡單屬性不同的是,變量是不能刪除的{DontDelete},這意味著要想通過delete操作符來刪除一個變量是不可能的。

 
 
 
  1. a = 10;  
  2. alert(window.a); // 10  
  3.    
  4. alert(delete a); // true  
  5.    
  6. alert(window.a); // undefined  
  7.    
  8. var b = 20;  
  9. alert(window.b); // 20  
  10.    
  11. alert(delete b); // false  
  12.    
  13. alert(window.b); // still 20 

但是,這里有個例外,就是“eval”執(zhí)行上下文中,是可以刪除變量的:

 
 
 
  1. eval('var a = 10;');  
  2. alert(window.a); // 10  
  3.    
  4. alert(delete a); // true  
  5.    
  6. alert(window.a); // undefined 

利用某些debug工具,在終端測試過這些例子的童鞋要注意了:其中Firebug也是使用了eval來執(zhí)行終端的代碼。因此,這個時候var也是可以刪除的。

實現(xiàn)層的特性:__parent__屬性

正如此前介紹的,標準情況下,是無法直接訪問激活對象的。然而,在某些實現(xiàn)中,比如知名的SpiderMonkey和Rhino,函數(shù)有個特殊的屬性__parent__, 該屬性是對該函數(shù)創(chuàng)建所在的激活對象的引用(或者全局變量對象)。

如下所示(SpiderMonkey,Rhino):

 
 
 
  1. var global = this;  
  2. var a = 10;  
  3.    
  4. function foo() {}  
  5.    
  6. alert(foo.__parent__); // global  
  7.    
  8. var VO = foo.__parent__;  
  9.    
  10. alert(VO.a); // 10  
  11. alert(VO === global); // true 

上述例子中,可以看到函數(shù)foo是在全局上下文中創(chuàng)建的,相應(yīng)的,它的__parent__屬性設(shè)置為全局上下文的變量對象,比如說:全局對象。

然而,在SpiderMonkey中以相同的方式獲取激活對象是不可能的:不同的版本表現(xiàn)都不同,內(nèi)部函數(shù)的__parent__屬性會返回null或者全局對象。

在Rhino中,以相同的方式獲取激活對象是允許的:

如下所示(Rhino):

 
 
 
  1. var global = this;  
  2. var x = 10;  
  3.    
  4. (function foo() {  
  5.    
  6.   var y = 20;  
  7.    
  8.   // the activation object of the "foo" context  
  9.   var AO = (function () {}).__parent__;  
  10.    
  11.   print(AO.y); // 20  
  12.    
  13.   // __parent__ of the current activation  
  14.   // object is already the global object,  
  15.   // i.e. the special chain of variable objects is formed,  
  16.   // so-called, a scope chain  
  17.   print(AO.__parent__ === global); // true  
  18.    
  19.   print(AO.__parent__.x); // 10  
  20.    
  21. })(); 

總結(jié)

本文,我們介紹了與執(zhí)行上下文相關(guān)的對象。希望,本文能夠?qū)Υ蠹矣兴鶐椭?,同時也希望本文能夠起到解惑的作用。

說明

此文譯自Dmitry A.Soshnikov 的文章Variable object 。另,此文還有另外一位同事(宋珍珍)共同參譯

原文:http://goddyzhao.tumblr.com/post/11141710441/variable-object

【編輯推薦】

  1. 移動網(wǎng)站開發(fā)中常用的10段JavaScript代碼
  2. 5個有趣的JavaScript代碼片段分享
  3. JavaScript來實現(xiàn)的超炫組織結(jié)構(gòu)圖
  4. JavaScript的死與生
  5. JavaScript面向?qū)ο缶幊躺钊敕治?/li>

當(dāng)前名稱:JavaScript內(nèi)部原理之變量對象
網(wǎng)站鏈接:http://www.5511xx.com/article/cdehodi.html