«
在JavaScript中创建新对象

时间：2008-5-31    作者：Deri    分类： 分享 

   <p>　　使用JavaScript可以创建自己的对象。虽然JavaScript内部和浏览器本身的功能已十分强大，但JavaScript还是提供了创建一个新对象的方法。使其不必像超文本标识语言那样，求于或其它多媒体工具，就能完成许多复杂的工作。</p><p>　　在JavaScript中创建一个新的对象是十分简单的。首先它必须定义一个对象，而后再为该对象创建一个实例。这个实例就是一个新对象，它具有对象定义中的基本特征。</p><p>　　一、对象的定义</p><p>　　JavaScript对象的定义，其基本格式如下：</p><p>　　Function Object（属性表）</p><p>　　This.prop1=prop1</p><p>　　This.prop2=prop2</p><p>　　...</p><p>　　This.meth=FunctionName1;</p><p>　　This.meth=FunctionName2;</p><p>　　...</p><p>　　在一个对象的定义中，可以为该对象指明其属性和方法。通过属性和方法构成了一个对象的实例。如以下是一个关于University对象的定义：</p><p>　　Function university(name,city,creatDate URL)</p><p>　　This.name=name</p><p>　　This.city=city</p><p>　　This.creatDate=New Date(creatDate)</p><p>　　This.URL=URL</p><p>　　其基本含义如下：</p><p>　　Name－指定一个“单位”名称。 　</p><p>　　City－“单位”所在城市。 　</p><p>　　CreatDate－记载university对象的更新日期。 　</p><p>　　URL－该对象指向一个网址。</p><p>　　二、创建对象实例</p><p>　　一旦对象定义完成后，就可以为该对象创建一个实例了：</p><p>　　NewObject=New object();</p><p>　　其中Newobjet是新的对象，Object已经定义好的对象。例：</p><p>　　U1=New university(“云南省”，“昆明市”，"January 05,199712:00:00","http://www.YN.KM")</p><p>　　U2=New university(“云南电子科技大学”，“昆明”,"January 07,1997 12:00:00","htlp://www.YNKJ.CN")</p>
<p> </p>

   <p>　　三、对象方法的使用</p><p>　　在对象中除了使用属性外，有时还需要使用方法。在对象的定义中，我们看到This.meth=FunctionName语句，那就是为定义对象的方法。实质对象的方法就是一个函数FunctionName，通过它实现自己的意图。</p><p>　　例在university对象中增加一个方法，该方法是显示它自己本身，并返回相应的字串。</p><p>　　function university(name,city,createDate,URL)</p><p>　　This.Name=Name;</p><p>　　This.city=city;</p><p>　　This.createDate=New Date(creatDate)；</p><p>　　This.URL=URL；</p><p>　　This.showuniversity=showuniversity;</p><p>　　其中This.showuniversity就是定义了一个方法－－－showuniversity()。</p><p>　　而showuniversity()方法是实现university对象本身的显示。</p><p>　　function showuniversity()</p><p>　　For (var prop in this)</p><p>　　alert(prop+="+this[prop]+"");</p><p>　　其中alert是JavaScript中的内部函数，显示其字符串。</p><p>　　四、JavaScript中的数组　</p><p>　　使用New创建数组</p><p>　　JavaScript中没有提供像其它语言具有明显的数组类型，但可以通过function定义一个数组，并使用New对象操作符创建一个具有下标的数组。从而可以实现任何数据类型的存储。</p><p>　　a、定义对象的数组</p><p>　　Function arrayName(size){</p><p>　　This.length=Size;</p><p>　　for(var X=; X<=size;X++)</p><p>　　this[X]=0;</p><p>　　Reture this;</p><p>　　}</p><p>　　其中arrayName是定义数组的一个名子，Size是有关数组大小的值（1-size），即数组元素的个数。通过for循环对一个当前对象的数组进行定义，最后返回这个数组。</p><p>　　从中可以看出，JavaScript中的数组是从1到size，这与其它０到size的数组表示方法有所不同，当然你可根据需要将数组的下标由１到size调整到０到size－１,可由下列实现:</p>
 <p> </p>

   <p>　　Function arrayName (size)</p><p>　　For (var X=0; X<=size;X++)</p><p>　　this[X]=0;</p><p>　　this.lenght=size;</p><p>　　Return this;</p><p>　　从上面可以看出该方法是只是调整了this.lenght的位置，该位置是用于存储数组的大小的。从而调整后的数组的下标将与其它语言一致。但请读者注意正是由于数组下标顺序由１到size，使得JavaScript中的对象功能更加强大。</p><p>　　b、创建数组实例</p><p>　　一个数组定义完成以后，还不能马上使用，必须为该数组创建一个数组实例：</p><p>　　Myarray=New arrayName(n);</p><p>　　并赋于初值：</p><p>　　Myarray[1]=“字串１”；</p><p>　　Myarray[2]=“字串２”；</p><p>　　Myarray[3]=“字串３”；</p><p>　　...</p><p>　　Myarray[n]=“字串n”；</p><p>　　一旦给数组赋于了初值后，数组中就具有真正意义的数据了，以后就可以在程序设计过程中直接引用。</p><p>　　创建多维数组</p><p>　　Function creatMArray(row,col){</p><p>　　var indx=0;</p><p>　　this.length=(row*10)+col</p><p>　　for(var x=1;x<=row;x++)</p><p>　　for(var y=1;y<=col;y++)</p><p>　　indx=(x*10)+y;</p><p>　　this[indx]=””;</p><p>　　}</p><p>　　myMArray=new creatMArray();</p><p>　　之后可通过myMArray[11]、myMArray[12]、myMArray[13]、myMArray[21]、myMArray[22]、myMArray[23]、</p><p>　　…来引用。</p><p>　　内部数组</p><p>　　在Java中为了方便内部对象的操作,可以使用窗体(Forms)、框架(Frames)、元素(element)、链接(links)和锚(Anchors)数组实现对象的访问。</p><p>　　anchors[]:使用《A name=“anchorName“》标识来建立锚的链接。</p><p>　　links[]: 使用<A href=”URL”>来定义一个越文本链接项。</p>
 <p> </p>

   <p>　　Forms[]: 在程序中使用多窗体时,建立该数组。</p><p>　　Elements[]:在一个窗口中使用从个元素时,建立该数组。</p><p>　　Frames[]:建立框架时,使用该数组</p><p>　　anchors[]用于窗体的访问(它是通过《form name=“form1”》所指定的),link[]用于被链接到的锚点的访问(它是通过《a href=URL》所指定的)。Forms[]反映窗体的属性,而anchors[]反映Web页面中的链接属性。</p><p>　　有关锚数组的文档：</p><p>　　<HTML></p><p>　　<HEAD></p><p>　　<BODY></p><p>　　<A NAME=”MyAnchorsName1”> 定义第一个锚名</p><p>　　HTML Code</p><p>　　<A NAME=”MyAnchorsName2”> 定义第二个锚名</p><p>　　HTML Code</p><p>　　<A HREF=”#MyAnchorsName1”>建立锚的链接</p><p>　　<A HREF=”#MyAnchorsName2?gt; 建立锚的链接</p><p>　　….</p><p>　　该文档段建立了两面全锚的链接,可通过Anchors[]访问这些锚。document.Anchors[0]反映第一个锚,而document.Anchors[1]反映第二个锚的有关信息。</p><p>　　五、范例</p><p>　　范例1：一个动态文字滚动的例子。</p><p>　　test5_1.htm</p><p>　　<code><html><br /><head><br /><title></title><br /><script LANGUAGE="JavaScript"><br />with (top.window.location)<br />{baseURL = href.substring (0,href.lastIndexOf ("/") + 1)}<br />total_toc_items = 0;<br />current_overID = "";<br />last_overID = "";<br />browser = navigator.appName;<br />version = parseInt(navigator.appVersion);<br />client=null;<br />loaded = 0;<br />if (browser == "Netscape" && version >= 3) client = "ns3";<br />function toc_item (img_name,icon_col,width,height) {<br />if (client =="ns3") {<br />img_prefix = baseURL + img_name;<br />this.icon_col = icon_col;<br />this.toc_img_off = new Image (width,height);<br />this.toc_img_off.src = img_prefix + "_off.gif";<br />this.toc_img_on = new Image (width,height);<br />this.toc_img_on.src = img_prefix + "_on.gif";<br />}<br />}<br />function new_toc_item (img_name,icon_row,width,height) {<br />toc_item [img_name] = new toc_item (img_name,icon_row,width,height);<br />}<br />function toc_mouseover (itemID) {<br />if (client =="ns3") {<br />current_overID = itemID;<br />if (current_overID != last_overID) {<br />document [current_overID].src = toc_item [current_overID].toc_img_on.src;<br />if (last_overID != "") {<br />document.images [last_overID].src = toc_item[last_overID].toc_img_off.src;<br />}<br />last_overID = current_overID;<br />}<br />}<br />}<br />function toc_mouseout () {<br />if (client =="ns3") {<br />if (current_overID != "") {<br />document.images [current_overID].src = toc_item [current_overID].toc_img_off.src;<br />}<br />current_overID = "";<br />last_overID = "";<br />}<br />}<br />new_toc_item ("1",2,120,20);<br /><!-- Begin<br />function bannerObject(p){<br />this.msg = MESSAGE<br />this.out = " "<br />this.pos = POSITION<br />this.delay = DELAY<br />this.i = 0<br />this.reset = clearMessage}<br />function clearMessage(){<br />this.pos = POSITION}<br />var POSITION = 50;<br />var DELAY = 150;<br />var MESSAGE = "这是一个动态JavaScript文字显示的例子";<br />var scroll = new bannerObject();<br />function scroller(){<br />scroll.out += " ";<br />if(scroll.pos>0)<br />for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) { scroll.out +=" " ; }<br />if (scroll.pos>= 0)<br />scroll.out += scroll.msg<br />else<br />scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)<br />document.noticeForm.notice.value = scroll.out<br />scroll.out = " ";<br />scroll.pos--;<br />scroll.pos--;<br />if (scroll.pos < -(scroll.msg.length)) { scroll.reset(); } setTimeout<br />('scroller()',scroll.delay);}<br /></script><br /></head><br /><body onload="scroller()" bgcolor="#000000" link="#C0C0C0" vlink="#C0C0C0"<br />alink="#008080"<br />text="#C0C0C0"><br /><table border="0" cellspacing="0" cellpadding="0"><br /><tr><br /><td width="100%"><form NAME="noticeForm"><br /><p><input TYPE="text" name="notice" size="40" style="background-color: rgb(192,192,192)"></p><br /></form><br /></td><br /></tr><br /></table><br /></center></div><br /></body><br /></html></code></p>
 <p> </p>

   <p>　　范例2:颜色变化的例子。</p><p>　　test5_2.htm</p><p>　　<code><html><br /><head><br /><script><br /><!--<br />function makearray(n) {<br />this.length = n;<br />for(var i = 1; i <= n; i++)<br />this[i] = 0;<br />return this;}<br />hexa = new makearray(16);<br />for(var i = 0; i < 10; i++)<br />hexa[i] = i;<br />hexa[10]="a";<br />hexa[11]="b";<br />hexa[12]="c";<br />hexa[13]="d";<br />hexa[14]="e";<br />hexa[15]="f";<br />function hex(i) {<br />if (i < 0)<br />return "00";<br />else if (i > 255)<br />return "ff";<br />else return "" + hexa[Math.floor(i/16)] + hexa[i%16];}<br />function setbgColor(r, g, b) {<br />var hr = hex(r);<br />var hg = hex(g);<br />var hb = hex(b);<br />document.bgColor = "#"+hr+hg+hb;}<br />function fade(sr, sg, sb, er, eg, eb, step) {<br />for(var i = 0; i <= step; i++) {<br />setbgColor( Math.floor(sr * ((step-i)/step) + er * (i/step)),<br />Math.floor(sg * ((step-i)/step) + eg * (i/step)), Math.floor(sb *<br />((step-i)/step) + eb * (i/step))); }}<br />function fadein() {<br />fade(255,0,0,0,0,255,100);<br />fade(0,0,255,0,255,0,100);<br />fade(0,255,0, 0,0,0, 100);}<br />fadein();<br />// --><br /></script><br /><body><br /></body><br /></html></code></p><p>　　本讲介绍了用户自行创建对象的方法, 用户可根据需要创建自己的对象。并介绍了JavaScript中建数组的方法。</p>