|
在JavaScript中应用Object
JavaScript是一种客户端脚本语言，在大多数情况下，它被用来制作在 Web页面上飞来飞去的对象，或用于确认HTML 表单中的输入数据合法性。但是，如果你超越这些表象深入挖掘，就会发现，这种简单易学的语言还有许多许多其它用途。比如，JavaScript中面向对象(Object)的结构体系。你还不知道在JavaScript中面向对象是怎么一回事情吧？没有关系，请跟我来。
JavaScript的对象模型所提供的功能和灵活性并不如Java 和 Perl语言那样多，但是，你很快就能看到，即便是有限的功能有时候也能用得非常方便顺手。并且，如果考虑得再多一点，开发人员使用 JavaScript对象可以明显地减少用于代码开发和测试方面的时间。当然，由此构造的精巧美妙网页，还能赢得同事的尊重和隔壁漂亮女孩的爱慕 :
一. 对象概览
介绍对象结构之前，首先给快速浏览一下对象的世界里面都有什么？
在 JavaScript中，一个“对象构造器”只是一套程序语句，它们用于完成一项特殊任务：它们为一个对象设置基本规则，规定它能够做什么，不能做什么。一个典型的对象构造器包含变量和函数，并且作为模板，从中产生出对那个对象的特殊例示。
每个从模板中构造出的对象具有一些特征或“属性”，还有一些预先定义的函数或“方法”，这些属性和方法直接对应于对象定义中的变量和函数。
对象被定义之后，JavaScript就允许你根据自己的需要生成许多例示。这些例示中的每一个都是一个完全独立的对象，具有自己的属性和方法，而且可以独立于其它对象进行操作。
现在你可能疑惑：这是不是有点多余？因为JavaScript允许创建自定义函数，并在代码中需要的地方使用它们。这难道还不够吗？是的，如果只想生成一个对象，那么函数就可以完成这项任务。
但是，常常要为一个对象生成多于一个的例示。例如，多个菜单树，多个图象交换。在这种情况下，最好使用对象，这样每个例示都有其自己的变量和函数，不需影响程序中的其它变量就能够进行操作。
对象还有助于保持代码的模块化。你可以在一个单独的文件中定义一个对象构造器，只在使用到这个对象的页面中包含这个文件。这样，就大大地简化了代码的修改，因为只需要编辑一个文件就能向生成的所有对象中增加新的功能。
二. 定义对象构造器Sumthing
这以前你可能已经遇到过JavaScript对象了，比如下面的代码创建了图象对象的一个新例示：
＜script language="JavaScript"＞
a = new Image();
＜/script＞
下面的代码创建了日期对象的一个新例示：
＜script language="JavaScript"＞
x = new Date();
＜/script＞
JavaScript自带了许多内置对象，每个对象都有预先定义的方法和属性。但是如果想创造满足自己需要的，又该如何呢？这也不是很困难的，事实上，这与编写一个JavaScript函数完全相同：
＜script language="JavaScript"＞
// object constructor
function Sumthing() {
}
＜/script＞
这样，就可以使用下面的代码来创建一个 Sumthing 对象的例示：
＜script language="JavaScript"＞
// object instance
obj = new Sumthing();
＜/script＞
注意这里的非常重要的关键字 "new"，JavaScript 就是通过这个关键字确定是想要创建一个对象的例示而不是仅仅运行一个函数。
上面的代码为Sumthing 对象创建一个叫做 "obj" 的例示。通过添加弹出 alert()对话框的代码，可以验证它确实是一个对象：
＜script language="JavaScript"＞
obj = new Sumthing();
alert(obj);
＜/script＞
运行。
三. 定义属性
现在对Sumthing函数进行些修改，让它接受一些变量：
＜script language="JavaScript"＞
// object constructor
function Sumthing(num1, num2) {
// object properties
this.alpha = num1;
this.beta = num2;
}
＜/script＞
现在 Sumthing对象有了两个属性：alpha和 beta。有了这两个属性，就有可能创建 Sumthing对象的一个例示，并向它传递两个参数("num1" 和 "num2")，然后将这两个参数作为对象属性存储("alpha" 和 "beta")。注意 关键字"this" 的用法，它简化了使用对象构造器“本地”变量(和函数)的代码。
接着使用下列代码测试一下：
＜script language="JavaScript"＞
obj = new Sumthing(2, 89);
alert("alpha is " + obj.alpha);
alert("beta is " + obj.beta);
＜/script＞
运行。
四. 定义方法
同定义对象属性一样，我们也可以定义对象的方法，本质上就是简单的JavaScript函数。下面对 Sumthing函数再进行一些修改，添加一个Add() 方法，它负责增加存储在 "alpha" 和"beta"中的值：
＜script language="JavaScript"＞
// object constructor
function Sumthing(num1, num2) {
// object properties
this.alpha = num1;
this.beta = num2;
// object methods
this.Add = Add;
}
// object method Add() - add arguments
function Add() {
sum = this.alpha + this.beta;
return sum;
}
＜/script＞
这里有两个有趣的事情。首先，对象的方法Add() 实际上是在对象构造器模块的外部定义的，而且还可以使用"this"关键字来引用对象属性。其次，就象对象属性是用"this"定义的一样，对象方法也需要用同样方法来定义。
运行下面的测试代码，看看它是如何工作的：
＜script language="JavaScript"＞
obj = new Sumthing(2, 89);
alert("The sum of " + obj.alpha + " and " + obj.beta + " is " + obj.Add());
＜/script＞
输出结果。
到此对象构造器就准备好了。下面快速演示一下如何用对象构造器为同一个对象生成多个例示，以及每个例示都能彼此独立运行：
＜script language="JavaScript"＞
// one object
obj1 = new Sumthing(2, 89);
alert("The sum of " + obj1.alpha + " and " + obj1.beta + " is " +
obj1.Add());
// another one
obj2 = new Sumthing(546, 67);
alert("The sum of " + obj2.alpha + " and " + obj2.beta + " is " +
obj2.Add());
// and a third one
obj3 = new Sumthing(2364237, 283457);
alert("The sum of " + obj3.alpha + " and " + obj3.beta + " is " +
obj3.Add());
＜/script＞
|
