penny建议：集体洗浴
在JavaScript中创建新对象
李晓华
使用JavaScript可以创建自己的对象。虽然JavaScript内部和浏览器本身的功能已十分强大，但JavaScript还是提供了创建一个新对象的方法。使其不必像超文本标识语言那样，求于或其它多媒体工具，就能完成许多复杂的工作。
在JavaScript中创建一个新的对象是十分简单的。首先它必须定义一个对象，而后再为该对象创建一个实例。这个实例就是一个新对象，它具有对象定义中的基本特征。
一、对象的定义
JavaScript对象的定义，其基本格式如下：
Function Object（属性表）
This.prop1=prop1
This.prop2=prop2
...
This.meth=FunctionName1
This.meth=FunctionName2
...
在一个对象的定义中，可以为该对象指明其属性和方法。通过属性和方法构成了一个对象的实例。如以下是一个关于University对象的定义：
Function university(name,city,creatDate URL)
This.name=name
This.city=city
This.creatDate=New Date(creatDate)
This.URL=URL
其基本含义如下：
Name－指定一个“单位”名称。
City－“单位”所在城市。
CreatDate－记载university对象的更新日期。
URL－该对象指向一个网址。
二、创建对象实例
一旦对象定义完成后，就可以为该对象创建一个实例了：
NewObject=New object()
其中Newobjet是新的对象，Object已经定义好的对象。例：
U1=New university(“云南省”，“昆明市”，"January 05,199712:00:00","http://www.YN.KM")
U2=New university(“云南电子科技大学”，“昆明”,"January 07,1997 12:00:00","htlp://www.YNKJ.CN")
三、对象方法的使用
在对象中除了使用属性外，有时还需要使用方法。在对象的定义中，我们看到This.meth=FunctionName语句，那就是为定义对象的方法。实质对象的方法就是一个函数FunctionName，通过它实现自己的意图。
例在university对象中增加一个方法，该方法是显示它自己本身，并返回相应的字串。
function university(name,city,createDate,URL)
This.Name=Name
This.city=city
This.createDate=New Date(creatDate)；
This.URL=URL；
This.showuniversity=showuniversity
其中This.showuniversity就是定义了一个方法－－－showuniversity()。
而showuniversity()方法是实现university对象本身的显示。
function showuniversity()
For (var prop in this)
alert(prop+="+this+"")
其中alert是JavaScript中的内部函数，显示其字符串。
四、JavaScript中的数组
使用New创建数组
JavaScript中没有提供像其它语言具有明显的数组类型，但可以通过function定义一个数组，并使用New对象操作符创建一个具有下标的数组。从而可以实现任何数据类型的存储。
a、定义对象的数组
Function arrayName(size){
This.length=Size
for(var X= X=sizeX++)
this=0
Reture this
}
其中arrayName是定义数组的一个名子，Size是有关数组大小的值（1-size），即数组元素的个数。通过for循环对一个当前对象的数组进行定义，最后返回这个数组。
从中可以看出，JavaScript中的数组是从1到size，这与其它０到size的数组表示方法有所不同，当然你可根据需要将数组的下标由１到size调整到０到size－１,可由下列实现:
Function arrayName (size)
For (var X=0 X=sizeX++)
this=0
this.lenght=size
Return this
从上面可以看出该方法是只是调整了this.lenght的位置，该位置是用于存储数组的大小的。从而调整后的数组的下标将与其它语言一致。但请读者注意正是由于数组下标顺序由１到size，使得JavaScript中的对象功能更加强大。
b、创建数组实例
一个数组定义完成以后，还不能马上使用，必须为该数组创建一个数组实例：
Myarray=New arrayName(n)
并赋于初值：
Myarray=“字串１”；
Myarray=“字串２”；
Myarray=“字串３”；
...
Myarray=“字串n”；
一旦给数组赋于了初值后，数组中就具有真正意义的数据了，以后就可以在程序设计过程中直接引用。
创建多维数组
Function creatMArray(row,col){
var indx=0
this.length=(row*10)+col
for(var x=1x=rowx++)
for(var y=1y=coly++)
indx=(x*10)+y
this=””
}
myMArray=new creatMArray()
之后可通过myMArray、myMArray、myMArray、myMArray、myMArray、myMArray、
…来引用。
内部数组
在Java中为了方便内部对象的操作,可以使用窗体(Forms)、框架(Frames)、元素(element)、链接(links)和锚(Anchors)数组实现对象的访问。
anchors:使用《A name=“anchorName“》标识来建立锚的链接。
links: 使用A href=”URL”来定义一个越文本链接项。
Forms: 在程序中使用多窗体时,建立该数组。
Elements:在一个窗口中使用从个元素时,建立该数组。
Frames:建立框架时,使用该数组
anchors用于窗体的访问(它是通过《form name=“form1”》所指定的),link用于被链接到的锚点的访问(它是通过《a href=URL》所指定的)。Forms反映窗体的属性,而anchors反映Web页面中的链接属性。
有关锚数组的文档：
HTML
HEAD
BODY
A NAME=”MyAnchorsName1” 定义第一个锚名
HTML Code
A NAME=”MyAnchorsName2” 定义第二个锚名
HTML Code
A HREF=”#MyAnchorsName1”建立锚的链接
A HREF=”#MyAnchorsName2?gt 建立锚的链接
….
该文档段建立了两面全锚的链接,可通过Anchors访问这些锚。document.Anchors反映第一个锚,而document.Anchors反映第二个锚的有关信息。
五、范例
范例1：一个动态文字滚动的例子。
test5_1.htm
html
head
title/title
script LANGUAGE="JavaScript"
with (top.window.location)
{baseURL = href.substring (0,href.lastIndexOf ("/") + 1)}
total_toc_items = 0
current_overID = ""
last_overID = ""
browser = navigator.appName
version = parseInt(navigator.appVersion)
client=null
loaded = 0
if (browser == "Netscape" version = 3) client = "ns3"
function toc_item (img_name,icon_col,width,height) {
if (client =="ns3") {
img_prefix = baseURL + img_name
this.icon_col = icon_col
this.toc_img_off = new Image (width,height)
this.toc_img_off.src = img_prefix + "_off.gif"
this.toc_img_on = new Image (width,height)
this.toc_img_on.src = img_prefix + "_on.gif"
}
}
function new_toc_item (img_name,icon_row,width,height) {
toc_item = new toc_item (img_name,icon_row,width,height)
}
function toc_mouseover (itemID) {
if (client =="ns3") {
current_overID = itemID
if (current_overID != last_overID) {
document .src = toc_item .toc_img_on.src
if (last_overID != "") {
document.images .src = toc_item.toc_img_off.src
}
last_overID = current_overID
}
}
}
function toc_mouseout () {
if (client =="ns3") {
if (current_overID != "") {
document.images .src = toc_item .toc_img_off.src
}
current_overID = ""
last_overID = ""
}
}
new_toc_item ("1",2,120,20)
!-- Begin
function bannerObject(p){
this.msg = MESSAGE
this.out = " "
this.pos = POSITION
this.delay = DELAY
this.i = 0
this.reset = clearMessage}
function clearMessage(){
this.pos = POSITION}
var POSITION = 50
var DELAY = 150
var MESSAGE = "这是一个动态JavaScript文字显示的例子"
var scroll = new bannerObject()
function scroller(){
scroll.out += " "
if(scroll.pos0)
for (scroll.i = 0 scroll.i scroll.pos scroll.i++) { scroll.out +=" " }
if (scroll.pos= 0)
scroll.out += scroll.msg
else
scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)
document.noticeForm.notice.value = scroll.out
scroll.out = " "
scroll.pos--
scroll.pos--
if (scroll.pos -(scroll.msg.length)) { scroll.reset() } setTimeout
(scroller(),scroll.delay)}
/script
/head
body onload="scroller()" bgcolor="#000000" link="#C0C0C0" vlink="#C0C0C0"
alink="#008080"
text="#C0C0C0"
table border="0" cellspacing="0" cellpadding="0"
tr
td width="100%"form NAME="noticeForm"
pinput TYPE="text" name="notice" size="40" style="background-color: rgb(192,192,192)"/p
/form
/td
/tr
/table
/center/div
/body
/html
范例2:颜色变化的例子。
test5_2.htm
html
head
script
!--
function makearray(n) {
this.length = n
for(var i = 1 i = n i++)
this = 0
return this}
hexa = new makearray(16)
for(var i = 0 i 10 i++)
hexa = i
hexa="a"
hexa="b"
hexa="c"
hexa="d"
hexa="e"
hexa="f"
function hex(i) {
if (i 0)
return "00"
else if (i 255)
return "ff"
else return "" + hexa + hexa}
function setbgColor(r, g, b) {
var hr = hex(r)
var hg = hex(g)
var hb = hex(b)
document.bgColor = "#"+hr+hg+hb}
function fade(sr, sg, sb, er, eg, eb, step) {
for(var i = 0 i = step i++) {
setbgColor( Math.floor(sr * ((step-i)/step) + er * (i/step)),
Math.floor(sg * ((step-i)/step) + eg * (i/step)), Math.floor(sb *
((step-i)/step) + eb * (i/step))) }}
function fadein() {
fade(255,0,0,0,0,255,100)
fade(0,0,255,0,255,0,100)
fade(0,255,0, 0,0,0, 100)}
fadein()
// --
/script
body
/body
/html
本讲介绍了用户自行创建对象的方法, 用户可根据需要创建自己的对象。并介绍了JavaScript中建数组的方法。
-- #EndEditable --