Heim >Web-Frontend >js-Tutorial >Javascript 面向对象特性_javascript技巧

Javascript 面向对象特性_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal: 2016-05-16 18:37:571058Durchsuche

for ', objectArr[i], '

');

var obj = eval(objectArr[i]);
for (var p in obj) {
var kind = propertyKind(obj, p);
document.writeln('obj.', p, ' is a ', kind.fontcolor(colorSetting[kind]), ': ', obj[p], '
');
}

document.writeln('

');
}

一个常常被开发者忽略的事实是：JavaScript本身是没有事件(Event)系统的。通
常我们在JavaScript用到的onclick等事件，其实是IE的DOM模型提供的。从更内核
的角度上讲：IE通过COM的接口属性公布了一组事件接口给DOM。

有两个原因，使得在JS中不能很好的识别“一个属性是不是事件”：
- COM接口中本身只有方法，属性与事件，都是通过一组get/set方法来公布的。
- JavaScript中，本身并没有独立的“事件”机制。

因此我们看到event的识别方法，是检测属性名是否是以'on'字符串开头(以'On'开
头的是Qomo的约定)。接下来，由于DOM对象中的事件是可以不指定处理函数的，这
种情况下事件句柄为null值(Qomo采用相同的约定)；在另外的一些情况下，用户可
能象obj2这样，定义一个值为 undefined的事件。因此“事件”的判定条件被处理
成一个复杂的表达式：
("属性以on/On开头" && ("值为null/undefined" || "类型为function"))

另外，从上面的这段代码的运行结果来看。对DOM对象使用for..in，是不能列举出
对象方法来的。

最后说明一点。事实上，在很多语言的实现中，“事件”都不是“面向对象”的语
言特性，而是由具体的编程模型来提供的。例如Delphi中的事件驱动机制，是由Win32
操作系统中的窗口消息机制来提供，或者由用户代码在Component/Class中主动调用
事件处理函数来实现。

“事件”是一个“如何驱动编程模型”的机制／问题，而不是语言本身的问题。然
而以PME(property/method/event)为框架的OOP概念，已经深入人心，所以当编程语
言或系统表现出这些特性来的时候，就已经没人关心“event究竟是谁实现”的了。

3). this与with关键字的使用
------
在JavaScript的对象系统中，this关键字用在两种地方：
- 在构造器函数中，指代新创建的对象实例
- 在对象的方法被调用时，指代调用该方法的对象实例

如果一个函数被作为普通函数(而不是对象方法)调用，那么在函数中的this关键字
将指向window对象。与此相同的，如果this关键字不在任何函数中，那么他也指向
window对象。

由于在JavaScript中不明确区分函数与方法。因此有些代码看起来很奇怪：
//---------------------------------------------------------
// 函数的几种可能调用形式
//---------------------------------------------------------
function foo() {
// 下面的this指代调用该方法的对象实例
if (this===window) {
document.write('call a function.', '
');
}
else {
document.write('call a method, by object: ', this.name, '
');
}
}

function MyObject(name) {
// 下面的this指代new关键字新创建实例
this.name = name;
this.foo = foo;
}

var obj1 = new MyObject('obj1');
var obj2 = new MyObject('obj2');

// 测试1: 作为函数调用
foo();

// 测试2: 作为对象方法的调用
obj1.foo();
obj2.foo();

// 测试3: 将函数作为“指定对象的”方法调用
foo.call(obj1);
foo.apply(obj2);

在上面的代码里，obj1/obj2对foo()的调用是很普通的调用方法。——也就
是在构造器上，将一个函数指定为对象的方法。

而测试3中的call()与apply()就比较特殊。

在这个测试中，foo()仍然作为普通函数来调用，只是JavaScript的语言特性
允许在call()/apply()时，传入一个对象实例来指定foo()的上下文环境中所
出现的this关键字的引用。——需要注意的是，此时的foo()仍旧是一个普通
函数调用，而不是对象方法调用。

与this“指示调用该方法的对象实例”有些类同的，with()语法也用于限定
“在一段代码片段中默认使用对象实例”。——如果不使用with()语法，那
么这段代码将受到更外层with()语句的影响；如果没有更外层的with()，那
么这段代码的“默认使用的对象实例”将是window。

然而需要注意的是this与with关键字不是互为影响的。如下面的代码：
//---------------------------------------------------------
// 测试: this与with关键字不是互为影响的
//---------------------------------------------------------
function test() {
with (obj2) {
this.value = 8;
}
}
var obj2 = new Object();
obj2.value = 10;

test();
document.writeln('obj2.value: ', obj2.value, '
');
document.writeln('window.value: ', window.value, '
');

你不能指望这样的代码在调用结束后，会使obj2.value属性置值为8。这几行
代码的结果是：window对象多了一个value属性，并且值为8。

with(obj){...}这个语法，只能限定对obj的既有属性的读取，而不能主动的
声明它。一旦with()里的对象没有指定的属性，或者with()限定了一个不是对
象的数据，那么结果会产生一个异常。

4). 使用in关键字的运算
------
除了用for..in来反射对象的成员信息之外，JavaScript中也允许直接用in
关键字去检测对象是否有指定名字的属性。

in关键字经常被提及的原因并不是它检测属性是否存在的能力，因此在早期
的代码中，很多可喜欢用“if (!obj.propName) {}” 这样的方式来检测propName
是否是有效的属性。——很多时候，检测有效性比检测“是否存有该属性”更
有实用性。因此这种情况下，in只是一个可选的、官方的方案。

in关键字的重要应用是高速字符串检索。尤其是在只需要判定“字符串是否
存在”的情况下。例如10万个字符串，如果存储在数组中，那么检索效率将会
极差。
//---------------------------------------------------------
// 使用对象来检索
//---------------------------------------------------------
function arrayToObject(arr) {
for (var obj=new Object(), i=0, imax=arr.length; iobj[arr[i]]=null;
}
return obj;
}

var
arr = ['abc', 'def', 'ghi']; // more and more...
obj = arrayToObject(arr);

function valueInArray(v) {
for (var i=0, imax=arr.length; iif (arr[i]==v) return true;
}

return false;
}

function valueInObject(v) {
return v in obj;
}

这种使用关键字in的方法，也存在一些限制。例如只能查找字符串，而数
组元素可以是任意值。另外，arrayToObject()也存在一些开销，这使得它
不适合于频繁变动的查找集。最后，(我想你可能已经注意到了)使用对象
来查找的时候并不能准确定位到查找数据，而数组中可以指向结果的下标。

八、JavaScript面向对象的支持
~~~~~~~~~~~~~~~~~~
(续)

2. JavaScript面向对象的支持
--------
(续)

5). 使用instanceof关键字的运算
------
在JavaScript中提供了instanceof关键字来检测实例的类型。这在前面讨
论它的“五重身份”时已经讲过。但instanceof的问题是，它总是列举整个
原型链以检测类型(关于原型继承的原理在“构造与析构”小节讲述)，如：
//---------------------------------------------------------
// instanceof使用中的问题
//---------------------------------------------------------
function MyObject() {
// ...
}

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

obj1 = new MyObject();
obj2 = new MyObject2();

document.writeln(obj1 instanceof MyObject, '
');
document.writeln(obj2 instanceof MyObject, '
');

我们看到，obj1与obj2都是MyObject的实例，但他们是不同的构造函数产生
的。——注意，这在面向对象理论中正确的：因为obj2是MyObject的子类实
例，因此它具有与obj1相同的特性。在应用中这是obj2的多态性的体现之一。

但是，即便如此，我们也必须面临这样的问题：如何知道obj2与obj1是否是
相同类型的实例呢？——也就是说，连构造器都相同？

instanceof关键字不提供这样的机制。一个提供实现这种检测的能力的，是
Object.constructor属性。——但请先记住，它的使用远比你想象的要难。

好的，问题先到这里。constructor属性已经涉及到“构造与析构”的问题，
这个我们后面再讲。“原型继承”、“构造与析构”是JavaScript的OOP中
的主要问题、核心问题，以及“致命问题”。

6). null与undefined
------
在JavaScript中，null与undefined曾一度使我迷惑。下面的文字，有利于
你更清晰的认知它(或者让你更迷惑)：
- null是关键字；undefined是Global对象的一个属性。
- null是对象(空对象, 没有任何属性和方法)；undefined是undefined类
型的值。试试下面的代码：
document.writeln(typeof null);
document.writeln(typeof undefined);
- 对象模型中，所有的对象都是Object或其子类的实例，但null对象例外：
document.writeln(null instanceof Object);
- null“等值(==)”于undefined，但不“全等值(===)”于undefined：
document.writeln(null == undefined);
document.writeln(null == undefined);
- 运算时null与undefined都可以被类型转换为false，但不等值于false：
document.writeln(!null, !undefined);
document.writeln(null==false);
document.writeln(undefined==false);

八、JavaScript面向对象的支持
~~~~~~~~~~~~~~~~~~
(续)

3. 构造、析构与原型问题
--------
我们已经知道一个对象是需要通过构造器函数来产生的。我们先记住几点：
- 构造器是一个普通的函数
- 原型是一个对象实例
- 构造器有原型属性，对象实例没有
- (如果正常地实现继承模型，)对象实例的constructor属性指向构造器
- 从三、四条推出：obj.constructor.prototype指向该对象的原型

好，我们接下来分析一个例子，来说明JavaScript的“继承原型”声明，以
及构造过程。
//---------------------------------------------------------
// 理解原型、构造、继承的示例
//---------------------------------------------------------
function MyObject() {
this.v1 = 'abc';
}

function MyObject2() {
this.v2 = 'def';
}
MyObject2.prototype = new MyObject();

var obj1 = new MyObject();
var obj2 = new MyObject2();

1). new()关键字的形式化代码
------
我们先来看“obj1 = new MyObject()”这行代码中的这个new关键字。

new关键字用于产生一个新的实例（说到这里补充一下，我习惯于把保留字叫关键
字。另外，在JavaScript中new关键字同时也是一个运算符），这个实例的缺省属性
中，(至少)会执有构造器函数的原型属性(prototype)的一个引用(在ECMA Javascript
规范中，对象的这个属性名定义为__proto__)。

每一个函数，无论它是否用作构造器，都会有一个独一无二的原型对象(prototype)。
对于JavaScript“内置对象的构造器”来说，它指向内部的一个原型。缺省时JavaScript
构造出一个“空的初始对象实例(不是null)”并使原型引用指向它。然而如果你给函
数的这个prototype赋一个新的对象，那么新的对象实例将执有它的一个引用。

接下来，构造过程将调用MyObject()来完成初始化。——注意，这里只是“初始
化”。

为了清楚地解释这个过程，我用代码形式化地描述一下这个过程：
//---------------------------------------------------------
// new()关键字的形式化代码
//---------------------------------------------------------
function new(aFunction) {
// 基本对象实例
var _this = {};

// 原型引用
var _proto= aFunction.prototype;

/* if compat ECMA Script
_this.__proto__ = _proto;
*/

// 为存取原型中的属性添加(内部的)getter
_this._js_GetAttributes= function(name) {
if (_existAttribute.call(this, name))
return this[name]
else if (_js_LookupProperty.call(_proto, name))
retrun OBJ_GET_ATTRIBUTES.call(_proto, name)
else
return undefined;
}

// 为存取原型中的属性添加(内部的)setter
_this._js_GetAttributes = function(name, value) {
if (_existAttribute.call(this, name))
this[name] = value
else if (OBJ_GET_ATTRIBUTES.call(_proto, name) !== value) {
this[name] = value // 创建当前实例的新成员
}
}

// 调用构造函数完成初始化, (如果有,)传入args
aFunction.call(_this);

// 返回对象
return _this;
}

所以我们看到以下两点：
- 构造函数(aFunction)本身只是对传入的this实例做“初始化”处理，而
不是构造一个对象实例。
- 构造的过程实际发生在new()关键字/运算符的内部。

而且，构造函数(aFunction)本身并不需要操作prototype，也不需要回传this。

2). 由用户代码维护的原型(prototype)链
------
接下来我们更深入的讨论原型链与构造过程的问题。这就是：
- 原型链是用户代码创建的，new()关键字并不协助维护原型链

以Delphi代码为例，我们在声明继承关系的时候，可以用这样的代码：
//---------------------------------------------------------
// delphi中使用的“类”类型声明
//---------------------------------------------------------
type
TAnimal = class(TObject); // 动物
TMammal = class(TAnimal); // 哺乳动物
TCanine = class(TMammal); // 犬科的哺乳动物
TDog = class(TCanine); // 狗

这时，Delphi的编译器会通过编译技术来维护一个继承关系链表。我们可以通
过类似以下的代码来查询这个链表：
//---------------------------------------------------------
// delphi中使用继关系链表的关键代码
//---------------------------------------------------------
function isAnimal(obj: TObject): boolean;
begin
Result := obj is TAnimal;
end;

var
dog := TDog;

// ...
dog := TDog.Create();
writeln(isAnimal(dog));

可以看到，在Delphi的用户代码中，不需要直接继护继承关系的链表。这是因
为Delphi是强类型语言，在处理用class()关键字声明类型时，delphi的编译器
已经为用户构造了这个继承关系链。——注意，这个过程是声明，而不是执行
代码。

而在JavaScript中，如果需要获知对象“是否是某个基类的子类对象”，那么
你需要手工的来维护(与delphi这个例子类似的)一个链表。当然，这个链表不
叫类型继承树，而叫“(对象的)原型链表”。——在JS中，没有“类”类型。

参考前面的JS和Delphi代码，一个类同的例子是这样：
//---------------------------------------------------------
// JS中“原型链表”的关键代码
//---------------------------------------------------------
// 1. 构造器
function Animal() {};
function Mammal() {};
function Canine() {};
function Dog() {};

// 2. 原型链表
Mammal.prototype = new Animal();
Canine.prototype = new Mammal();
Dog.prototype = new Canine();

// 3. 示例函数
function isAnimal(obj) {
return obj instanceof Animal;
}

var
dog = new Dog();
document.writeln(isAnimal(dog));

可以看到，在JS的用户代码中，“原型链表”的构建方法是一行代码：
"当前类的构造器函数".prototype = "直接父类的实例"

这与Delphi一类的语言不同：维护原型链的实质是在执行代码，而非声明。

那么，“是执行而非声明”到底有什么意义呢？

JavaScript是会有编译过程的。这个过程主要处理的是“语法检错”、“语
法声明”和“条件编译指令”。而这里的“语法声明”，主要处理的就是函
数声明。——这也是我说“函数是第一类的，而对象不是”的一个原因。

如下例：
//---------------------------------------------------------
// 函数声明与执行语句的关系(firefox 兼容)
//---------------------------------------------------------
// 1. 输出1234
testFoo(1234);

// 2. 尝试输出obj1
// 3. 尝试输出obj2
testFoo(obj1);
try {
testFoo(obj2);
}
catch(e) {
document.writeln('Exception: ', e.description, '
');
}

// 声明testFoo()
function testFoo(v) {
document.writeln(v, '
');
}

// 声明object
var obj1 = {};
obj2 = {
toString: function() {return 'hi, object.'}
}

// 4. 输出obj1
// 5. 输出obj2
testFoo(obj1);
testFoo(obj2);

这个示例代码在JS环境中执行的结果是：
------------------------------------
1234
undefined
Exception: 'obj2' 未定义
[object Object]
hi, obj
------------------------------------
问题是，testFoo()是在它被声明之前被执行的；而同样用“直接声明”的
形式定义的object变量，却不能在声明之前引用。——例子中，第二、三
个输入是不正确的。

函数可以在声明之前引用，而其它类型的数值必须在声明之后才能被使用。
这说明“声明”与“执行期引用”在JavaScript中是两个过程。

另外我们也可以发现，使用"var"来声明的时候，编译器会先确认有该变量
存在，但变量的值会是“undefined”。——因此“testFoo(obj1)”不会发
生异常。但是，只有等到关于obj1的赋值语句被执行过，才会有正常的输出。
请对照第二、三与第四、五行输出的差异。

由于JavaScript对原型链的维护是“执行”而不是“声明”，这说明“原型
链是由用户代码来维护的，而不是编译器维护的。

由这个推论，我们来看下面这个例子：
//---------------------------------------------------------
// 示例：错误的原型链
//---------------------------------------------------------
// 1. 构造器
function Animal() {}; // 动物
function Mammal() {}; // 哺乳动物
function Canine() {}; // 犬科的哺乳动物

// 2. 构造原型链
var instance = new Mammal();
Mammal.prototype = new Animal();
Canine.prototype = instance;

// 3. 测试输出
var obj = new Canine();
document.writeln(obj instanceof Animal);

这个输出结果，使我们看到一个错误的原型链导致的结果“犬科的哺乳动
物‘不是'一种动物”。

根源在于“2. 构造原型链”下面的几行代码是解释执行的，而不是象var和
function那样是“声明”并在编译期被理解的。解决问题的方法是修改那三
行代码，使得它的“执行过程”符合逻辑：
//---------------------------------------------------------
// 上例的修正代码(部分)
//---------------------------------------------------------
// 2. 构造原型链
Mammal.prototype = new Animal();
var instance = new Mammal();
Canine.prototype = instance;

3). 原型实例是如何被构造过程使用的
------
仍以Delphi为例。构造过程中，delphi中会首先创建一个指定实例大小的
“空的对象”，然后逐一给属性赋值，以及调用构造过程中的方法、触发事
件等。

JavaScript中的new()关键字中隐含的构造过程，与Delphi的构造过程并不完全一致。但
在构造器函数中发生的行为却与上述的类似：
//---------------------------------------------------------
// JS中的构造过程(形式代码)
//---------------------------------------------------------
function MyObject2() {
this.prop = 3;
this.method = a_method_function;

if (you_want) {
this.method();
this.fire_OnCreate();
}
}
MyObject2.prototype = new MyObject(); // MyObject()的声明略

var obj = new MyObject2();

如果以单个类为参考对象的，这个构造过程中JavaScript可以拥有与Delphi
一样丰富的行为。然而，由于Delphi中的构造过程是“动态的”，因此事实上
Delphi还会调用父类(MyObject)的构造过程，以及触发父类的OnCreate()事件。

JavaScript没有这样的特性。父类的构造过程仅仅发生在为原型(prototype
属性)赋值的那一行代码上。其后，无论有多少个new MyObject2()发生，
MyObject()这个构造器都不会被使用。——这也意味着：
- 构造过程中，原型对象是一次性生成的；新对象只持有这个原型实例的引用
(并用“写复制”的机制来存取其属性)，而并不再调用原型的构造器。

由于不再调用父类的构造器，因此Delphi中的一些特性无法在JavaScript中实现。
这主要影响到构造阶段的一些事件和行为。——无法把一些“对象构造过程中”
的代码写到父类的构造器中。因为无论子类构造多少次，这次对象的构造过程根
本不会激活父类构造器中的代码。

JavaScript中属性的存取是动态的，因为对象存取父类属性依赖于原型链表，构造
过程却是静态的，并不访问父类的构造器；而在Delphi等一些编译型语言中，(不使
用读写器的)属性的存取是静态的，而对象的构造过程则动态地调用父类的构造函数。
所以再一次请大家看清楚new()关键字的形式代码中的这一行：
//---------------------------------------------------------
// new()关键字的形式化代码
//---------------------------------------------------------
function new(aFunction) {
// 原型引用
var _proto= aFunction.prototype;

// ...
}

这个过程中，JavaScript做的是“get a prototype_Ref”，而Delphi等其它语言做
的是“Inherited Create()”。

八、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('

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript 拾漏补遗_javascript技巧Nächster Artikel：JavaScript 入门基础知识想学习js的朋友可以参考下_基础知识

In Verbindung stehende Artikel

Mehr sehen