什么是對象,？

顧名思義，JavaScript 是居于 Java 程序設(shè)計(jì)語言而建立起來的腳本語言,，兩者都是面向?qū)ο蟮?(object-oriented),，我們并不想深入探討面向?qū)ο蟪绦蛟O(shè)計(jì) (OOP)，但是為了你能夠更好地了解 JavaScript 語言,，我們希望你能夠知道一些與對象有關(guān)的術(shù)語和基本概念,。

JavaScript 所處理的每一個(gè)對象都是屬于一個(gè)類 (class) ，類里邊定義了組成對象的數(shù)據(jù),、屬性,、方法（即是類里邊的一些函數(shù)）等，使用類可以增加程序代碼的復(fù)用性,，這在一種程序語言中是很重要的,，因?yàn)檫@樣可以避免重復(fù)開發(fā)！

你可以將字符串,、整數(shù)等數(shù)據(jù)類型看作是一個(gè)對象,，當(dāng)你定義一個(gè)變量的時(shí)候，你就創(chuàng)建了一個(gè)對象實(shí)例 (通常簡稱 “對象”),，你可以創(chuàng)建很多對象實(shí)例,，使它們都屬于同一個(gè)類，也即是相同的對象,，比如說,，“人”是一個(gè)對象（類），而每一個(gè)人都是“人”這個(gè)對象（類）中的一個(gè)對象實(shí)例,。創(chuàng)建一個(gè)對象實(shí)例時(shí)使用 new 運(yùn)算符：

var text = new String("This is my text.");
var max = new Number(4.02);
var today = new Date(); // Date() 是 JavaScript 的內(nèi)建對象類

new 運(yùn)算符用來調(diào)出對象的數(shù)據(jù)結(jié)構(gòu)（包括對象的屬性,、方法）,，這是用來創(chuàng)建一個(gè)對象實(shí)例的方法，同時(shí)還對對象實(shí)例的屬性進(jìn)行初始化,。有一些對象 (例如 Date 對象) 擁有多種數(shù)據(jù)結(jié)構(gòu),，那到底 JavaScript 會為你創(chuàng)建哪一種數(shù)據(jù)結(jié)構(gòu)呢？這就要看你在使用 new 創(chuàng)建對象實(shí)例的時(shí)候傳的是什么參數(shù)了,。就以 Date 對象為例吧,，如果在創(chuàng)建時(shí)不傳遞任何參數(shù),，則會創(chuàng)建一個(gè)當(dāng)前系統(tǒng)日期時(shí)間的對象實(shí)例,，就像上邊的例子中的一樣；但是如果你在創(chuàng)建對象實(shí)例時(shí)向 Date 類傳遞了 year(年),、month(月),、date(日) 和 time (時(shí)間) 的值的話，JavaScript 將會根據(jù)這些值為你創(chuàng)建一個(gè)對象實(shí)例,，而不再是當(dāng)前系統(tǒng)時(shí)間的對象實(shí)例,。

一個(gè)對象既可以是 core 核心對象 (下邊將會提到)，又可以是另外一些 JavaScript 的預(yù)定義對象 (例如一個(gè)圖片 Image 對象),，甚至可以是你創(chuàng)建的一個(gè)全新的對象,。

【對象的屬性 (Propertie)】

在 JavaScript 中使用英文句號 (.) 來訪問對象的屬性值：

var text = new String("A long time ago...");
var len = text.length; // len 為字符串對象 text 的字符串長度，length 為字符串對象的字串長度屬性,。

通常情況下,，你可以直接改變某個(gè)對象的屬性，例如,，為了動(dòng)態(tài)的改變頁面的背景顏色,，你可以直接通過動(dòng)態(tài)地改變 document 對象的 bgColor 屬性來實(shí)現(xiàn)，請看 在線示例 ,。

然而,，有一些屬性你是不能直接修改的，例如字符串對象 String 的 length 屬性,，但是如果你使用 String 對象的 concat() 方法合并兩個(gè)字符串的話,，length 屬性也就會自動(dòng)的改變了，但這種改變是系統(tǒng)自動(dòng)實(shí)現(xiàn)的,，而不是你直接通過賦值改變的,。

【對象的方法 (Method)】

同樣的，對象的方法也是通過英文句號 (.) 來執(zhí)行的,，在方法后邊緊跟一對圓括號(),，而在圓括號里邊包含了使用該方法所需要的參數(shù)：

var errorMsg = new String("");
var msgHeader = new String("Error: ");
var errorCode = new String("X001");
errorMsg = msgHeader.concat(errorCode);

此例執(zhí)行的結(jié)果：變量 errorMsg 的值為 "Error: X001"。

JavaScript 中的對象

JavaScript 包含很多預(yù)定義對象,，一些是可以用來表示不同的數(shù)據(jù)類型 (如數(shù)字和字符串對象),，而另一些是在網(wǎng)頁中定義的與 HTML 標(biāo)記密切相關(guān)的對象 (如超鏈接和圖片對象),。

【核心 (Core) 對象】

在 JavaScript 中可供使用的最基本的數(shù)據(jù)類型被稱為核心 (core) 對象，這些對象是：

• Array - 數(shù)組對象,；
• Boolean - 布爾對象,；
• Date - 時(shí)間對象；
• Number - 數(shù)值對象,，可以是整數(shù)和浮點(diǎn)數(shù),；
• String - 字符串對象，可以是單引號 (‘) 或雙引號 (") 括起來的任何字符串,。

對于上邊給出的對象,，你都可以使用 new 操作符創(chuàng)建相應(yīng)的對象實(shí)例，其實(shí)你也可以隱含地聲明/創(chuàng)建 Boolean,、Number 和 String 這幾個(gè)對象,，就像下邊那樣：

var found = false;
var max = 47.9;
var name = "Fred"; // 等價(jià)于：var name = new String("Fred");

【文檔中的對象模塊】

當(dāng)頁面已經(jīng)被下載到客戶端時(shí)，瀏覽器就會創(chuàng)建幾個(gè)用來存儲頁面信息和頁面內(nèi)容的對象,。這些對象構(gòu)成了一個(gè)樹狀結(jié)構(gòu) (對象的引用也是根據(jù)這種樹一層一層引用的,，引用時(shí)使用 “.” 號)，在這棵“樹”中,，最高層的對象是 window 對象,，window 對象具有以下的屬性：

• location - 頁面的地址 (URL) 信息；
• history - 包括了當(dāng)前打開的這個(gè)瀏覽器訪問過的地址 (URL) 列表,；
• frames - 如果頁面使用了幀 (frame) 的話,，這個(gè)對象包含了幀的版面布局的信息以及每一個(gè)幀所對應(yīng)的窗口 (window) 對象；
• document - 包含了頁面的內(nèi)容信息,；
• screen - 描述屏幕的尺寸和顏色 (僅限于 Netscape 4.0),。

在這同時(shí)，瀏覽器還會創(chuàng)建另一個(gè)高層的對象叫 navigator,，這個(gè)對象包含了瀏覽器的類型,、版本、安裝的插件等等信息,。

就像前邊說的一樣,，使用英文的句號 (.) 來引用上邊的對象以及對象的屬性，例如,，要獲得當(dāng)前頁面的地址 (URL) 信息,，我們可以這樣用：

var url = window.location.href;

此外，還有一個(gè)很方便的東東產(chǎn)生了,，那就是瀏覽器在創(chuàng)建 window 和 navigator 對象的同時(shí),，也會將 window 的屬性 location、history 和 document 創(chuàng)建為高層對象,，所以對于上邊的語句,，我們還可以簡便的寫成：

var url = location.href;

下邊就簡單的介紹一下 JavaScript 中為瀏覽器提供的對象,。

【window 對象】

window 對象提供了一些很有用的方法，使用這些方法你可以在瀏覽器中彈處對話框 (pop-up)：

• alert() 顯示一個(gè)消息框,，只有一個(gè) ‘OK‘ (‘確定‘) 按鈕,；
• confirm() 顯示一個(gè)對話框，帶有 ‘OK‘ (‘確定‘) 和 ‘Cancel‘ (‘取消‘) 按鈕,；
• prompt() 顯示一個(gè)可以讓用戶輸入信息的對話框,。

看一下這個(gè) 在線示例 就一切都明白了。

我們在調(diào)試 JavaScript 腳本代碼的時(shí)候經(jīng)常會使用 alert() 方法,，你可以將這個(gè)函數(shù)放在你的代碼中,，讓它顯示出所要調(diào)試的變量或?qū)ο蟮闹担@對于在調(diào)試代碼時(shí)跟蹤錯(cuò)誤是很重要的,。

window 提供的另一些方法是打開,、關(guān)閉窗口或者改變窗口的顯示方式,，我們將在第三部分講到這幾個(gè)方法的使用,。

另外，window 對象中還有一個(gè)經(jīng)常被用到的方法：setTimeout() 方法,。此方法可以讓 JavaScript 每隔一段間隔時(shí)間執(zhí)行一段代碼,，代碼的執(zhí)行遵循事件句柄中的規(guī)則，也就是說,，在這個(gè)函數(shù)中,，每隔一段時(shí)間就會執(zhí)行幾條 JavaScript 代碼 (每條代碼使用“;”隔開) 或者執(zhí)行調(diào)用的函數(shù)：

setTimeout("count++; alert(‘Hello world!‘);", 500);

上邊的代碼將會每隔半秒鐘 (500毫秒) 執(zhí)行一次 “count++; alert(‘Hello world‘)” 代碼，此代碼包含了兩條 JavaScript 語句,。也即是說,，setTimeout() 方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)是想要執(zhí)行的代碼或函數(shù) (在此例中是代碼：count++; alert(‘Hello world‘)),，第二個(gè)函數(shù)是間隔時(shí)間,，單位是毫秒 (在此例中是500毫秒)。

setTimeout() 方法的返回值是一個(gè)唯一的數(shù)值,，這個(gè)數(shù)值有什么用呢,？如果你想要終止 setTimeout() 方法的執(zhí)行，那就必須使用 clearTimeout() 方法來終止,，而使用這個(gè)方法的時(shí)候,，系統(tǒng)必須知道你到底要終止的是哪一個(gè) setTimeout() 方法 (因?yàn)槟憧赡芡瑫r(shí)調(diào)用了好幾個(gè) setTimeout() 方法)，這樣 clearTimeout() 方法就需要一個(gè)參數(shù),，這個(gè)參數(shù)就是 setTimeout() 方法的返回值 (數(shù)值),，用這個(gè)數(shù)值來唯一確定結(jié)束哪一個(gè) setTimeout() 方法：

var id = setTimeout("myFunction(arg1, arg2);", 3000);

...其它的 JavaScript 語句...

if (error)
clearTimeout(id); // 出現(xiàn)錯(cuò)誤時(shí)終止 setTimeout() 方法的執(zhí)行

需要注意的是，setTimeout() 方法并不會讓瀏覽器暫停執(zhí)行跟在此方法后的程序代碼,，瀏覽器會一直順著每行代碼往下執(zhí)行,，只不過是其它代碼只執(zhí)行一次,，而 setTimeout() 方法則是隔一段時(shí)間執(zhí)行一次。在 Netscape 4.0 中,，你還可以通過使用 setInterval() 方法重復(fù)執(zhí)行一段代碼或函數(shù),，相對應(yīng)的使用 clearInterval() 方法終止前一個(gè)方法的執(zhí)行，這兩個(gè)方法與 setTimeout() 和 clearTimeout() 方法是一樣的,，這里就不再多說了,。

看一下這個(gè) 在線示例 吧，這個(gè)例子通過使用 setTimeout() 方法重復(fù)的調(diào)用一個(gè)函數(shù),，通過這個(gè)函數(shù)來獲得當(dāng)前的時(shí)間,，并將時(shí)間顯示在頁面上，看起來就像是一個(gè)正在走的時(shí)鐘,。

【frame 對象】

frame 即是幀,，每一個(gè)幀對應(yīng)一個(gè)窗口，每一個(gè)幀都是由一個(gè) window 對象來指定的,，當(dāng)有一個(gè)頁面使用了幀設(shè)置 (frameset) 的時(shí)候,，主窗口 (又稱為母窗口或母幀) 的 window 對象就包含了一個(gè)名為 frames 的數(shù)組，這個(gè)數(shù)組的每一個(gè)元素對應(yīng)一個(gè)子幀 (或叫子窗口) ,，而每一個(gè)子幀都對應(yīng)一個(gè) window 對象,。

那些子窗口/子幀也可以通過使用幀設(shè)置 (frameset) 擁有子窗口 (對于最頂層的窗口來說就是孫子窗口了)，這樣的話它們也就同時(shí)擁有了對應(yīng)于它們的子窗口的數(shù)組 frames ,。 在某一窗口/幀的頁面上使用 window.parent 或者只是 parent 即可指向此窗口的父窗口對象,。同理，可以使用 window.parent.parent 指向此窗口的父窗口的父窗口,，而使用 window.top 則可以直接指向所有幀中最高層的父窗口,。

這樣你就可以在這個(gè)幀里使用另一個(gè)幀里的數(shù)據(jù)或調(diào)用另一個(gè)幀里的函數(shù)了，詳細(xì)講述請參考第三部分,。

【document 對象】

document 對象可能將會是你使用的最多的對象之一,。此對象包含了與頁面內(nèi)容相關(guān)的幾個(gè)屬性，請看：

• bgColor - 頁面的背景色,；
• fgColor - 頁面的前景色,，即文本的顏色；
• linkColor - 超文本鏈接的顏色,；
• lastModified - 此頁面 (HTML 文件) 最后被修改的時(shí)間,；
• images - 圖片對象組成的數(shù)組，數(shù)組中的每一個(gè)元素對應(yīng)于網(wǎng)頁中的每一個(gè) <IMG> 標(biāo)記,，數(shù)組元素對應(yīng)的順序是在 HTML 文件代碼中標(biāo)記出現(xiàn)的先后順序,；
• forms - 表單 (form) 對象組成的數(shù)組，數(shù)組中的每一個(gè)元素對應(yīng)于網(wǎng)頁中的每一個(gè) <FORM> 標(biāo)記，數(shù)組元素對應(yīng)的順序是在 HTML 文件代碼中標(biāo)記出現(xiàn)的先后順序,；
• links - 超文本鏈接對象組成的數(shù)組,，數(shù)組中的每一個(gè)元素對應(yīng)于網(wǎng)頁中的每一個(gè) <A> 標(biāo)記，數(shù)組元素對應(yīng)的順序是在 HTML 文件代碼中標(biāo)記出現(xiàn)的先后順序,；

通常情況下,，這些屬性對應(yīng)的是 HTML 標(biāo)記的屬性值，例如 bgColor 屬性對應(yīng)的是 <BODY> 標(biāo)記中 BGCOLOR="..." 代碼中的屬性值,，你會發(fā)現(xiàn),，在其它標(biāo)記 (像圖片和超文本鏈接) 中也是這樣對應(yīng)的。

images,、forms 和 links 屬性實(shí)際上都是數(shù)組,，對于數(shù)組中的元素，通常會使用像下邊的語句那樣訪問之：

var abc = document.images[3];

這樣變量 abc 指向的是網(wǎng)頁中的第四個(gè) (因?yàn)樵?JavaScript 中數(shù)租下標(biāo)是從 0 開始的) <IMG> 標(biāo)記對應(yīng)的圖片對象,，這樣用起來其實(shí)并不方便,，因?yàn)槿绻麍D片太多，你就必須知道每一個(gè)圖片在網(wǎng)頁中排在第幾,，要不然就無法知道數(shù)組的下標(biāo)應(yīng)該是幾,。不過不用擔(dān)心， JavaScript 提供了一個(gè)方便的方法讓你指向圖片對象,，那就是通過各個(gè)圖片元素的名字：

var abc = document.images["menu"];

要使用這種方法,，你就必須在 <IMG> 標(biāo)記中加入 NAME= "圖片的英文名" 的代碼,，此例中,，<IMG> 標(biāo)記的代碼為：<IMG NAME="menu" SRC="test.gif">，這樣你就再也不用擔(dān)心你要引用的圖片對象在網(wǎng)頁中的排位順序了,，只要給它取個(gè)名字就可以了,。 (在 Netscape 3.0 中，這種給圖片命名的方法并不好用,，可能會的不到正確的結(jié)果,，這也是 Netscape 3.0 的一個(gè) bug。)

在使用這種方法給網(wǎng)頁中的圖片對象取名子的時(shí)候,，千萬注意不要有重名的情況,，否則就得不到正確結(jié)果了。此外,，你還可以使用下邊的代碼一樣代替上邊的代碼：

var abc = document.menu; // 這條語句和 var abc = document.images["menu"]; 是等價(jià)的

【圖片對象 Image】

關(guān)于一個(gè)圖片的信息可以保存在一個(gè)叫 Image 的對象中,，此對象包含了圖片路徑 (URL)、圖片當(dāng)前的下載狀態(tài),、圖片的高度和寬度等信息,，通常情況下你會將此對象指向在 document.images 數(shù)組中存在的圖片，也就是放在網(wǎng)頁中的圖片，但是有時(shí)候你可能要處理一些不在網(wǎng)頁中的圖片對象,，這時(shí)候 Image 對象就派上用場了,。

當(dāng)你要實(shí)現(xiàn)圖片翻滾效果的時(shí)候，提前將你想要使用的圖片下載到客戶端是一個(gè)很好的想法,，因?yàn)檫@樣的話,，當(dāng)用戶觸發(fā)事件，要換圖片的時(shí)候,，那個(gè)圖片已經(jīng)在客戶端了,，于是圖片就會馬上顯示出來，避免了時(shí)間的延遲,，否則換圖的時(shí)候再讓瀏覽器從服務(wù)器上下載圖片的話,，圖片翻滾就有時(shí)間延遲了。而使用 Image 對象就可以做到提前下載圖片的目的,，如下邊的代碼一樣,，使用 Image 對象的 src 屬性指定圖片的路徑 (URL)，這樣就將 images 目錄下的圖片 pic2.gif 下載到客戶端了：

var myImg = new Image();
myImg.src = "images/pic2.gif";

這段代碼將迫使瀏覽器開始從服務(wù)器下載指定的圖片,，如果客戶端的緩存 (Cache) 中有這個(gè)圖片的話,，瀏覽器會自動(dòng)將其覆蓋，那樣,，當(dāng)用戶將鼠標(biāo)移動(dòng)到圖片上邊的時(shí)候,，圖片將會立即變換，不會有時(shí)間的延遲,。

看看改進(jìn)后的圖片翻滾的 在線示例 吧,，此程序使用了 Image 對象預(yù)先下載圖片的方法。注意：此例不能在 Internet Explorer 3.0 或更早的版本中使用,，因?yàn)樗鼈儾恢С帧?

【超鏈接對象 link】

通常你可能不會想到使用 link對象,，如果想知道超鏈接的地址 (URL)，你可以使用 href 屬性,，如果想知道超鏈接目標(biāo)窗口 (window) 或目標(biāo)幀 (frame),，你可以使用 target 屬性。

link 對象還包含一個(gè) imagemap 對象,，它對應(yīng)的是 HTML 文件中的 <MAP> 標(biāo)記,。

【表單對象 form】

form 對象自身用的并不是很多，但是 form 對象包含了很多別的元素對象,，這些對象組成了表單 form,。這些對象包括：文本框?qū)ο?(text)、密碼框?qū)ο?(password),、單選框?qū)ο?(radio button),、復(fù)選框?qū)ο?(check box),、多行文本域 (text area)、隱藏域 (hidden field),、選擇列表/下拉列表 (selection list option),、提交按鈕 (submit button)、重置按鈕 (reset button),，它們對應(yīng)的 HTML 標(biāo)記可以參照相關(guān)的 HTML 語言參考,。

這些對象都有共同的屬性 name 和 value，value 屬性是用戶輸入的數(shù)據(jù)或 HTML 文件給定的值,，在 HTML 標(biāo)記中,，這兩個(gè)屬性分別對應(yīng)的代碼是 NAME="..." 和 VALUE="...."。

在使用 form 里的那些元素對象之前,，首先你必須要引用 form 對象才行,，因?yàn)?form 對象是那些對象的父對象，而 form 對象前邊也要引用它的上一層父對象 document,，這種層層引用是很重要的：

document.forms[0] // 指向頁面中的第一個(gè) form 對象
document.forms["order"] // 指向名為 order 的 form 對象,，即<FORM>標(biāo)記中包含有代碼 NAME="order" 的表單
document.order // 這和上一行的代碼是等價(jià)的

類似的，你可以通過表單 form 對象的 elements 數(shù)組訪問每一個(gè) input 對象,，同時(shí)也可以使用表單中各個(gè)元素對象的名字來訪問這些對象,。input 對象的名字也是通過 <INPUT> 標(biāo)記中的 NAME="..." HTML 代碼來命名的：

document.forms[0].elements[3]
// 第一個(gè)表單 form 中的第三個(gè) input 元素
document.forms["order"].elements["address"]
// 指向名為 order 的表單中名為 address 的對象
document.order.address
// 指向名為 order 的表單中名為 address 的對象，和上一行代碼是一樣的

通常我們使用表單對象來檢查用戶的輸入是否正確或者用戶提交的數(shù)據(jù)是否正確,，這種檢查是在表單數(shù)據(jù)被提交到服務(wù)器之前進(jìn)行的,，這樣做可以節(jié)省用戶填表的時(shí)間，保證用戶只提交一次表單,。請看 在線示例 ,，此例中演示了如何使用 form 和 form 里邊的其它對象來檢查用戶輸入的。

此例中一些需要注意的地方：

• 我們在 <form> 標(biāo)記中使用了 onSubmit 事件,，此事件在用戶按下“提交”按鈕的時(shí)候,，調(diào)用函數(shù) checkForm() 來檢查用戶輸入；
• 在函數(shù) checkForm() 中,，無論表單中的哪一項(xiàng)沒有填寫，都會彈出一個(gè)帶有錯(cuò)誤信息的消息框,，并使用 focus() 方法將鼠標(biāo)的焦點(diǎn)放在相應(yīng)的輸入框 (input) 中,；
• 如果表單中有項(xiàng)目沒有填寫，checkForm() 函數(shù)會返回 false 值,，而 onSubmit() 函數(shù)在獲得 false 值之后,，不執(zhí)行提交表單內(nèi)容的動(dòng)作。如果返回致使 true,，onSubmit() 則會執(zhí)行提交的動(dòng)作,。