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＞

　　对象应用例程

再演示另一个关于Thermometer(温度计)对象的例子，它负责将不同的温度刻度进行转换：

＜script language="JavaScript"＞

// constructor
function Thermometer(degrees, scale)
{

// methods
this.convertToCelsius = convertToCelsius;
this.convertToFahrenheit = convertToFahrenheit;
this.raiseTemp = raiseTemp;

// action to take
if (scale == "f" || scale == "F")
　　　　{
　　　　this.scale = scale;
　　　　this.degreesF = degrees;
　　　　this.degreesC = 0;
　　　　this.convertToCelsius();
　}
　else
　　　　{
　　　　this.scale = scale;
　　　　this.degreesF = 0;
　　　　this.degreesC = degrees;
　　　　this.convertToFahrenheit();
　　　　}
　}

// conversion functions
function convertToCelsius()
{
this.degreesC = (5.0/9.0) * (this.degreesF - 32.0);
}

function convertToFahrenheit()
{
this.degreesF = ((9.0/5.0) * this.degreesC) + 32.0;
}

// method to raise temperature
function raiseTemp(num)
{
this.degreesF += num;
this.degreesC += num;
}

＜/script＞

　　以上代码的含义是：构造器创建了一个对象，用一个温度和温度刻度对其进行初始化，然后运行转换函数来获取在另一种刻度下等值的温度。其中包含了一个 raiseTemp() 方法，以演示对象属性是如何修改的。

　　以下代码演示了如何在 HTML 文档中使用对象：

＜script language="JavaScript"＞

// create an object instance
a = new Thermometer(98.6, "f");

// access object properties
alert("Temperature in Fahrenheit is " + a.degreesF);
alert("Temperature in Celsius is " + a.degreesC);

// execute object methods
a.raiseTemp(10);
alert("Temperature in Fahrenheit is " + a.degreesF);
alert("Temperature in Celsius is " + a.degreesC);

＜/script＞

　　结果如下：

　　


　　传递对象参数 

同可以向一个对象传递参数一样，也可以把对象传递给另一个对象。请看看以下的例子，其中包含两个对象构造器，设置第二个的目的是把一个对象作为参数来接收：

＜script language="JavaScript"＞

// Room object
// accepts area (sq. ft.) and colour (walls) as parameters
function Room(area, colour)
{
this.area = area;
this.colour = colour;
}

// House object
// accepts price as parameter
function House(price, room)
{
this.price = price;
this.obj = room;
}

＜/script＞

　　再看看如何使用它：

＜script language="JavaScript"＞
Kitchen = new Room(500, "white");
DiningRoom = new Room(600, "white");

RedGables = new House(89000, Kitchen);
alert(RedGables.obj.area);
＜/script＞

　　在这种情况下，新创建的Room对象的例示 "Kitchen"被传递给 House 对象 "RedGables"。使用一种分级结构，就可能通过House对象一直深入到Room对象并获取一个特定对象属性的值。这与许多DOM 对象的使用方法是相同的。 

　　获取及修改构造器信息

　　关于 JavaScript对象还有其它一些有趣的东西。比如，可以通过属性constructor(构造器)来获取一个对象的完整信息。以下例子演示了如何将其应用在 Sumthing对象构造器中：

＜script language="JavaScript"＞

alpha = new Sumthing(23, 865);
alert("The object constructor for alpha is " + alpha.constructor);

＜/script＞

　　以下是运行结果：

　　

　　另外，还可以使用 prototype关键字向一个已经存在的对象中增加新的对象属性。比如，以下代码向刚才的Room 对象中增加属性： 

＜script language="JavaScript"＞

// Room object
// accepts area (sq. ft.) and colour (walls) as parameters
function Room(area, colour)
{
this.area = area;
this.colour = colour;
}
Room.prototype.direction = "east";

＜/script＞

　　以上代码运行后，将向Room对象构造器中增加了一个叫做direction的对象属性，它的值为east。接着，试一试存取这个对象属性：

＜script language="JavaScript"＞
Kitchen = new Room(1000, "green");
alert(Kitchen.direction);
＜/script＞

　　结果如下： 

　　

　　最后，还可以用prototype关键字来增加对象方法。 

　　综合应用

最后一个例子演示JavaScript对象的重要性。首先设置好一个 Calendar(日历)对象，然后根据需要显示任何一个月的月历。执行过程不复杂，只需要指定月和年为对象属性，然后让构造器做其它事情即可：

＜script language="JavaScript"＞
/*　　Calendar object, calendar.js
　　　Usage:
　　　obj = new Calendar(mm, yyyy);
　　　created 15.Mar.2001

　　　copyright Melonfire, 2001. all rights reserved.
　　　http://www.melonfire.com/community/columns/trog/

　　　demonstration only - not meant for production enviroments!!
*/

// constructor
function Calendar(month, year)
{

// array of day names
this.days = new Array("Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday");

// array of month names
this.months = new Array("January", "February", "March", "April", "May",
"June", "July", "August", "September", "October", "November", "December");

// array of total days in each month
this.totalDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

// object properties - month and year
// correction for zero-based array index
this.month = month-1;
this.year = year;

// leap year correction
if (this.year % 4 == 0)
{
this.totalDays[1] = 29;
}

// temporary variable - used later
this.rowCount = 0;

// object method
this.display = display;

// automatically run method display() once object is initialized
this.display();
}

// function to display calendar
function display()
{

// create a Date object
// required to obtain basic date information
// get the first and last day of the month - boundary values for calendar
obj = new Date(this.year, this.month, 1);
this.firstDayOfMonth = obj.getDay();
obj.setDate(31);
this.lastDayOfMonth = obj.getDay();

// start table
document.write("＜table border=0 cellpadding=2 cellspacing=5＞");

// month display
document.write("＜tr＞＜td colspan=7 align=center＞＜font face=Arial
size=-1＞＜b＞" + this.months[this.month] + " " + this.year +
"＜/b＞＜/font＞＜/td＞＜/tr＞");

// day names
document.write("＜tr＞");
for (x=0; x＜7; x++)
{

document.write("＜td＞＜font face=Arial size=-2＞" +
this.days[x].substring(0,3) + "＜/font＞＜/td＞") ;
}
document.write("＜/tr＞");

// start displaying dates
// display blank spaces until the first day of the month
document.write("＜tr＞");
for (x=1; x＜=this.firstDayOfMonth; x++)
{
// this comes in handy to find the end of each 7-day block
this.rowCount++;
document.write("＜td＞＜font face=Arial size=-2＞ ＜/font＞＜/td＞");
}

// counter to track the current date
this.dayCount=1;
while (this.dayCount ＜= this.totalDays[this.month])
{
// use this to find out when the 7-day block is complete and display a new row
if (this.rowCount % 7 == 0)
{
document.write("＜/tr＞\n＜tr＞");
}

// print date
document.write("＜td align=center＞＜font face=Arial size=-1＞" + this.dayCount
+ "＜/font＞＜/td＞");
this.dayCount++;
this.rowCount++;
}
// end table
document.write("＜/tr＞＜/table＞");
}

// eof
＜/script＞

　　解释上面代码的工作过程：

以下解释一下上面代码的工作过程：

　　最开始的几行设置了包含月和日名的数组以及每个月中总的天数。用一个简单的方程式来判断某年是否为闰年，如果是的话就对二月的总天数进行相应修改。然后控制就传给了对象方法display()，它负责将日历写到页面上。

　　使用了Date对象和一些临时变量之后，就创建了一个表格并用这个月的日期来填充好。document.write()方法负责设置 ＜table＞、＜tr＞ 和 ＜td＞ 标记，然后将日期信息打印到表格单元中。

　　以下代码说明如何使用这个对象：

＜html＞
＜head＞
＜script language="JavaScript" src="calendar.js"＞＜/script＞
＜/head＞

＜body bgcolor="white"＞
＜script＞ obj1 = new Calendar(2, 2005); ＜/script＞
＜script＞ obj2 = new Calendar(7, 2001); ＜/script＞
＜/body＞
＜/html＞

　　代码运行后的结果如下：


　　这就是全部了。我希望本文中的例子能让你对 JavaScript对象的用途有一个正确的评价，也许还能为你在开发中使用它们提供几个有用的思路。