JavaScript面向对象的支持(5)

================================================================================
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对象，
打开文件Ａ，然后我们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。其实不是，这是ＯＳ、ＩＥ
和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窗口在最小化之后，内存占用会有明显改善。