站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Javascript 专题Javascript实例教程(5) 利用Javascript创建对象

Javascript实例教程(5) 利用Javascript创建对象

摘要: Javascript实例教程(5) 利用Javascript创建对象
<textarea readonly style="border:none;font-family:Courier New;line-height:150%;width:760px;overflow-y:visible"> 你可能对于一些其它的编程语言很熟悉,比如C++或者Java等等,它们也是可以创建对象的,现在最新的VB版本VB.NET也具有了更好的面向对象功能-----创建对象。从本质上讲,创建对象的想法只是为了创建一个简单的实体,这个实体包含了许多属性和方法。以下是一个对象构造器的例子:

function Person(name, age, colour) {

this.name = name;

this.age = age;

this.colour = colour;

}

然后,我们可以这样来调用Person构造器:

var somebody = new Person("Patrick", 22, "red");

或者从用户那里得到输入数值:

var pName = prompt("What is your name?");

var pAge = prompt("How old are you this year?");

var pColour = prompt("What is your favourite colour?");

var somebody = new Person(pName, pAge, pColour);

所有在JavaScript中得构造器,就象在Java中,都可以利用new关键字来进行调用。当一个person利用它的属性{"Patrick", 22, "red"}被创建(或者说被构造)的时候,这些数值就可以访问了,比如 :

<table BORDER cellspacing=1 cellpadding=7 width=500> <td width="33%" valign="TOP">

somebody.name, or </td> <td width="33%" valign="TOP">

somebody["name"] </td> <td width="33%" valign="TOP">

"Patrick" </td> </tr> <td width="33%" valign="TOP">

somebody.age, or </td> <td width="33%" valign="TOP">

somebody["age"] </td> <td width="33%" valign="TOP">

22 </td> </tr> <td width="33%" valign="TOP">

somebody.colour, or </td> <td width="33%" valign="TOP">

somebody["colour"] </td> <td width="33%" valign="TOP">

"red" </td> </tr> </table>

因为我们利用name增加了Person的属性,所以它们必须通过name来被引用,这点在后面的代码中可以看到。如果我们使用数字,那么我们就必须使用数字来引用,比如要用somebody[0],而不用somebody.name。Javascript的数组和对象(比如 forms,images,frames,…)都允许这两种方法。

另外地,数组和对象都有一个本质的属性,即length(长度)。我们在编制程序的时候,可以这样来使用它:objectName.length,它返回对象包含的元素或者属性的个数。
属性同样也可以从函数中来创建,这样,你只需要增加一行到Person函数中就可以创建属性了: function Person(name, age, colour) {

this.name = name;

this.age = age;

this.colour = colour;

this.birthYear = (new Date()).getYear() - this.age;

}

以上的Person函数定义了第四个属性:birthYear,它代表每一个Person的出生年份。这里要注意,这一增加的行是调用一个内置的Date构造器,它返回一个包含了当前日期和时间的Date对象。

这是一个非常懒惰的方法来访问一个Date变量。所以使用下面的代码会显得更准确些,更有可读性:

var today = new Date();

this.birthYear = today.getYear() - this.age;

当然,有许多方法来对JavaScript程序进行“压缩”。通过插入对象到代码中,你就可以处理绝大多数的变量。

这个Date对象比起我们上面定义的Person对象来说更复杂,因为它包括了访问方法(accessor/get)以及操作方法(manipulator/set)。同时,增加简单的对象方法到JavaScript中是可能,下面是详细的例子代码:

<script language="JavaScript">



function Person(name, age, colour) {

this.name = name;

this.age = age;

this.colour = colour;

this.birthYear = (new Date()).getYear() - this.age;

this.toString = printPerson; // 这里定义the Person.toString() 方法

this.isOlder = isOlder; // 这里定义Person.isOlder(Person) 方法

}


function printPerson() {

var text = this.name + " was born in " + this.birthYear +"
";

text += "and is " + this.age + " years old.

";

return text;

}


function isOlder(otherPerson) { // 这里定义是否第一个人是更老的

return (this.age > otherPerson.age); // 返回布尔型数值

}


//下面的代码用于测试我们的函数


var body1 = new Person("Patrick", 22, "red");

var body2 = new Person("Betty", 21, "green");


document.write(body1); //这里为Person.toString()创建一个调用

document.write(body2);


document.write(body1.name);

document.write((body1.isOlder(body2)) ? " is " : " is not "); // 是否更老?

document.write("older than " + body2.name);


// Stop hiding

</script>
通过为Person对象重载Person.toString()方法,我们可以将Person对象作为字符串显示出来。每当Person对象被作为字符串引用的时候,pringPerson返回的数值就决定了该显示什么了。

上面脚本的输出如下所示:

Patrick was born in 76

and is 22 years old.


Betty was born in 77

and is 21 years old.


Patrick is older than Betty

从输出的结果我们可以看到年份是以两位数字表示的,如1976年只用76来表示。所以你可能想增加“19”到这两位数字的前面。不幸的是,“千年虫”的问题使得你处理起来有点棘手。而不同的浏览器处理Date对象的getYear()方法是不同的。

<table BORDER cellspacing=1 cellpadding=7 width=500> <td width="25%" valign="TOP">

Year(年份) </td> <td width="25%" valign="TOP">

Navigator浏览器 </td> <td width="25%" valign="TOP">

IE 3.x浏览器 </td> <td width="25%" valign="TOP">

IE 4.x浏览器 </td> </tr> <td width="25%" valign="TOP">

1998 </td> <td width="25%" valign="TOP">

98 </td> <td width="25%" valign="TOP">

98 </td> <td width="25%" valign="TOP">

98 </td> </tr> <td width="25%" valign="TOP">

1999 </td> <td width="25%" valign="TOP">

99 </td> <td width="25%" valign="TOP">

99 </td> <td width="25%" valign="TOP">

99 </td> </tr> <td width="25%" valign="TOP">

2000 </td> <td width="25%" valign="TOP">

2000 </td> <td width="25%" valign="TOP">

100 </td> <td width="25%" valign="TOP">

2000 </td> </tr> <td width="25%" valign="TOP">

2001 </td> <td width="25%" valign="TOP">

2001 </td> <td width="25%" valign="TOP">

101 </td> <td width="25%" valign="TOP">

2001 </td> </tr> </table>

你可以从上面表格中发现最新的浏览器支持1999年之后四位的年份格式(如2000、2001)。不幸的是,老的浏览器处理年份的格式的时候给程序设计人员无尽的困惑。我经常使用的具体解决方法如下所示,与大家共享:

var thisYear = (new Date()).getYear();

thisYear = 1900 + (thisYear % 1900);

这里(thisYear % 1900)作用是将年份转换位IE 3.x格式并且增加1900以得到真实的年份(比如,2002年经过this Year%1900转换位IE 3.x格式位102,然后102再加上1900得到2002)。上面这两条语句可以适用于从1900年到3799年的处理,现在看起来这么长的时间是足够使用了。但是,为了避免类似于“千年虫”问题,我们应该再找出更好的解决方案,在本教程中就不给出了。另外,新的ECMA标准包括了一个名为getFullYear()的函数,它是返回完整的年份格式,但是这个函数只能被Navigator 4支持,在IE中是不能使用的。

最后对程序再做一点改进,我们可以修改People构造器以转换年份为YYYY格式,具体代码如下:

this.birthYear = 1900 + (((new Date()).getYear() - this.age) % 1900);

在JavaScript中使用对象的能力通常被许多程序设计人员所忽视。但是从本教程中,你应该可以看到使用对象可以使程序员设计出功能更强大的应用程序来的。</td> </tr> </table></td> </tr>   

</td> </tr> </table> </textarea>
↑返回目录
前一篇: Javascript实例教程(6) 在一个表单中设置和检查Cookies
后一篇: Javascript实例教程(4) 探测浏览器插件