上一篇:使用javascript改进你的框架 (摘) >>
这是我在网上摘入的,贴上来与大家一起学习学习。 在javascript中应用Object(1)
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>
下一篇:在javascript中应用Object (2) >>
相关文章:
- · 设置open方法中的参数
- · 打开页面就是全屏的方法
- · javascript 实现下拉列表连动,提示:Array not defined
- · 利用javascript实现时间段的查询
- · 表单填写时用 回车 代替 TAB 的实现方式
- · javascript里类似select case 该如何用?
- · javascript里类似select case 该如何用?
- · 在javascript 里面有没有检查日期格式的函数?
- · js中with的和case的用法
- · asp的cookie本身不设置的话默认的是application的path=/,所以不设关系不大,expires要设。给你netscape...
- · html的标准里这样写的。
- · Dreamweaver 4 & UltraDev 4两个BUG(字体设置不能保存和行号显示错位)的解决方法
- · 一个DHTML的例子——3D文字
- · 如何做页面自动刷新,又不用让用户按回车键来提交数据!(大功告成)
- · javascript对象与数组参考大全1
- · javascript对象与数组参考大全2
- · 一个点击后自动滚屏的例子!
- · 一个鼠标自动移动的js例子!
- · window.showModalDialog()中有三个参数,各有什么用,请举例!
- · 三级下拉框连动的数据库版!
- · 给一个类增加属性和方法?看看这个够不够?
- · 在网页中实现OICQ里的头像选择的下拉框 (附例子)
- · 请看用javascript设置和读取cookie的简单例子.....
- · 请看被打开的子窗口继承父窗口定义的styleSheets的例子
- · 经常有人询问如何用javascript判断日期是否有效,我以前也遇到过,不过后来得高人指点解决了,贴出来大...
- · ShowModalDialog的具体用法
- · 下拉式互动列表框(EC潮流网同学录之真情留言板使用的代码)
- · MSGBOX返回值
- · js中几种去掉字串左右空格的方法,请看
- · VBSctipt 5.0中的新特性
- · Jscript 5.0中的新特性
- · 加快 DHTML 的一组技巧(Copy from Microsoft)
- · 一个不太让人讨厌的自动弹出窗口:)
- · 一个把数字转英文的实用程序
- · rollarea.js及其用法示例
- · 下拉框连动的小例子(.htm版)
- · 判断访问者的浏览器是否支持javascript和Cookies
- · 在Windows桌面上使用WSH接收邮件 (转)
