JavaScript物件導向的支援(5)

來源:互聯網
上載者:User

================================================================================
Qomolangma OpenProject v0.9

類別    :Rich Web Client
關鍵詞  :JS OOP,JS Framwork, Rich Web Client,RIA,Web Component,
          DOM,DTHML,CSS,JavaScript,JScript

項目發起:aimingoo (aim@263.net)
項目團隊:aimingoo, leon(pfzhou@gmail.com)
有貢獻者:JingYu(zjy@cnpack.org)
================================================================================

八、JavaScript物件導向的支援
~~~~~~~~~~~~~~~~~~
(續)

 4). 需要使用者維護的另一個屬性:constructor
 ------
 回顧前面的內容,我們提到過:
   - (如果正常地實現繼承模型,)對象執行個體的constructor屬性指向構造器
   - obj.constructor.prototype指向該對象的原型
   - 通過Object.constructor屬性,可以檢測obj2與obj1是否是相同類型的執行個體

  與原型鏈要通過使用者代碼來維護prototype屬性一樣,執行個體的構造器屬性constructor
也需要使用者代碼維護。

  對於JavaScript的內建對象來說,constructor屬性指向內建的構造器函數。如:
//---------------------------------------------------------
// 內建對象執行個體的constructor屬性
//---------------------------------------------------------
var _object_types = {
  'function'  : Function,
  'boolean'   : Boolean,
  'regexp'    : RegExp,
// 'math'     : Math,
// 'debug'    : Debug,
// 'image'    : Image;
// 'undef'    : undefined,
// 'dom'      : undefined,
// 'activex'  : undefined,
  'vbarray'   : VBArray,
  'array'     : Array,
  'string'    : String,
  'date'      : Date,
  'error'     : Error,
  'enumerator': Enumerator,
  'number'    : Number,
  'object'    : Object
}

function objectTypes(obj) {
  if (typeof obj !== 'object') return typeof obj;
  if (obj === null) return 'null';

  for (var i in _object_types) {
    if (obj.constructor===_object_types[i]) return i;
  }
  return 'unknow';
}

// 測試資料和相關代碼
function MyObject() {
}
function MyObject2() {
}
MyObject2.prototype = new MyObject();

window.execScript(''+
'Function CreateVBArray()' +
'  Dim a(2, 2)' +
'  CreateVBArray = a' +
'End Function', 'VBScript');

document.writeln('<div id=dom style="display:none">dom<', '/div>');

// 測試代碼
var ax = new ActiveXObject("Microsoft.XMLHTTP");
var dom = document.getElementById('dom');
var vba = new VBArray(CreateVBArray());
var obj = new MyObject();
var obj2 = new MyObject2();

document.writeln(objectTypes(vba), '<br>');
document.writeln(objectTypes(ax), '<br>');
document.writeln(objectTypes(obj), '<br>');
document.writeln(objectTypes(obj2), '<br>');
document.writeln(objectTypes(dom), '<br>');

在這個例子中,我們發現constructor屬性被實現得並不完整。對於DOM對象、ActiveX對象
來說這個屬性都沒有正確的返回。

確切的說,DOM(包括Image)對象與ActiveX對象都不是標準JavaScript的對象體系中的,
因此它們也可能會具有自己的constructor屬性,並有著與JavaScript不同的解釋。因此,
JavaScript中不維護它們的constructor屬性,是具有一定的合理性的。

另外的一些單體對象(而非構造器),也不具有constructor屬性,例如“Math”和“Debug”、
“Global”和“RegExp對象”。他們是JavaScript內部構造的,不應該公開構造的細節。

我們也發現執行個體obj的constructor指向function MyObject()。這說明JavaScript維護了對
象的constructor屬性。——這與一些人想象的不一樣。

然而再接下來,我們發現MyObject2()的執行個體obj2的constructor仍然指向function MyObject()。
儘管這很說不通,然而現實的確如此。——這到底是為什麼呢?

事實上,僅下面的代碼:
--------
function MyObject2() {
}

obj2 = new MyObject2();
document.writeln(MyObject2.prototype.constructor === MyObject2);
--------
構造的obj2.constructor將正確的指向function MyObject2()。事實上,我們也會注意到這
種情況下,MyObject2的原型屬性的constructor也正確的指向該函數。然而,由於JavaScript
要求指定prototype對象來構造原型鏈:
--------
function MyObject2() {
}
MyObject2.prototype = new MyObject();

obj2 = new MyObject2();
--------
這時,再訪問obj2,將會得到新的原型(也就是MyObject2.prototype)的constructor屬性。
因此,一切很明了:原型的屬性影響到構造過程對對象的constructor的初始設定。

作為一種補充的解決問題的手段,JavaScript開發規範中說“need to remember to reset
the constructor property',要求使用者自行設定該屬性。

所以你會看到更規範的JavaScript代碼要求這樣書寫:
//---------------------------------------------------------
// 維護constructor屬性的規範代碼
//---------------------------------------------------------
function MyObject2() {
}
MyObject2.prototype = new MyObject();
MyObject2.prototype.constructor = MyObject2;

obj2 = new MyObject2();

更外一種解決問題的方法,是在function MyObject()中去重設該值。當然,這樣會使
得執行效率稍低一點點:
//---------------------------------------------------------
// 維護constructor屬性的第二種方式
//---------------------------------------------------------
function MyObject2() {
  this.constructor = arguments.callee;
  // or, this.constructor = MyObject2;

  // ...
}
MyObject2.prototype = new MyObject();

obj2 = new MyObject2();

 5). 析構問題
 ------
 JavaScript中沒有解構函式,但卻有“對象析構”的問題。也就是說,儘管我們不
知道一個對象什麼時候會被析構,也不能截獲它的析構過程並處理一些事務。然而,
在一些不多見的時候,我們會遇到“要求一個對象立即析構”的問題。

問題大多數的時候出現在對ActiveX Object的處理上。因為我們可能在JavaScript
裡建立了一個ActiveX Object,在做完一些處理之後,我們又需要再建立一個。而
如果原來的對象供應者(Server)不允許建立多個執行個體,那麼我們就需要在JavaScript
中確保先前的執行個體是已經被釋放過了。接下來,即使Server允許建立多個執行個體,而
在多個執行個體間允許共用資料(例如OS的授權,或者資源、檔案的鎖),那麼我們在新
執行個體中的操作就可能會出問題。

可能還是有人不明白我們在說什麼,那麼我就舉一個例子:如果建立一個Excel對象,
開啟檔案A,然後我們save它,然後關閉這個執行個體。然後我們再建立Excel對象並開啟
同一檔案。——注意這時JavaScript可能還沒有來得及析構前一個對象。——這時我們
再想Save這個檔案,就發現失敗了。下面的程式碼範例這種情況:
//---------------------------------------------------------
// JavaScript中的析構問題(ActiveX Object樣本)
//---------------------------------------------------------
<script>
var strSaveLocation = 'file:///E:/1.xls'

function createXLS() {
  var excel = new ActiveXObject("Excel.Application");
  var wk = excel.Workbooks.Add();
  wk.SaveAs(strSaveLocation);
  wk.Saved = true;

  excel.Quit();
}

function writeXLS() {
  var excel = new ActiveXObject("Excel.Application");
  var wk = excel.Workbooks.Open(strSaveLocation);
  var sheet = wk.Worksheets(1);
  sheet.Cells(1, 1).Value = '測試字串';
  wk.SaveAs(strSaveLocation);
  wk.Saved = true;

  excel.Quit();
}
</script>

<body>
  <button onclick="createXLS()">建立</button>
  <button onclick="writeXLS()">重寫</button>
</body> 

在這個例子中,在本地檔案操作時並不會出現異常。——最多隻是有一些記憶體垃
圾而已。然而,如果strSaveLocation是一個遠端URL,這時本地將會儲存一個
檔案存取許可權的憑證,而且同時只能一個(遠端)執行個體來開啟該excel文檔並存
儲。於是如果反覆點擊"重寫"按鈕,就會出現異常。

——注意,這是在SPS中操作共用檔案時的一個執行個體的簡化代碼。因此,它並非
“學術的”無聊討論,而且工程中的實際問題。

解決這個問題的方法很複雜。它涉及到兩個問題:
  - 本地憑證的釋放
  - ActiveX Object執行個體的釋放

下面我們先從JavaScript中對象的“失效”問題說起。簡單的說:
  - 一個對象在其生存的上下文環境之外,即會失效。
  - 一個全域的對象在沒有被執用(引用)的情況下,即會失效。

例如:
//---------------------------------------------------------
// JavaScript對象何時失效
//---------------------------------------------------------
function testObject() {
  var _obj1 = new Object();
}

function testObject2() {
  var _obj2 = new Object();
  return _obj2;
}

// 樣本1
testObject();

// 樣本2
testObject2()

// 樣本3
var obj3 = testObject2();
obj3 = null;

// 樣本4
var obj4 = testObject2();
var arr = [obj4];
obj3 = null;
arr = [];

在這四個樣本中:
  - “樣本1”在函數testObject()中構造了_obj1,但是在函數退出時,
    它就已經離開了函數的上下文環境,因此_obj1失效了;
  - “樣本2”中,testObject2()中也構造了一個對象_obj2並傳出,因
    此對象有了“函數外”的上下文環境(和生存周期),然而由於函數
    的傳回值沒有被其它變數“持有”,因此_obj2也立即失效了;
  - “樣本3”中,testObject2()構造的_obj2被外部的變數obj3持用了,
    這時,直到“obj3=null”這行代碼生效時,_obj2才會因為參考關聯性
    消失而失效。
  - 與樣本3相同的原因,“樣本4”中的_obj2會在“arr=[]”這行代碼
    之後才會失效。

但是,對象的“失效”並不等會“釋放”。在JavaScript運行環境的內部,沒
有任何方式來確切地告訴使用者“對象什麼時候會釋放”。這依賴於JavaScript
的記憶體回收機制。——這種策略與.NET中的回收機制是類同的。

在前面的Excel操作範例程式碼中,對象的所有者,也就是"EXCEL.EXE"這個進程
只能在“ActiveX Object執行個體的釋放”之後才會發生。而檔案的鎖,以及操作
系統的許可權憑證是與進程相關的。因此如果對象僅是“失效”而不是“釋放”,
那麼其它進程處理檔案和引用作業系統的許可權憑據時就會出問題。

——有些人說這是JavaScript或者COM機制的BUG。其實不是,這是OS、IE
和JavaScript之間的一種複雜關係所導致的,而非獨立的問題。

Microsoft公開瞭解決這種問題的策略:主動調用記憶體回收過程。

在(微軟的)JScript中提供了一個CollectGarbage()過程(通常簡稱GC過程),
GC過程用於清理當前IE中的“失效的對象失例”,也就是調用對象的析構過程。

在上例中調用GC過程的代碼是:
//---------------------------------------------------------
// 處理ActiveX Object時,GC過程的標準調用方式
//---------------------------------------------------------
function writeXLS() {
  //(略...)

  excel.Quit();
  excel = null;
  setTimeout(CollectGarbage, 1);
}

第一行代碼調用excel.Quit()方法來使得excel進程中止並退出,這時由於JavaScript
環境執有excel對象執行個體,因此excel進程並不實際中止。

第二行代碼使excel為null,以清除對象引用,從而使對象“失效”。然而由於
對象仍舊在函數上下文環境中,因此如果直接調用GC過程,對象仍然不會被清理。

第三行代碼使用setTimeout()來調用CollectGarbage函數,時間間隔設為'1',只
是使得GC過程發生在writeXLS()函數執行完之後。這樣excel對象就滿足了“能被
GC清理”的兩個條件:沒有引用和離開上下文環境。

GC過程的使用,在使用了ActiveX Object的JS環境中很有效。一些潛在的ActiveX
Object包括XML、VML、OWC(Office Web Componet)、flash,甚至包括在JS中的VBArray。
從這一點來看,ajax架構由於採用了XMLHTTP,並且同時要滿足“不切換頁面”的
特性,因此在適當的時候主動調用GC過程,會得到更好的效率用UI體驗。

事實上,即使使用GC過程,前面提到的excel問題仍然不會被完全解決。因為IE還
緩衝了許可權憑據。使頁的許可權憑據被更新的唯一方法,只能是“切換到新的頁面”,
因此事實上在前面提到的那個SPS項目中,我採用的方法並不是GC,而是下面這一
段代碼:
//---------------------------------------------------------
// 處理ActiveX Object時採用的頁面切換代碼
//---------------------------------------------------------
function writeXLS() {
  //(略...)

  excel.Quit();
  excel = null;
 
  // 下面代碼用於解決IE call Excel的一個BUG, MSDN中提供的方法:
  //   setTimeout(CollectGarbage, 1);
  // 由於不能清除(或同步)網頁的受信任狀態, 所以將導致SaveAs()等方法在
  // 下次調用時無效.
  location.reload();
}

最後之最後,關於GC的一個補充說明:在IE表單被最小化時,IE將會主動調用一次
CollectGarbage()函數。這使得IE視窗在最小化之後,記憶體佔用會有明顯改善。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.