Javascript創建對象

 從本質上講,創建對象想法只是爲了創建一個簡單的實體,這個實體包含了許多屬性和方法

以下是一個對象構造器的例子:

function Person(name, age, colour) {

this.name = name;

this.age = age;

this.colour = colour;

}

然後,可以這樣來調用Person構造器:

var somebody = new Person("Patrick", 22, "red");

 

或者從用戶那裏得到輸入數值:

var pName = prompt("What is your name?");

var pAge = prompt("How old are you this year?");

var pColour = prompt("What is your favourite colour?");

var somebody = new Person(pName, pAge, pColour);

 

所有在javascript中的構造器,就象在Java中,都可以利用new關鍵字來進行調用。當一個person利用它的屬性{"Patrick", 22, "red"}被創建(或者說被構造)的時候,這些數值就可以訪問了,比如 :

 

somebody.name, or  somebody["name"]= "Patrick"
somebody.age, or  somebody["age"]  ="22 "
somebody.colour, or  somebody["colour"]  ="red" 
 

因爲我們利用name增加了Person的屬性,所以它們必須通過name來被引用,這點在後面的代碼中可以看到。如果我們使用數字,那麼我們就必須使用數字來引用,比如要用somebody[0],而不用somebody.name。

javascript的數組和對象(比如 forms,images,frames,…)都允許這兩種方法。

另外,數組和對象都有一個本質的屬性,即length(長度)。我們在編制程序的時候,可以這樣來使用它:objectName.length,它返回對象包含的元素或者屬性的個數。

屬性同樣也可以從函數中來創建,這樣,你只需要增加一行到Person函數中就可以創建屬性了:

 function Person(name, age, colour)

{

this.name = name;

this.age = age;

this.colour = colour;

this.birthYear = (new Date()).getYear() - this.age;

}

以上的Person函數定義了第四個屬性:birthYear,它代表每一個Person的出生年份。這裏要注意,這一增加的行是調用一個內置的Date構造器,它返回一個包含了當前日期和時間的Date對象。

 

這是一個非常懶惰的方法來訪問一個Date變量。所以使用下面的代碼會顯得更準確些,更有可讀性:

var today = new Date();

this.birthYear = today.getYear() - this.age;

 

當然,有許多方法來對javascript程序進行“壓縮”。通過插入對象到代碼中,你就可以處理絕大多數的變量。

這個Date對象比起我們上面定義的Person對象來說更復雜,因爲它包括了訪問方法(accessor/get)以及操作方法(manipulator/set)。同時,增加簡單的對象方法到javascript中是可能,下面是詳細的例子代碼:

<SCRIPT language="javascript">

<!-- Hide from older browsers

function Person(name, age, colour) {

this.name = name;

this.age = age;

this.colour = colour;

this.birthYear = (new Date()).getYear() - this.age;

this.toString = printPerson; // 這裏定義the Person.toString() 方法

this.isOlder = isOlder; // 這裏定義Person.isOlder(Person) 方法

}

function printPerson() {

var text = this.name + " was born in " + this.birthYear +"<br>";

text += "and is " + this.age + " years old.<p>";

return text;

}

function isOlder(otherPerson) { // 這裏定義是否第一個人是更老的

return (this.age > otherPerson.age); // 返回布爾型數值

}

file://下面的代碼用於測試我們的函數

var body1 = new Person("Patrick", 22, "red");

var body2 = new Person("Betty", 21, "green");

document.write(body1); file://這裏爲Person.toString()創建一個調用

document.write(body2);

document.write(body1.name);

document.write((body1.isOlder(body2)) ? " is " : " is not "); // 是否更老?

document.write("older than " + body2.name);


// Stop hiding -->

</SCRIPT>

通過爲Person對象重載Person.toString()方法,我們可以將Person對象作爲字符串顯示出來。每當Person對象被作爲字符串引用的時候,pringPerson返回的數值就決定了該顯示什麼了。

上面腳本的輸出如下所示:

Patrick was born in 76

and is 22 years old.

Betty was born in 77

and is 21 years old.

Patrick is older than Betty

從輸出的結果我們可以看到年份是以兩位數字表示的,如1976年只用76來表示。所以你可能想增加“19”到這兩位數字的前面。不幸的是,“千年蟲”的問題使得你處理起來有點棘手。而不同的瀏覽器處理Date對象的getYear()方法是不同的。

Year(年份)
 Navigator瀏覽器
 IE 3.x瀏覽器
 IE 4.x瀏覽器 
 

 


你可以從上面表格中發現最新的瀏覽器支持1999年之後四位的年份格式(如2000、2001)。不幸的是,老的瀏覽器處理年份的格式的時候給程序設計人員無盡的困惑。我經常使用的具體解決方法如下所示,與大家共享:

var thisYear = (new Date()).getYear();

thisYear = 1900 + (thisYear % 1900);

這裏(thisYear % 1900)作用是將年份轉換位IE 3.x格式並且增加1900以得到真實的年份(比如,2002年經過this Year%1900轉換位IE 3.x格式位102,然後102再加上1900得到2002)。上面這兩條語句可以適用於從1900年到3799年的處理,現在看起來這麼長的時間是足夠使用了。但是,爲了避免類似於“千年蟲”問題,我們應該再找出更好的解決方案,在本教程中就不給出了。另外,新的ECMA標準包括了一個名爲getFullYear()的函數,它是返回完整的年份格式,但是這個函數只能被Navigator 4支持,在IE中是不能使用的。

最後對程序再做一點改進,我們可以修改People構造器以轉換年份爲YYYY格式,具體代碼如下:

this.birthYear = 1900 + (((new Date()).getYear() - this.age) % 1900);

在javascript中使用對象的能力通常被許多程序設計人員所忽視。但是從本教程中,你應該可以看到使用對象可以使程序員設計出功能更強大的應用程序來的。

發佈了10 篇原創文章 · 獲贊 5 · 訪問量 15萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章