📄 javascript5.htm
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
a{ text-decoration: none }
p{ line-height:140% }
.text{ font-size: 9pt }
.text{ text-align:justify }
.text11{ font-size: 11pt }
.text11{ text-align:justify }
-->
</style>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<title>网页教程－JavaScript技术讲座:第五讲 创建新对象</title>
</head>
<body>
<p><span class="text">您现在的位置：<a href="javascript:if(confirm('http://www.4gee.com/Index.htm \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?'))window.location='http://www.4gee.com/Index.htm'" tppabs="http://www.4gee.com/Index.htm">主页</a>－<a
href="javascript:if(confirm('http://www.4gee.com/colleges/Index.htm \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?'))window.location='http://www.4gee.com/colleges/Index.htm'" tppabs="http://www.4gee.com/colleges/Index.htm">网络教室</a>－<a href="Index.htm" tppabs="http://www.4gee.com/colleges/homepages/Index.htm">主页工厂</a>－JavaScript技术讲座:第五讲
创建新对象</span></p>
<p align="center"><small><a href="JavaScript4.htm" tppabs="http://www.4gee.com/colleges/homepages/JavaScript4.htm">上一页</a>
<a href="JavaScript6.htm" tppabs="http://www.4gee.com/colleges/homepages/JavaScript6.htm">下一页</a></small></p>
<table border="0" width="100%">
<tr>
<td width="100%"><p align="center"><span style="color: rgb(252,177,3)" class="text11">JavaScript技术讲座<br>
第五讲 创建新对象</span></td>
</tr>
</table>
<table border="0" width="100%">
<tr>
<td width="100%"><span style="color: rgb(125,125,125)" class="text"><b> </b>使用JavaScript可以创建自己的对象。虽然JavaScript内部和浏览器本身的功能已十分强大，但JavaScript还是提供了创建一个新对象的方法。使其不必像超文本标识语言那样，求于或其它多媒体工具，就能完成许多复杂的工作。<br>
在JavaScript中创建一个新的对象是十分简单的。首先它必须定义一个对象，而后再为该对象创建一个实例。这个实例就是一个新对象，它具有对象定义中的基本特征。</span><p><span
style="color: rgb(125,125,125)" class="text"><b>一、对象的定义</b></span></p>
<p><span style="color: rgb(125,125,125)" class="text">JavaScript对象的定义，其基本格式如下：</span></p>
<p><span style="color: rgb(125,125,125)" class="text">Function Object（属性表）</span><dir>
<li><dir>
<li><span style="color: rgb(125,125,125)" class="text">This.prop1=prop1 </span><p><span
style="color: rgb(125,125,125)" class="text">This.prop2=prop2</span></p>
<p><span style="color: rgb(125,125,125)" class="text">...</span></p>
<p><span style="color: rgb(125,125,125)" class="text">This.meth=FunctionName1;</span></p>
<p><span style="color: rgb(125,125,125)" class="text">This.meth=FunctionName2;</span></p>
<p><span style="color: rgb(125,125,125)" class="text">...</span></p>
</li>
</dir>
</li>
</dir>
<p><span style="color: rgb(125,125,125)" class="text">在一个对象的定义中，可以为该对象指明其属性和方法。通过属性和方法构成了一个对象的实例。如以下是一个关于University对象的定义：</span></p>
<p><span style="color: rgb(125,125,125)" class="text">Function
university(name,city,creatDate URL)</span><dir>
<li><dir>
<li><span style="color: rgb(125,125,125)" class="text">This.name=name </span><p><span
style="color: rgb(125,125,125)" class="text">This.city=city</span></p>
<p><span style="color: rgb(125,125,125)" class="text">This.creatDate=New Date(creatDate)</span></p>
<p><span style="color: rgb(125,125,125)" class="text">This.URL=URL</span></p>
</li>
</dir>
</li>
</dir>
<p><span style="color: rgb(125,125,125)" class="text">其基本含义如下：</span><ul>
<li><ul>
<li><span style="color: rgb(125,125,125)" class="text"> </span></li>
<li><span style="color: rgb(125,125,125)" class="text">Name－指定一个“单位”名称。
</span></li>
<li><span style="color: rgb(125,125,125)" class="text"> </span></li>
<li><span style="color: rgb(125,125,125)" class="text">City－“单位”所在城市。 </span></li>
<li><span style="color: rgb(125,125,125)" class="text"> </span></li>
<li><span style="color: rgb(125,125,125)" class="text">CreatDate－记载university对象的更新日期。
</span></li>
<li><span style="color: rgb(125,125,125)" class="text"> </span></li>
<li><span style="color: rgb(125,125,125)" class="text">URL－该对象指向一个网址。 </span></li>
</ul>
</li>
</ul>
<p> </p>
<p> </p>
<p><span style="color: rgb(125,125,125)" class="text"><b>二、创建对象实例</b></span></p>
<p><span style="color: rgb(125,125,125)" class="text">一旦对象定义完成后，就可以为该对象创建一个实例了：</span><dir>
<li><dir>
<li><span style="color: rgb(125,125,125)" class="text">NewObject=New object(); </span></li>
</dir>
</li>
</dir>
<p><span style="color: rgb(125,125,125)" class="text">其中Newobjet是新的对象，Object已经定义好的对象。例：</span></p>
<p><span style="color: rgb(125,125,125)" class="text">U1=New university(“云南省”，“昆明市”，"January
05,199712:00:00","http://www.YN.KM")</span></p>
<p><span style="color: rgb(125,125,125)" class="text">U2=New university(“云南电子科技大学”，“昆明”,"January
07,1997 12:00:00","htlp://www.YNKJ.CN")</span></p>
<p> </p>
<p> </p>
<p><span style="color: rgb(125,125,125)" class="text"><b>三、对象方法的使用</b></span></p>
<p><span style="color: rgb(125,125,125)" class="text">在对象中除了使用属性外，有时还需要使用方法。在对象的定义中，我们看到This.meth=FunctionName语句，那就是为定义对象的方法。实质对象的方法就是一个函数FunctionName，通过它实现自己的意图。</span></p>
<p><span style="color: rgb(125,125,125)" class="text">例在university对象中增加一个方法，该方法是显示它自己本身，并返回相应的字串。</span></p>
<p><span style="color: rgb(125,125,125)" class="text">function
university(name,city,createDate,URL)</span><dir>
<li><dir>
<li><span style="color: rgb(125,125,125)" class="text">This.Name=Name; </span><p><span
style="color: rgb(125,125,125)" class="text">This.city=city;</span></p>
<p><span style="color: rgb(125,125,125)" class="text">This.createDate=New Date(creatDate)；</span></p>
<p><span style="color: rgb(125,125,125)" class="text">This.URL=URL；</span></p>
<p><span style="color: rgb(125,125,125)" class="text">This.showuniversity=showuniversity;</span></p>
</li>
</dir>
</li>
</dir>
<p><span style="color: rgb(125,125,125)" class="text">其中This.showuniversity就是定义了一个方法－－－showuniversity()。</span></p>
<p><span style="color: rgb(125,125,125)" class="text">而showuniversity()方法是实现university对象本身的显示。</span></p>
<p><span style="color: rgb(125,125,125)" class="text">function showuniversity()</span><dir>
<li><dir>
<li><span style="color: rgb(125,125,125)" class="text">For (var prop in this) </span><p><span
style="color: rgb(125,125,125)" class="text">alert(prop+="+this[prop]+"");</span></p>
</li>
</dir>
</li>
</dir>
<p><span style="color: rgb(125,125,125)" class="text">其中alert是JavaScript中的内部函数，显示其字符串。</span></p>
<p> </p>
<p> </p>
<p><span style="color: rgb(125,125,125)" class="text"><b>四、JavaScript中的数组</b></span><ol>
<li><span style="color: rgb(125,125,125)" class="text"> </span></li>
<li><span style="color: rgb(125,125,125)" class="text"><b>使用New创建数组</b> </span></li>
<li><span style="color: rgb(125,125,125)" class="text">JavaScript中没有提供像其它语言具有明显的数组类型，但可以通过function定义一个数组，并使用New对象操作符创建一个具有下标的数组。从而可以实现任何数据类型的存储。
</span><p><span style="color: rgb(125,125,125)" class="text">a、定义对象的数组</span></p>
<p><span style="color: rgb(125,125,125)" class="text">Function arrayName(size){</span></p>
<p><span style="color: rgb(125,125,125)" class="text">This.length=Size;</span></p>
<p><span style="color: rgb(125,125,125)" class="text">for(var X=; X<=size;X++)</span></p>
<p><span style="color: rgb(125,125,125)" class="text">this[X]=0;</span></p>
<p><span style="color: rgb(125,125,125)" class="text">Reture this;</span></p>
<p><span style="color: rgb(125,125,125)" class="text">}</span></p>
<p><span style="color: rgb(125,125,125)" class="text">其中arrayName是定义数组的一个名子，Size是有关数组大小的值（1-size），即数组元素的个数。通过for循环对一个当前对象的数组进行定义，最后返回这个数组。</span></p>
<p><span style="color: rgb(125,125,125)" class="text">从中可以看出，JavaScript中的数组是从1到size，这与其它０到size的数组表示方法有所不同，当然你可根据需要将数组的下标由１到size调整到０到size－１,可由下列实现:</span></p>
<p><span style="color: rgb(125,125,125)" class="text">Function arrayName (size)</span></p>
<p><span style="color: rgb(125,125,125)" class="text">For (var X=0; X<=size;X++)</span></p>
<p><span style="color: rgb(125,125,125)" class="text">this[X]=0;</span></p>
<p><span style="color: rgb(125,125,125)" class="text">this.lenght=size;</span></p>
<p><span style="color: rgb(125,125,125)" class="text">Return this;</span></p>
<p><span style="color: rgb(125,125,125)" class="text">从上面可以看出该方法是只是调整了this.lenght的位置，该位置是用于存储数组的大小的。从而调整后的数组的下标将与其它语言一致。但请读者注意正是由于数组下标顺序由１到size，使得JavaScript中的对象功能更加强大。</span></p>
<p><span style="color: rgb(125,125,125)" class="text">b、创建数组实例</span></p>
<p><span style="color: rgb(125,125,125)" class="text">一个数组定义完成以后，还不能马上使用，必须为该数组创建一个数组实例：</span></p>
<p><span style="color: rgb(125,125,125)" class="text">Myarray=New arrayName(n);</span></p>
<p><span style="color: rgb(125,125,125)" class="text">并赋于初值：</span></p>
<p><span style="color: rgb(125,125,125)" class="text">Myarray[1]=“字串１”；</span></p>
<p><span style="color: rgb(125,125,125)" class="text">Myarray[2]=“字串２”；</span></p>
<p><span style="color: rgb(125,125,125)" class="text">Myarray[3]=“字串３”；</span></p>
<p><span style="color: rgb(125,125,125)" class="text">...</span></p>
<p><span style="color: rgb(125,125,125)" class="text">Myarray[n]=“字串n”；</span></p>
<p><span style="color: rgb(125,125,125)" class="text">一旦给数组赋于了初值后，数组中就具有真正意义的数据了，以后就可以在程序设计过程中直接引用。</span></p>
</li>
<li><span style="color: rgb(125,125,125)" class="text"><b>创建多维数组</b> </span></li>
<li><span style="color: rgb(125,125,125)" class="text">Function creatMArray(row,col){ </span><p><span
style="color: rgb(125,125,125)" class="text">var indx=0;</span></p>
<p><span style="color: rgb(125,125,125)" class="text">this.length=(row*10)+col</span></p>
<p><span style="color: rgb(125,125,125)" class="text">for(var x=1;x<=row;x++)</span></p>
<p><span style="color: rgb(125,125,125)" class="text">for(var y=1;y<=col;y++)</span></p>
<p><span style="color: rgb(125,125,125)" class="text">indx=(x*10)+y;</span></p>
<p><span style="color: rgb(125,125,125)" class="text">this[indx]=””;</span></p>
<p><span style="color: rgb(125,125,125)" class="text">}</span></p>
<p><span style="color: rgb(125,125,125)" class="text">myMArray=new creatMArray();</span></p>
<p><span style="color: rgb(125,125,125)" class="text">之后可通过myMArray[11]、myMArray[12]、myMArray[13]、myMArray[21]、myMArray[22]、myMArray[23]、</span></p>
<p><span style="color: rgb(125,125,125)" class="text">…来引用。</span></p>
</li>
<li><span style="color: rgb(125,125,125)" class="text"><b>内部数组</b> </span></li>
</ol>
<dir>
<li><dir>
<li><span style="color: rgb(125,125,125)" class="text">在Java中为了方便内部对象的操作,可以使用窗体(Forms)、框架(Frames)、元素(element)、链接(links)和锚(Anchors)数组实现对象的访问。
</span></li>
</dir>
<p><img src="javascript/Bullet3.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet3.gif" width="12" height="12" alt="Bullet3.gif (148 字节)"><span
style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> anchors[]:使用《A
name=“anchorName“》标识来建立锚的链接。</font></span></p>
<p><img src="javascript/Bullet3.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet3.gif" width="12" height="12" alt="Bullet3.gif (148 字节)"><span
style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> links[]: 使用<A
href=”URL”>来定义一个越文本链接项。</font></span></p>
<p><img src="javascript/Bullet3.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet3.gif" width="12" height="12" alt="Bullet3.gif (148 字节)"><span
style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> Forms[]:
在程序中使用多窗体时,建立该数组。</font></span></p>
<p><img src="javascript/Bullet3.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet3.gif" width="12" height="12" alt="Bullet3.gif (148 字节)"><span
style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> Elements[]:在一个窗口中使用从个元素时,建立该数组。
</font></span></p>
<p><img src="javascript/Bullet3.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet3.gif" width="12" height="12" alt="Bullet3.gif (148 字节)"><span
style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> Frames[]:建立框架时,使用该数组</font></span></p>
<p><img src="javascript/Bullet3.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet3.gif" width="12" height="12" alt="Bullet3.gif (148 字节)"><span
style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> anchors[]用于窗体的访问(它是通过《form
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -