JavaScript1.5 物件的操作(Working with Objects)

物件和屬性(Objects and Properties)

JS 的物件有與它相關的屬性。您存取物件的屬性有一個簡單的記法：

objectName.propertyName

物件名稱與屬性名稱這兩者是有區分大小寫的。你可以指派一個值來定義一個屬性，例如，假設有一個物件的名稱為 myCar(暫時假設物件已經存在)。您可以給它的屬性命名為 make、model 和 year，如下所示：

myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

陣列是有順序的一套與獨立變數名稱相關的值。屬性與陣列在 JS 中，有著密切的關係；事實上，以相同的資料結構來說，它們是不同的兩個獨立系統。所以，舉例來說，您可以使用如下的方式來存取物件 myCar 的屬性：

myCar["make"] = "Ford";
myCar["model"] = "Mustang";
myCar["year"] = 1969;

這種類型的陣列被稱之為關聯式陣列(associative array)，因為每個索引元素是以一個字串值來相互做關連。它是怎麼運作，以下的函式為當您透過物件與物件的屬性名稱作為函式的參數(arguments)時，來顯示物件的屬性，：

function show_props(obj, obj_name) {
	var result = "";
	for (var i in obj)
		result += obj_name + "." + i + " = " + obj[i] + "n";
	return result;
}

所以，以這個 show_props(myCar, "myCar") 呼叫函式將會回傳以下的值：

myCar.make = Ford
myCar.model = Mustang
myCar.year = 1969

建立新物件(Creating New Objects)

JS 有許多的內建物件。除此之外，您也可建立屬於您自己的物件。在 JS 1.2 與其之後，您可以使用物件初始器(Object Initializer)來建立物件。或者，您可以先行建立一個建構式函式(constructor function)，然後使用該函式與 new 運算子來初始化物件。

使用物件初始器(Using Object Initializers)

建立物件除了使用建構式函式(constructor function)之外，您也可以使用物件初始器來建立物件。使用物件初始器來設定的話，有時這樣的方式被稱為以實字(literal)的記述來建立物件。「物件初始器」是使用 C++ 一致性的術語。

在 JS 中放入描述物件的實字，是我們在建立物件時，最簡單的方式。而物件實字部分包含有一對 {} 號，以及在 {} 之中所包含的一對或多對：

propertyName : value 屬性名稱 : 值或表達式(運算式)

如果含有有一對以上的話，在對與對之間使用逗號來隔開彼此，例如：

var myCar = {				//使用物件初始器自建的 myCar 物件
	Mazda : "black",		//自建一個屬性 mazda 其值為 black
	Honda : "white"			//自建一個屬性 honda 其值為 white
};
document.write(typeof(myCar));		//檢查 myCar 的結果為 object
document.write("Mazda" in myCar);	//檢查 mazda 是否為 myCar 的屬性(true)
document.write("Honda" in myCar);	//檢查 honda 是否為 myCar 的屬性(true)

物件初始器的語法：

var obj = {
	property_1 : value_1,	// property_# 也許是識別字或字串
	property_2 : value_2,
	...,
	"property_n" : value_n
};

假設 obj 是新物件的名稱，每個 property_i 是一個識別字或者是一個字串，並且每個 value_i 是一個被指派到 property_i 的值或表達式(運算式)。而 obj 則是任意指定的，假如您不需要在其它地方來參考的話，您並不需要指派一個特定名稱的變數給它。

假如在頂層腳本(top-level script)中，以物件初始器來建立一個物件時，每當 JS 每次解譯這個物件時，它將會轉換一個包含物件實字(object literal)的表達式。除此之外，每次當函式被呼叫時，在函式中使用的初始器都會被建立。

以下的敘述句建立了一個物件與指派它為 x 變數。並且，只有當 if 表達式的判斷(cond)為 true 時，變數 x 才有用。

if (cond) x = {hi : "there"};

在下面的例子中，建立了 myHonda 的三個屬性(color、wheels 與 engine)。注意的是 engine 這個屬性也是具有它自己屬性的一個物件。

var myHonda = {
	color : "red",
	wheels : 4,
	engine : {
		cylinders : 4, size : 2.2
	}
};

您也可以使用物件初始器來建立陣列，請參閱 » 陣列實字(Array Literals)。

在 JS 1.1 與更早的版本，您不能使用物件初始器。您只能使用它們的建構式函式或者使用一些其它物件提供作此用途的函式來建立物件。

使用建構式函式(Using a Constructor Function)

所謂建構式函式(或簡稱建構式)，其本身就是一個 JS 的函式(function)，這樣的函式可以讓我們來定義屬性與方法。我們可以使用下面兩個步驟來建立一個物件：

  1. 書寫建構式函式來定義這個物件。
  2. 以 new 建立物件的實體(instance，或稱副本)。

要定義一個物件類別(class)的話，先建立一個物件類型的函數，然後指定它的名稱、 屬性與方法。例如，例如，我們現在假設您想要為 car 建立一個物件類型，您想要這個物件類型被稱作 car 並且您想要使它有 make、model 與 year 三個屬性。要做到這點，您應該撰寫以下的函式：

function car(make, model, year) {
	this.make = make;
	this.model = model;
	this.year = year;
}

注意，在上述函式中是使用 this 來指定該物件的屬性，然後根據這個屬性，透過其函式來指派給屬性一個值。

現在您可以建立一個被稱之為 mycar 的物件，如下所示：

mycar = new car("Eagle", "Talon TSi", 1993);

以上敘述建立了 mycar 物件並且指派了一個特定的值給屬性。分別所代表的是：

  • mycar.make 的字串值是 Eagle
  • mycar.model 的字串值是 Talon TSi
  • mycar.year 的整數值是 1993

您也可以用 new 來建立任何數量的 car 物件，例如：

kenscar = new car("Nissan", "300ZX", 1992);
vpgscar = new car("Mazda", "Miata", 1990);

物件可以有本身之外另一個物件的屬性。例如，假設您定義一個稱為 person 的物件，如下所示：

function person(name, age, sex) {
	this.name = name;
	this.age = age;
	this.sex = sex;
}

之後實體化如下的兩個新 person 物件：

rand = new person("Rand McKinnon", 33, "M");
ken = new person("Ken Jones", 39, "M");

然後你就可以取得 person 物件所包含的一個 owner 屬性來改寫之前 car 的定義，如下所示：

function car(make, model, year, owner) {
	this.make = make;
	this.model = model;
	this.year = year;
	this.owner = owner;
}

實體化這些新物件，然後你可以使用如下的內容：

car1 = new car("Eagle", "Talon TSi", 1993, rand);
car2 = new car("Nissan", "300ZX", 1992, ken);

請注意，建立這些物件是透過字串實字或整數數值的實體化，因此上述敘述使用 rand 與 ken 物件來作為 owner 的參數。然後，假如您想要找出 car2 擁有者的名稱，您可以存取以下的屬性：

car2.owner.name

請注意，您可以隨時加入屬性到先前所定義的物件中。例如，以下的敘述：

car1.color = "black"

增添一個屬性 color 到 car1，並且指派它一個 black 的值。不過，這不會影響任何其他物件。若要增加新的屬性到全部相同類型的物件，您必須將屬性加入至 car 物件類型的定義中。

頁數： 1 2