«
基于对象的JavaScript语言

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

   <p>　　JavaScript语言是基于对象的（Object-Based），而不是面向对象的（object-oriented）。之所以说它是一门基于对象的语言，主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。 </p><p>　　虽然JavaScript语言是一门基于对象的，但它还是具有一些面向对象的基本特征。它可以根据需要创建自己的对象，从而进一步扩大JavaScript的应用范围，增强编写功能强大的Web文档。</p><p>　　一、对象的基础知识</p><p>　　1、对象的基本结构</p><p>　　JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素的构成的。前者是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。</p><p>　　2、引用对象的途径</p><p>　　一个对象要真正地被使用，可采用以下几种方式获得：</p><p>　　o 引用JavaScript内部对象；</p><p>　　o 由浏览器环境中提供；</p><p>　　o 创建新对象。</p><p>　　这就是说一个对象在被引用之前，这个对象必须存在，否则引用将毫无意义，而出现错误信息。从上面中我们可以看出JavaScript引用对象可通过三种方式获取。要么创建新的对象，要么利用现存的对象。</p><p>　　３、有关对象操作语句</p><p>　　JavaScript不是一纯面向对象的语言，它设有提供面向对象语言的许多功能，因此JavaScript设计者之所以把它你“基于对象”而不是面向对象的语言，在JavaScript中提供了几个用于操作对象的语句和关键字及运算符。</p><p>　　（1） For...in语句</p><p>　　格式如下：</p><p>　　For（对象属性名 in 已知对象名）</p><p>　　说明：</p><p>　　o 该语句的功能是用于对已知对象的所有属性进行操作的控制循环。它是将一个已知对象的所有属性反复置给一个变量；而不是使用计数器来实现的。</p>
<p> </p>

   <p>　　o 该语句的优点就是无需知道对象中属性的个数即可进行操作。</p><p>　　例：下列函数是显示数组中的内容：</p><p>　　<code>Function showData(object)<br />for (var X=0; X<30;X++)<br />document.write(object[i])；</code></p><p>　　该函数是通过数组下标顺序值，来访问每个对象的属性，使用这种方式首先必须知道数组的下标值，否则若超出范围，则就会发生错误。而使For...in语句，则根本不需要知道对象属性的个数，见下：</p><p>　　<code>Function showData(object)<br />for(var prop in object)<br />document.write(object[prop])；</code></p><p>　　使用该函数时，在循环体中，For自动将的属性取出来，直到最后为此。</p><p>　　（2） with语句</p><p>　　使用该语句的意思是：在该语句体内，任何对变量的引用被认为是这个对象的属性，以节省一些代码。</p><p>　　<code>with object{<br />...}</code></p><p>　　所有在with语句后的花括号中的语句，都是在后面object对象的作用域的。</p><p>　　（3） this关键字</p><p>　　this是对当前的引用，在JavaScript由于对象的引用是多层次，多方位的，往往一个对象的引用又需要对另一个对象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，最后自己已不知道现在引用的那一个对象，为此JavaScript提供了一个用于将对象指定当前对象的语句this。</p><p>　　（4） New运算符</p><p>　　虽然在JavaScript中对象的功能已经是非常强大的了。但更强大的是设计人员可以按照需求来创建自己的对象，以满足某一特定的要求。使用New运算符可以创建一个新的对象。其创建对象使用如下格式：</p><p>　　Newobject=NEW Object(Parameters table);</p><p>　　其中Newobject创建的新对象：object是已经存在的对象； parameters table参数表；new是JavaScript中的命令语句。</p>
 <p> </p>

   <p>　　如创建一个日期新对象</p><p>　　newData=New Data()</p><p>　　birthday=New Data (December 12.1998)</p><p>　　之后就可使NewData、birthday作为一个新的日期对象了。</p><p>　　４、对象属性的引用</p><p>　　对象属性的引用可由下列三种方式之一实现：</p><p>　　（1）使用点（.）运算符</p><p>　　university.Name=“云南省”</p><p>　　university.city=“昆明市”</p><p>　　university.Date="1999"</p><p>　　其中university是一个已经存在的对象，Name、City、Date是它的三个属性，并通过操作对其赋值。</p><p>　　（2）通过对象的下标实现引用</p><p>　　university[0]=“云南”</p><p>　　university[1]=“昆明市”</p><p>　　university[2]="1999"</p><p>　　通过数组形式的访问属性，可以使用循环操作获取其值。</p><p>　　function showunievsity(object)</p><p>　　for (var j=0;j<2; j++)</p><p>　　document.write(object[j])</p><p>　　若采用For...in则可以不知其属性的个数后就可以实现：</p><p>　　Function showmy(object)</p><p>　　for (var prop in this)</p><p>　　docament.write(this[prop]);</p><p>　　（3）通过字符串的形式实现</p><p>　　university["Name"]=“云南”</p><p>　　university["City"]=“昆明市”</p><p>　　university["Date"]="1999"</p><p>　　５、对象的方法的引用</p><p>　　在JavaScript中对象方法的引用是非常简单的。</p><p>　　ObjectName.methods()</p><p>　　实际上methods()=FunctionName方法实质上是一个函数。 如引用university对象中的showmy（）方法，则可使用：</p><p>　　document.write (university.showmy())</p><p>　　或：document.write(university)</p>
 <p> </p>

   <p>　　如引用math内部对象中cos()的方法</p><p>　　则：</p><p>　　with(math)</p><p>　　document.write(cos(35));</p><p>　　document.write(cos(80));</p><p>　　若不使用with则引用时相对要复杂些：</p><p>　　document.write(Math.cos(35))</p><p>　　document.write(math.sin(80))</p><p>　　二、常用对象的属性和方法</p><p>　　JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。这正是基于对象编程的真正目的。</p><p>　　在JavaScript提供了string（字符串）、math（数值计算）和Date（日期）三种对象和其它一些相关的方法。从而为编程人员快速开发强大的脚本程序提供了非常有利的条件。</p><p>　　1、常用内部对象</p><p>　　在JavaScript中对于对象属性与方法的引用，有两种情况：其一是说该对象是静态对象，即在引用该对象的属性或方法时不需要为它创建实例；而另一种对象则在引用它的对象或方法是必须为它创建一个实例，即该对象是动态对象。</p><p>　　对JavaScript内部对象的引用，以是紧紧围绕着它的属性与方法进行的。因而明确对象的静动性对于掌握和理解JavaScript内部对象是具有非常重要的意义。</p><p>　　１)、串对象</p><p>　　o string对象：内部静态性。</p><p>　　o 访问properties和methods时，可使用（.）运算符实现。</p><p>　　o 基本使用格式：objectName.prop/methods</p><p>　　（１）串对象的属性</p><p>　　该对象只有一个属性，即length。它表明了字符串中的字符个数，包括所有符号。</p><p>　　例：</p><p>　　mytest="This is a JavaScript"</p><p>　　mystringlength=mytest.length</p><p>　　最后mystringlength返回mytest字串的长度为20。</p><p>　　（２）串对象的方法</p><p>　　string对象的方法共有１９个。主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。</p>
 <p> </p>

   <p>　　其主要方法如下：</p><p>　　o 锚点anchor()：该方法创建如用Html文档中一样的anchor标记。使用anchor如用Html中(A Name="")一样。通过下列格式访问:string.anchor(anchorName)。</p><p>　　o 有关字符显示的控制方法</p><p>　　big字体显示, Italics()斜体字显示，bold()粗体字显示，blink()字符闪烁显示，small（）字符用小体字显示，fixed()固定高亮字显示、fontsize(size)控制字体大小等。</p><p>　　o 字体颜色方法；fontcolor(color)</p><p>　　o 字符串大小写转换</p><p>　　toLowerCase()－小写转换，toUpperCase()大写转换。下列把一个给定的串分别转换成大写和小写格式:</p><p>　　string=stringValue.toUpperCase和string=stringValue.toLowerCase。</p><p>　　o 字符搜索：indexOf[charactor,fromIndex]</p><p>　　从指定formIndtx位置开始搜索charactor第一次出现的位置。</p><p>　　返回字串的一部分字串：substring(start,end)</p><p>　　从start开始到end的字符全部返回。</p><p>　　２)、算术函数的math对象</p><p>　　功能：提供除加、减、乘、除以外的一引些自述运算。如对数，平方根等 。</p><p>　　静动性：静态对象</p><p>　　（１）主要属性</p><p>　　math中提供了６个属性，它们是数学中经常用到的常数Ｅ、以１０为底的自然对数ＬＮ１０、以２为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根为SQRT2。</p><p>　　（２）主要方法</p><p>　　绝对值：abs()</p><p>　　正弦余弦值：sin(),cos()</p><p>　　反正弦反余弦 :asin(), acos()</p><p>　　正切反正切：tan(),atan()</p><p>　　四舍五入：round()</p><p>　　平方根：sqrt()</p><p>　　基于几方次的值：Pow(base,exponent)</p><p>　　...</p><p>　　３)、日期及时间对象</p><p>　　功能：提供一个有关日期和时间的对象。</p>
 <p> </p>

   <p>　　静动性：动态性，即必须使用New运算符创建一个实例。例:</p><p>　　MyDate=New Date()</p><p>　　Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。</p><p>　　日期起始值:１７７０年１月１日００:００:００。</p><p>　　1. 获取日期的时间方法</p><p>　　getYear(): 返回年数</p><p>　　getMonth():返回当月号数</p><p>　　getDate(): 返回当日号数</p><p>　　getDay():返回星期几</p><p>　　getHours():返回小时数</p><p>　　getMintes(:返回分钟数</p><p>　　getSeconds():返回秒数</p><p>　　getTime() : 返回毫秒数</p><p>　　（２）设置日期和时间：</p><p>　　setYear();设置年</p><p>　　setDate():设置当月号数</p><p>　　setMonth():设置当月份数</p><p>　　setHours():设置小时数</p><p>　　setMintes():设置分钟数</p><p>　　setSeconds():设置秒数</p><p>　　setTime ():设置毫秒数</p><p>　　...</p><p>　　2、JavaScript中的系统函数</p><p>　　JavaScript中的系统函数又称内部方法。它提供了与任何对象无关的系统函数，使用这些函数不需创建任何实例,可直接用。</p><p>　　1．返回字符串表达式中的值：</p><p>　　方法名：eval（字串表达式），例：</p><p>　　test=eval("8+9+5/2");</p><p>　　2. 返回字符串ASCI码：</p><p>　　方法名：unEscape (string)</p><p>　　3．返回字符的编码：</p><p>　　方法名：escape(character)</p><p>　　4．返回实数：</p><p>　　parseFloat(floustring);</p><p>　　5．返回不同进制的数：</p><p>　　parseInt(numbestring ,rad.X)</p><p>　　其中radix是数的进制，numbs字符串数</p><p>　　三、范例</p><p>　　下面是一个时钟显示的JavaScript文档。在文档中用了非常多的函数。</p><p>　　Test4_1.htm</p><p>　　<code><html><br /><head><br /><style TYPE="text/css"><br /><style><br /></style><br /><title>时钟</title><br /><script LANGUAGE="JavaScript"><br />function showClock() {<br />}<br />function hideClock() {<br />}<br />var timerID = null<br />var timerRunning = false<br />function stopClock() {<br />if(timerRunning)<br />clearTimeout(timerID);<br />timerRunning = false<br />document.clock.face.value = "";<br />}<br />function showTime() {<br />var now = new Date();<br />var year = now.getYear();<br />var month = now.getMonth() + 1;<br />var date = now.getDate();<br />var hours = now.getHours();<br />var mins = now.getMinutes();<br />var secs = now.getSeconds();<br />var timeVal = "";<br />timeVal += ((hours <= 12) ? hours : hours - 12);<br />timeVal += ((mins < 10) ? ":0" : ":") + mins;<br />timeVal += ((secs <= 10) ? ":0" : ":") + secs;<br />timeVal += ((hours < 12) ? "AM" : "PM");<br />timeVal += ((month < 10) ? " on 0" : " on ") + month + "-";<br />timeVal += date + "-" + year;<br />document.clock.face.value = timeVal;<br />timerID = setTimeout("showTime()", 1000);<br />timerRunning = true<br />}<br />function startClock() {<br />stopClock();<br />showTime();<br />}<br />function windowOpener( indexnum ){<br />var loadpos="date.html"+"#"+indexnum;<br />controlWindow=window.open(loadpos,"date","toolbar=no,location=no,<br />directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,<br />width=620,height=400");<br />}<br /></script><br /></head><br /><body onLoad="startClock()" ><br /><p align="center"><big><span style="background-color: rgb(45,45,45)"><br /><font face="Arial">form</font> &nbsp; <font face="宋体">时钟</font><br /></span></big></p><br /><p align="center">　</p><br /><div align="center"><center><br /><table border="0" cellspacing="0" cellpadding="0"><br /><tr><br /><td width="100%"><form NAME="clock" onSubmit="0"><br /><div align="center"><center><p><input TYPE="text" NAME="face" size="20"<br />VALUE style="background-color: rgb(192,192,192)"> </p><br /></center></div><br /></form><br /></td><br /></tr><br /></table><br /></center></div><br /></body><br /></html></code></p></p><p>　　本讲介绍了基于对象的JavaScript中常用内部对象属性、方法的使用。</p></p>