如何在 JavaScript 對象中嵌入私有成員_第1頁
如何在 JavaScript 對象中嵌入私有成員_第2頁
如何在 JavaScript 對象中嵌入私有成員_第3頁
如何在 JavaScript 對象中嵌入私有成員_第4頁
如何在 JavaScript 對象中嵌入私有成員_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

1、最近，我開發(fā)一個項目 Angular Cloud Data Connector, 掛念A(yù)ngular開發(fā)者使用云數(shù)據(jù)，特殊是 Azure移動服務(wù), 使用WEB標準，像索引數(shù)據(jù)庫(indexed DB)。我嘗試建立一種方式，使得JavaScript開發(fā)者能將私有成員嵌入到一個對象中。我解決這個問題的技術(shù)用到了我命名的閉包空間（closure space）。在這篇入門文章中，我要共享的是如何在你的項目中用它，及它對主流掃瞄器的性能和內(nèi)存的影響。在深化學(xué)習(xí)前，咱們先說下，你為什么需要用到私有成員（private members）， 還有一種替代方式來模擬私有成員。1. 為何要用私

2、有成員（Private Members）當(dāng)你用JavaScript 創(chuàng)建一個對象時，可以聲明值成員（value members）。 假如你打算把握對它們的讀/寫訪問操作，可以如下聲明:var entity = entity._property = "hello world"Object.defineProperty(entity, "property",     get: function ()  

3、;return this._property; ,    set: function (value)         this._property = value;    ,    enumerable: true,    configurable: true);這樣實

4、現(xiàn)，你能完全把握讀和寫操作。問題在于_property 成員仍舊可以直接訪問和修改。這也就是為何我們需要更加穩(wěn)定牢靠的方式，聲明私有成員，它智能通過對象的方法來訪問。2. 使用閉包空間（Closure Space）解決方法是使用閉包空間。每當(dāng)內(nèi)部函數(shù) (inner fanction) 訪問來自外部函數(shù)作用域的變量時，掃瞄器為你安排一段內(nèi)存空間。有時很取巧，不過就我們的題目來講，這算是一個完善的解決方案。我們在上個代碼版本中添加這個特性:var createProperty = function (obj, prop, currentV

5、alue)     Object.defineProperty(obj, prop,                 get: function ()  return currentValue; ,         &#

6、160;  set: function (value)             currentValue = value;                    ,    

7、;                enumerable: true,                    configurable: true    );  

8、                   var entity =  var myVar = "hello world"createProperty(entity, "property", myVar);示例中，createProperty 函數(shù)有一個 currentVal

9、ue 變量，存在 get 和 set 方法。此變量會保存到 get 和 set 函數(shù)的閉包空間中?，F(xiàn)在，只有這兩個函數(shù)能看到和更新 currentValue 變量! 任務(wù)完成!唯一需要警惕 caveat，警告，留意）的是源值 (myVar) 仍可訪問。下面給出另一個更健壯的版本（愛護 myVar 變量）:var createProperty = function (obj, prop)     var currentValue = objprop;

10、0;   Object.defineProperty(obj, prop,         get: function ()  return currentValue; ,        set: function (value)      

11、0;      currentValue = value;        ,        enumerable: true,        configurable: true    );var entity

12、 =     property: "hello world"createProperty(entity, "property");接受該函數(shù), 即便源值都銷毀(destructed，注：意思是不能直接賦值)了。到此大功告成了!3. 性能考慮Performance Considerations現(xiàn)在咱們看看性能。很明顯，比起一個簡潔的變量，閉包空間，甚或（對象）屬性要慢的多，且更消耗資源。這就是本文更多關(guān)注一般方式和閉包空間機制差異的緣由。為證明閉包空間機制并

13、不比標準方式更消耗資源， 我寫了下面代碼做個基準測試：<!DOCTYPE html><html xmlns="/1999/xhtml"><head>    <title></title></head><style>    html         font-fam

14、ily: "Helvetica Neue", Helvetica;    </style><body>    <div id="results">Computing.</div>    <script>        var results 

15、;= document.getElementById("results");        var sampleSize = 1000000;        var opCounts = 1000000;        var entities =&

16、#160;        setTimeout(function ()             / Creating entities            for (var index = 0;&#

17、160;index < sampleSize; index+)                 entities.push(                    property: 

18、"hello world (" + index + ")"                );                    

19、60;   / Random reads            var start = new Date().getTime();            for (index = 0; index < o

20、pCounts; index+)                 var position = Math.floor(Math.random() * entities.length);               

21、60;var temp = perty;                        var end = new Date().getTime();        &#

22、160;   results.innerHTML = "<strong>Results:</strong><br>Using member access: <strong>" + (end - start) + "</strong> ms"        , 

23、0);        setTimeout(function ()             / Closure space =            var createProperty = func

24、tion (obj, prop, currentValue)                 Object.defineProperty(obj, prop,                   &#

25、160; get: function ()  return currentValue; ,                    set: function (value)           

26、60;             currentValue = value;                    ,           &

27、#160;        enumerable: true,                    configurable: true             

28、0;  );                        / Adding property and using closure space to save private value    

29、60;       for (var index = 0; index < sampleSize; index+)                 var entity = entitiesindex;   

30、60;            var currentValue = perty;                createProperty(entity, "property", currentValue); 

31、0;                      / Random reads            var start = new Date().getTime();   

32、;         for (index = 0; index < opCounts; index+)                 var position = Math.floor(Math.random() *

33、60;entities.length);                var temp = perty;                      

34、  var end = new Date().getTime();            results.innerHTML += "<br>Using closure space: <strong>" + (end - start) + "</st

35、rong> ms"        , 0);        setTimeout(function ()             / Using local member =    &

36、#160;       / Adding property and using local member to save private value            for (var index = 0; index < sam

37、pleSize; index+)                 var entity = entitiesindex;                entity._property = 

38、perty;                Object.defineProperty(entity, "property",                     get: functi

39、on ()  return this._property; ,                    set: function (value)               

40、60;         this._property = value;                    ,               

41、;     enumerable: true,                    configurable: true                ); 

42、                       / Random reads            var start = new Date().getTime();  &

43、#160;         for (index = 0; index < opCounts; index+)                 var position = Math.floor(Math.random() 

44、* entities.length);                var temp = perty;                     &#

45、160;  var end = new Date().getTime();            results.innerHTML += "<br>Using local member: <strong>" + (end - start) + "<

46、/strong> ms"        , 0);    </script></body></html>我創(chuàng)建了一百萬個對象，都有屬性成員。要完成下面三個測試：· 執(zhí)行 1百萬次隨機訪問屬性。· 執(zhí)行1百萬次隨機訪問閉包空間實現(xiàn)版本。· 執(zhí)行1百萬次隨機訪問常規(guī)get/set實現(xiàn)版本。測試結(jié)果參見下面表格和圖表:我們發(fā)覺，閉包空間實現(xiàn)總是快于常規(guī)實現(xiàn)，依據(jù)掃瞄器的不同，還可以

47、做進一步的性能優(yōu)化。Chrome 上的性能表現(xiàn)低于預(yù)期。或許存在 bug，因此，為確認(存在 bug），我聯(lián)系了 Google 項目組，描述發(fā)生的癥狀。還有，假如你打算測試在 Microsoft Edge 微軟新發(fā)布的掃瞄器，在windows10 中默認安裝中的性能表現(xiàn)，你可以點擊下載 。然而，假如認真爭辯，你會發(fā)覺，使用閉包空間或?qū)傩员戎苯釉L問變量成員要10倍左右。 因此，使用要恰當(dāng)且謹慎。4. 內(nèi)存占用（Memory Footprint）我們也得驗證該技術(shù)不會消耗過多內(nèi)存。為測試內(nèi)存占用基準狀況，我寫了下面代碼段：直接屬性引用版本（Refe

48、rence Code）var sampleSize = 1000000; var entities =  / Creating entitiesfor (var index = 0; index < sampleSize; index+)     entities.push(       &#

49、160;    property: "hello world (" + index + ")");常規(guī)方式版本（Regular Way，get/set）var sampleSize = 1000000;var entities = / Adding property and using local member to&

50、#160;save private valuefor (var index = 0; index < sampleSize; index+)     var entity =     entity._property = "hello world (" + index + 

51、")"    Object.defineProperty(entity, "property",         get: function ()  return this._property; ,        set: function (value)&#

52、160;            this._property = value;        ,        enumerable: true,        configurable: true    );    entities.push(entity);閉包空間版本（Closure Space Version）var sampleSize = 1000000;var entities = var createProperty = function (obj, prop, currentValue)     Object.

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論