作者在 2008-02-03 21:22:59 发布以下内容
================================================================================
Qomolangma OpenProject v0.9
类别 ：Rich Web Client
关键词 ：JS OOP，JS Framwork, Rich Web Client，RIA，Web Component，
DOM，DTHML，CSS，JavaScript，JScript
项目发起：aimingoo ([email=aim@263.net]aim@263.net[/email])
项目团队：aimingoo, leon([email=pfzhou@gmail.com]pfzhou@gmail.com[/email])
有贡献者：JingYu([email=zjy@cnpack.org]zjy@cnpack.org[/email])
================================================================================
八、JavaScript面向对象的支持
~~~~~~~~~~~~~~~~~~
(续)
4. 实例和实例引用
--------
在.NET Framework对CTS(Common Type System)约定“一切都是对象”，并分为“值
类型”和“引用类型”两种。其中“值类型”的对象在转换成“引用类型”数据的
过程中，需要进行一个“装箱”和“拆箱”的过程。
在JavaScript也有同样的问题。我们看到的typeof关键字，返回以下六种数据类型：
"number"、"string"、"boolean"、"object"、"function" 和 "undefined"。
我们也发现JavaScript的对象系统中，有String、Number、Function、Boolean这四
种对象构造器。那么，我们的问题是：如果有一个数字A，typeof(A)的结果，到底会
是'number'呢，还是一个构造器指向function Number()的对象呢？
//---------------------------------------------------------
// 关于JavaScript的类型的测试代码
//---------------------------------------------------------
function getTypeInfo(V) {
return (typeof V == 'object' ? 'Object, construct by '+V.constructor
: 'Value, type of '+typeof V);
}
var A1 = 100;
var A2 = new Number(100);
document.writeln('A1 is ', getTypeInfo(A1), '<BR>');
document.writeln('A2 is ', getTypeInfo(A2), '<BR>');
document.writeln([A1.constructor === A2.constructor, A2.constructor === Number]);
测试代码的执行结果如下：
-----------
A1 is Value, type of number
A2 is Object, construct by function Number() { [native code] }
true,true
-----------
我们注意到，A1和A2的构造器都指向Number。这意味着通过constructor属性来识别
对象，(有时)比typeof更加有效。因为“值类型数据”A1作为一个对象来看待时，
与A2有完全相同的特性。
——除了与实例引用有关的问题。
参考JScript手册，我们对其它基础类型和构造器做相同考察，可以发现：
- 基础类型中的undefined、number、boolean和string，是“值类型”变量
- 基础类型中的array、function和object，是“引用类型”变量
- 使用new()方法构造出对象，是“引用类型”变量
下面的代码说明“值类型”与“引用类型”之间的区别：
//---------------------------------------------------------
// 关于JavaScript类型系统中的值/引用问题
//---------------------------------------------------------
var str1 = 'abcdefgh', str2 = 'abcdefgh';
var obj1 = new String('abcdefgh'), obj2 = new String('abcdefgh');
document.writeln([str1==str2, str1===str2], '<br>');
document.writeln([obj1==obj2, obj1===obj2]);
测试代码的执行结果如下：
-----------
true, true
false, false
-----------
我们看到，无论是等值运算(==)，还是全等运算(===)，对“对象”和“值”的
理解都是不一样的。
更进一步的理解这种现象，我们知道：
- 运算结果为值类型，或变量为值类型时，等值(或全等)比较可以得到预想结果
- (即使包含相同的数据，)不同的对象实例之间是不等值(或全等)的
- 同一个对象的不同引用之间，是等值(==)且全等(===)的
但对于String类型，有一点补充：根据JScript的描述，两个字符串比较时，只要有
一个是值类型，则按值比较。这意味着在上面的例子中，代码“str1==obj1”会得到
结果true。而全等(===)运算需要检测变量类型的一致性，因此“str1===obj1”的结
果返回false。
JavaScript中的函数参数总是传入值参，引用类型(的实例)是作为指针值传入的。因此
函数可以随意重写入口变量，而不用担心外部变量被修改。但是，需要留意传入的引用
类型的变量，因为对它方法调用和属性读写可能会影响到实例本身。——但，也可以通
过引用类型的参数来传出数据。
最后补充说明一下，值类型比较会逐字节检测对象实例中的数据，效率低但准确性高；
而引用类型只检测实例指针和数据类型，因此效率高而准确性低。如果你需要检测两个
引用类型是否真的包含相同的数据，可能你需要尝试把它转换成“字符串值”再来比较。
6. 函数的上下文环境
--------
只要写过代码，你应该知道变量是有“全局变量”和“局部变量”之分的。绝大多数的
JavaScript程序员也知道下面这些概念：
//---------------------------------------------------------
// JavaScript中的全局变量与局部变量
//---------------------------------------------------------
var v1 = '全局变量-1';
v2 = '全局变量-2';
function foo() {
v3 = '全局变量-3';
var v4 = '只有在函数内部并使用var定义的，才是局部变量';
}
按照通常对语言的理解来说，不同的代码调用函数，都会拥有一套独立的局部变量。
因此下面这段代码很容易理解：
//---------------------------------------------------------
// JavaScript的局部变量
//---------------------------------------------------------
function MyObject() {
var o = new Object;
this.getValue = function() {
return o;
}
}
var obj1 = new MyObject();
var obj2 = new MyObject();
document.writeln(obj1.getValue() == obj2.getValue());
结果显示false，表明不同(实例的方法)调用返回的局部变量“obj1/obj2”是不相同。
变量的局部、全局特性与OOP的封装性中的“私有(private)”、“公开(public)”具
有类同性。因此绝大多数资料总是以下面的方式来说明JavaScript的面向对象系统中
的“封装权限级别”问题：
//---------------------------------------------------------
// JavaScript中OOP封装性
//---------------------------------------------------------
function MyObject() {
// 1. 私有成员和方法
var private_prop = 0;
var private_method_1 = function() {
// ...
return 1
}
function private_method_2() {
// ...
return 1
}
// 2. 特权方法
this.privileged_method = function () {
private_prop++;
return private_prop + private_method_1() + private_method_2();
}
// 3. 公开成员和方法
this.public_prop_1 = '';
this.public_method_1 = function () {
// ...
}
}
// 4. 公开成员和方法(2)
MyObject.prototype.public_prop_1 = '';
MyObject.prototype.public_method_1 = function () {
// ...
}
var obj1 = new MyObject();
var obj2 = new MyObject();
document.writeln(obj1.privileged_method(), '<br>');
document.writeln(obj2.privileged_method());
在这里，“私有(private)”表明只有在(构造)函数内部可访问，而“特权(privileged)”
是特指一种存取“私有域”的“公开(public)”方法。“公开(public)”表明在(构造)函
数外可以调用和存取。
除了上述的封装权限之外，一些文档还介绍了其它两种相关的概念：
- 原型属性：Classname.prototype.propertyName = someValue
- (类)静态属性：Classname.propertyName = someValue
然而，从面向对象的角度上来讲，上面这些概念都很难自圆其说：JavaScript究竟是为何、
以及如何划分出这些封装权限和概念来的呢？
——因为我们必须注意到下面这个例子所带来的问题：
//---------------------------------------------------------
// JavaScript中的局部变量
//---------------------------------------------------------
function MyFoo() {
var i;
MyFoo.setValue = function (v) {
i = v;
}
MyFoo.getValue = function () {
return i;
}
}
MyFoo();
var obj1 = new Object();
var obj2 = new Object();
// 测试一
MyFoo.setValue.call(obj1, 'obj1');
document.writeln(MyFoo.getValue.call(obj1), '<BR>');
// 测试二
MyFoo.setValue.call(obj2, 'obj2');
document.writeln(MyFoo.getValue.call(obj2));
document.writeln(MyFoo.getValue.call(obj1));
document.writeln(MyFoo.getValue());
在这个测试代码中，obj1/obj2都是Object()实例。我们使用function.call()的方式
来调用setValue/getValue，使得在MyFoo()调用的过程中替换this为obj1/obj2实例。
然而我们发现“测试二”完成之后，obj2、obj1以及function MyFoo()所持有的局部
变量都返回了“obj2”。——这表明三个函数使用了同一个局部变量。
由此可见，JavaScript在处理局部变量时，对“普通函数”与“构造器”是分别对待
的。这种处理策略在一些JavaScript相关的资料中被解释作“面向对象中的私有域”
问题。而事实上，我更愿意从源代码一级来告诉你真相：这是对象的上下文环境的问
题。——只不过从表面看去，“上下文环境”的问题被转嫁到对象的封装性问题上了。
(在阅读下面的文字之前，)先做一个概念性的说明：
- 在普通函数中，上下文环境被window对象所持有
- 在“构造器和对象方法”中，上下文环境被对象实例所持有
在JavaScript的实现代码中，每次创建一个对象，解释器将为对象创建一个上下文环境
链，用于存放对象在进入“构造器和对象方法”时对function()内部数据的一个备份。
JavaScript保证这个对象在以后再进入“构造器和对象方法”内部时，总是持有该上下
文环境，和一个与之相关的this对象。由于对象可能有多个方法，且每个方法可能又存
在多层嵌套函数，因此这事实上构成了一个上下文环境的树型链表结构。而在构造器和
对象方法之外，JavaScript不提供任何访问(该构造器和对象方法的)上下文环境的方法。
简而言之：
- 上下文环境与对象实例调用“构造器和对象方法”时相关，而与(普通)函数无关
- 上下文环境记录一个对象在“构造函数和对象方法”内部的私有数据
- 上下文环境采用链式结构，以记录多层的嵌套函数中的上下文
由于上下文环境只与构造函数及其内部的嵌套函数有关，重新阅读前面的代码：
//---------------------------------------------------------
// JavaScript中的局部变量
//---------------------------------------------------------
function MyFoo() {
var i;
MyFoo.setValue = function (v) {
i = v;
}
MyFoo.getValue = function () {
return i;
}
}
MyFoo();
var obj1 = new Object();
MyFoo.setValue.call(obj1, 'obj1');
我们发现setValue()的确可以访问到位于MyFoo()函数内部的“局部变量i”，但是由于
setValue()方法的执有者是MyFoo对象(记住函数也是对象)，因此MyFoo对象拥有MyFoo()
函数的唯一一份“上下文环境”。
接下来MyFoo.setValue.call()调用虽然为setValue()传入了新的this对象，但实际上
拥有“上下文环境”的仍旧是MyFoo对象。因此我们看到无论创建多少个obj1/obj2，最
终操作的都是同一个私有变量i。
全局函数/变量的“上下文环境”持有者为window，因此下面的代码说明了“为什么全
局变量能被任意的对象和函数访问”：
//---------------------------------------------------------
// 全局函数的上下文
//---------------------------------------------------------
/*
function Window() {
*/
var global_i = 0;
var global_j = 1;
function foo_0() {
}
function foo_1() {
}
/*
}
window = new Window();
*/
因此我们可以看到foo_0()与foo_1()能同时访问global_i和global_j。接下来的推论是，
上下文环境决定了变量的“全局”与“私有”。而不是反过来通过变量的私有与全局来
讨论上下文环境问题。
更进一步的推论是：JavaScript中的全局变量与函数，本质上是window对象的私有变量
与方法。而这个上下文环境块，位于所有(window对象内部的)对象实例的上下文环境链
表的顶端，因此都可能访问到。
用“上下文环境”的理论，你可以顺利地解释在本小节中，有关变量的“全局／局部”
作用域的问题，以及有关对象方法的封装权限问题。事实上，在实现JavaScript的C源
代码中，这个“上下文环境”被叫做“JSContext”，并作为函数／方法的第一个参数
传入。——如果你有兴趣，你可以从源代码中证实本小节所述的理论。
另外，《JavaScript权威指南》这本书中第4.7节也讲述了这个问题，但被叫做“变量
的作用域”。然而重要的是，这本书把问题讲反了。——作者试图用“全局、局部的作
用域”，来解释产生这种现象的“上下文环境”的问题。因此这个小节显得凌乱而且难
以自圆其说。
不过在4.6.3小节，作者也提到了执行环境(execution context)的问题，这就与我们这
里说的“上下文环境”是一致的了。然而更麻烦的是，作者又将读者引错了方法，试图
用函数的上下文环境去解释DOM和ScriptEngine中的问题。
但这本书在“上下文环境链表”的查询方式上的讲述，是正确的而合理的。只是把这个
叫成“作用域”有点不对，或者不妥。
Qomolangma OpenProject v0.9
类别 ：Rich Web Client
关键词 ：JS OOP，JS Framwork, Rich Web Client，RIA，Web Component，
DOM，DTHML，CSS，JavaScript，JScript
项目发起：aimingoo ([email=aim@263.net]aim@263.net[/email])
项目团队：aimingoo, leon([email=pfzhou@gmail.com]pfzhou@gmail.com[/email])
有贡献者：JingYu([email=zjy@cnpack.org]zjy@cnpack.org[/email])
================================================================================
八、JavaScript面向对象的支持
~~~~~~~~~~~~~~~~~~
(续)
4. 实例和实例引用
--------
在.NET Framework对CTS(Common Type System)约定“一切都是对象”，并分为“值
类型”和“引用类型”两种。其中“值类型”的对象在转换成“引用类型”数据的
过程中，需要进行一个“装箱”和“拆箱”的过程。
在JavaScript也有同样的问题。我们看到的typeof关键字，返回以下六种数据类型：
"number"、"string"、"boolean"、"object"、"function" 和 "undefined"。
我们也发现JavaScript的对象系统中，有String、Number、Function、Boolean这四
种对象构造器。那么，我们的问题是：如果有一个数字A，typeof(A)的结果，到底会
是'number'呢，还是一个构造器指向function Number()的对象呢？
//---------------------------------------------------------
// 关于JavaScript的类型的测试代码
//---------------------------------------------------------
function getTypeInfo(V) {
return (typeof V == 'object' ? 'Object, construct by '+V.constructor
: 'Value, type of '+typeof V);
}
var A1 = 100;
var A2 = new Number(100);
document.writeln('A1 is ', getTypeInfo(A1), '<BR>');
document.writeln('A2 is ', getTypeInfo(A2), '<BR>');
document.writeln([A1.constructor === A2.constructor, A2.constructor === Number]);
测试代码的执行结果如下：
-----------
A1 is Value, type of number
A2 is Object, construct by function Number() { [native code] }
true,true
-----------
我们注意到，A1和A2的构造器都指向Number。这意味着通过constructor属性来识别
对象，(有时)比typeof更加有效。因为“值类型数据”A1作为一个对象来看待时，
与A2有完全相同的特性。
——除了与实例引用有关的问题。
参考JScript手册，我们对其它基础类型和构造器做相同考察，可以发现：
- 基础类型中的undefined、number、boolean和string，是“值类型”变量
- 基础类型中的array、function和object，是“引用类型”变量
- 使用new()方法构造出对象，是“引用类型”变量
下面的代码说明“值类型”与“引用类型”之间的区别：
//---------------------------------------------------------
// 关于JavaScript类型系统中的值/引用问题
//---------------------------------------------------------
var str1 = 'abcdefgh', str2 = 'abcdefgh';
var obj1 = new String('abcdefgh'), obj2 = new String('abcdefgh');
document.writeln([str1==str2, str1===str2], '<br>');
document.writeln([obj1==obj2, obj1===obj2]);
测试代码的执行结果如下：
-----------
true, true
false, false
-----------
我们看到，无论是等值运算(==)，还是全等运算(===)，对“对象”和“值”的
理解都是不一样的。
更进一步的理解这种现象，我们知道：
- 运算结果为值类型，或变量为值类型时，等值(或全等)比较可以得到预想结果
- (即使包含相同的数据，)不同的对象实例之间是不等值(或全等)的
- 同一个对象的不同引用之间，是等值(==)且全等(===)的
但对于String类型，有一点补充：根据JScript的描述，两个字符串比较时，只要有
一个是值类型，则按值比较。这意味着在上面的例子中，代码“str1==obj1”会得到
结果true。而全等(===)运算需要检测变量类型的一致性，因此“str1===obj1”的结
果返回false。
JavaScript中的函数参数总是传入值参，引用类型(的实例)是作为指针值传入的。因此
函数可以随意重写入口变量，而不用担心外部变量被修改。但是，需要留意传入的引用
类型的变量，因为对它方法调用和属性读写可能会影响到实例本身。——但，也可以通
过引用类型的参数来传出数据。
最后补充说明一下，值类型比较会逐字节检测对象实例中的数据，效率低但准确性高；
而引用类型只检测实例指针和数据类型，因此效率高而准确性低。如果你需要检测两个
引用类型是否真的包含相同的数据，可能你需要尝试把它转换成“字符串值”再来比较。
6. 函数的上下文环境
--------
只要写过代码，你应该知道变量是有“全局变量”和“局部变量”之分的。绝大多数的
JavaScript程序员也知道下面这些概念：
//---------------------------------------------------------
// JavaScript中的全局变量与局部变量
//---------------------------------------------------------
var v1 = '全局变量-1';
v2 = '全局变量-2';
function foo() {
v3 = '全局变量-3';
var v4 = '只有在函数内部并使用var定义的，才是局部变量';
}
按照通常对语言的理解来说，不同的代码调用函数，都会拥有一套独立的局部变量。
因此下面这段代码很容易理解：
//---------------------------------------------------------
// JavaScript的局部变量
//---------------------------------------------------------
function MyObject() {
var o = new Object;
this.getValue = function() {
return o;
}
}
var obj1 = new MyObject();
var obj2 = new MyObject();
document.writeln(obj1.getValue() == obj2.getValue());
结果显示false，表明不同(实例的方法)调用返回的局部变量“obj1/obj2”是不相同。
变量的局部、全局特性与OOP的封装性中的“私有(private)”、“公开(public)”具
有类同性。因此绝大多数资料总是以下面的方式来说明JavaScript的面向对象系统中
的“封装权限级别”问题：
//---------------------------------------------------------
// JavaScript中OOP封装性
//---------------------------------------------------------
function MyObject() {
// 1. 私有成员和方法
var private_prop = 0;
var private_method_1 = function() {
// ...
return 1
}
function private_method_2() {
// ...
return 1
}
// 2. 特权方法
this.privileged_method = function () {
private_prop++;
return private_prop + private_method_1() + private_method_2();
}
// 3. 公开成员和方法
this.public_prop_1 = '';
this.public_method_1 = function () {
// ...
}
}
// 4. 公开成员和方法(2)
MyObject.prototype.public_prop_1 = '';
MyObject.prototype.public_method_1 = function () {
// ...
}
var obj1 = new MyObject();
var obj2 = new MyObject();
document.writeln(obj1.privileged_method(), '<br>');
document.writeln(obj2.privileged_method());
在这里，“私有(private)”表明只有在(构造)函数内部可访问，而“特权(privileged)”
是特指一种存取“私有域”的“公开(public)”方法。“公开(public)”表明在(构造)函
数外可以调用和存取。
除了上述的封装权限之外，一些文档还介绍了其它两种相关的概念：
- 原型属性：Classname.prototype.propertyName = someValue
- (类)静态属性：Classname.propertyName = someValue
然而，从面向对象的角度上来讲，上面这些概念都很难自圆其说：JavaScript究竟是为何、
以及如何划分出这些封装权限和概念来的呢？
——因为我们必须注意到下面这个例子所带来的问题：
//---------------------------------------------------------
// JavaScript中的局部变量
//---------------------------------------------------------
function MyFoo() {
var i;
MyFoo.setValue = function (v) {
i = v;
}
MyFoo.getValue = function () {
return i;
}
}
MyFoo();
var obj1 = new Object();
var obj2 = new Object();
// 测试一
MyFoo.setValue.call(obj1, 'obj1');
document.writeln(MyFoo.getValue.call(obj1), '<BR>');
// 测试二
MyFoo.setValue.call(obj2, 'obj2');
document.writeln(MyFoo.getValue.call(obj2));
document.writeln(MyFoo.getValue.call(obj1));
document.writeln(MyFoo.getValue());
在这个测试代码中，obj1/obj2都是Object()实例。我们使用function.call()的方式
来调用setValue/getValue，使得在MyFoo()调用的过程中替换this为obj1/obj2实例。
然而我们发现“测试二”完成之后，obj2、obj1以及function MyFoo()所持有的局部
变量都返回了“obj2”。——这表明三个函数使用了同一个局部变量。
由此可见，JavaScript在处理局部变量时，对“普通函数”与“构造器”是分别对待
的。这种处理策略在一些JavaScript相关的资料中被解释作“面向对象中的私有域”
问题。而事实上，我更愿意从源代码一级来告诉你真相：这是对象的上下文环境的问
题。——只不过从表面看去，“上下文环境”的问题被转嫁到对象的封装性问题上了。
(在阅读下面的文字之前，)先做一个概念性的说明：
- 在普通函数中，上下文环境被window对象所持有
- 在“构造器和对象方法”中，上下文环境被对象实例所持有
在JavaScript的实现代码中，每次创建一个对象，解释器将为对象创建一个上下文环境
链，用于存放对象在进入“构造器和对象方法”时对function()内部数据的一个备份。
JavaScript保证这个对象在以后再进入“构造器和对象方法”内部时，总是持有该上下
文环境，和一个与之相关的this对象。由于对象可能有多个方法，且每个方法可能又存
在多层嵌套函数，因此这事实上构成了一个上下文环境的树型链表结构。而在构造器和
对象方法之外，JavaScript不提供任何访问(该构造器和对象方法的)上下文环境的方法。
简而言之：
- 上下文环境与对象实例调用“构造器和对象方法”时相关，而与(普通)函数无关
- 上下文环境记录一个对象在“构造函数和对象方法”内部的私有数据
- 上下文环境采用链式结构，以记录多层的嵌套函数中的上下文
由于上下文环境只与构造函数及其内部的嵌套函数有关，重新阅读前面的代码：
//---------------------------------------------------------
// JavaScript中的局部变量
//---------------------------------------------------------
function MyFoo() {
var i;
MyFoo.setValue = function (v) {
i = v;
}
MyFoo.getValue = function () {
return i;
}
}
MyFoo();
var obj1 = new Object();
MyFoo.setValue.call(obj1, 'obj1');
我们发现setValue()的确可以访问到位于MyFoo()函数内部的“局部变量i”，但是由于
setValue()方法的执有者是MyFoo对象(记住函数也是对象)，因此MyFoo对象拥有MyFoo()
函数的唯一一份“上下文环境”。
接下来MyFoo.setValue.call()调用虽然为setValue()传入了新的this对象，但实际上
拥有“上下文环境”的仍旧是MyFoo对象。因此我们看到无论创建多少个obj1/obj2，最
终操作的都是同一个私有变量i。
全局函数/变量的“上下文环境”持有者为window，因此下面的代码说明了“为什么全
局变量能被任意的对象和函数访问”：
//---------------------------------------------------------
// 全局函数的上下文
//---------------------------------------------------------
/*
function Window() {
*/
var global_i = 0;
var global_j = 1;
function foo_0() {
}
function foo_1() {
}
/*
}
window = new Window();
*/
因此我们可以看到foo_0()与foo_1()能同时访问global_i和global_j。接下来的推论是，
上下文环境决定了变量的“全局”与“私有”。而不是反过来通过变量的私有与全局来
讨论上下文环境问题。
更进一步的推论是：JavaScript中的全局变量与函数，本质上是window对象的私有变量
与方法。而这个上下文环境块，位于所有(window对象内部的)对象实例的上下文环境链
表的顶端，因此都可能访问到。
用“上下文环境”的理论，你可以顺利地解释在本小节中，有关变量的“全局／局部”
作用域的问题，以及有关对象方法的封装权限问题。事实上，在实现JavaScript的C源
代码中，这个“上下文环境”被叫做“JSContext”，并作为函数／方法的第一个参数
传入。——如果你有兴趣，你可以从源代码中证实本小节所述的理论。
另外，《JavaScript权威指南》这本书中第4.7节也讲述了这个问题，但被叫做“变量
的作用域”。然而重要的是，这本书把问题讲反了。——作者试图用“全局、局部的作
用域”，来解释产生这种现象的“上下文环境”的问题。因此这个小节显得凌乱而且难
以自圆其说。
不过在4.6.3小节，作者也提到了执行环境(execution context)的问题，这就与我们这
里说的“上下文环境”是一致的了。然而更麻烦的是，作者又将读者引错了方法，试图
用函数的上下文环境去解释DOM和ScriptEngine中的问题。
但这本书在“上下文环境链表”的查询方式上的讲述，是正确的而合理的。只是把这个
叫成“作用域”有点不对，或者不妥。