js中創建物件的幾種方式範例介紹_javascript技巧

JavaScript中的所有事物都是物件：字串、陣列、數值、函數等。 JS中並沒有類別的概念，

但我們可以利用JS的語法特徵，以類別的思想來創建物件。

原始方法

複製程式碼 程式碼如下:

程式碼如下：

上面的方式透過new關鍵字產生一個對象，然後根據JS是動態語言的特性添加屬性和方法，建構

造一個對象。其中的this是表示呼叫該方法的物件。

這種方式的問題是如果需要多次建立對象，則需要重複程式碼多次，不利於程式碼的複用。

工廠方法

複製程式碼

程式碼如下:

程式碼如下：

這種方式提高了程式碼重用率，也可以改變工廠方法，傳入參數賦值。 複製代碼

代碼如下:

上面的方式雖然可以提高程式碼的複用率，但和物件導向中類別的概念相比有一個很大的缺陷。面

相對象強調對象的屬性私有，而對象的方法是共享的。而上面的工廠方法建立物件的時候要為每個

物件建立各自私有的方法。同時由於為每個物件創建邏輯相同的方法，浪費記憶體。改進如下

複製程式碼

程式碼如下:

obj2.showName(); //Luo
obj2.showAge(); //21

span>


上面透過定義連個函數對象，解決了不同對象持有函數對象的私有問題。現在所有物件的方法都

持有上面兩個函數的參考。但這麼一來的話，物件的函數又和物件成了相互獨立，不相干的了。這和

物件導向中特定方法屬於特定類別的想法不符合。 建構子方式

複製程式碼 程式碼如下:

建構子的方式和工廠方式一樣，會為每個物件建立獨享的函式物件。當然也可以將這些函數

物件定義在建構子外面，這樣又有了物件和方法相互獨立的問題。

原型方法：此方法利用的物件的prototype屬性

複製程式碼 程式碼如下:

程式碼如下:


script type="text/javascript">

function Person(){} //定義一個空的構造函數，且不能傳遞參數

//將所有屬性的方法都賦予prototype屬性

Person.prototype.name = "Koji"; //新增屬性
Person.prototype.age = 22;

Person.prototype.showName = function (){ //新增方法
alert(this.name);
}

Person.prototype.showAge = function(){
alert(this.age);
}

var obj1 = new Person(); //產生一個Person物件
var obj2 = new Person();

obj1.showName(); //Koji
obj1.showAge(); //22
obj2.showName(); //Koji

obj2.showAge(); //22




當產生Person物件的時候prototype的屬性都賦值給了新的物件。那麼屬性和方法是共享的。

此方法的問題首先是建構子不能傳參，每個新產生的物件都有預設值。其次，方法共享沒有 任何問題，但是屬性共享就有問題，當屬性是可改變狀態的物件的時候。

複製代碼

代碼如下:

obj2.showArray(); //Koji,Luo,Kyo
obj2.showArray (); //Koji,Luo,Kyo




上面的程式碼透過obj1加入obj1的屬性array元素的時候，obj2的arra屬性的元素也跟著受到

影響，原因就在於obj1和obj2對象的array屬性引用的是同一個Array對象，那麼改變這個Array

對象，另一引用該Array對象的屬性自然也會受到影響

混合的建構子/原型方式

使用建構函式定義物件的屬性，使用原型（prototype）定義物件的方法，這樣就可以做到屬性 私有，而方法共享。

複製程式碼 程式碼如下:

屬性私有後，改變各自的屬性不會影響別的物件。同時，方法也是由各個物件共享。在語意上，

這符合了面相物件程式設計的要求。

動態原型方法

複製程式碼 程式碼如下:

程式碼如下:




function Person(name, age) {
this.name = name;
this.age = age;
this.array = new Array(" Koji", "Luo");

//如果Person物件中的_initialized為undefined，表示尚未為Person的原型添加方法
if (typeof Person._initialized == "undefined")
{
Person.prototype.showName = function() {
alert(this.name);
}

Person.prototype.showArray = function() {
alert(this.array);
}

Person._initialized = true; //設定為true，不必再為prototype新增方法
}
}

var obj1 = new Person("Koji", 22); //產生一個Person物件
var obj2 = new Person("Luo", 21);

obj1.array.push("Kyo") ; //將一個元素加入obj1的array屬性

obj1.showArray(); //Koji,Luo,Kyo
obj1.showName(); //Koji
obj2.showArray() ; //Koji,Luo

obj2.showName(); //Luo




這種方法和建構子/原型方式大同小異。只是將方法的添加放到了構造函數之中，同時在構造

函數Person上添加了一個屬性用來保證if語句只能成功執行一次在實際應用中採用最廣泛的是構造函數/原型方法。動態原型方法也很流行，它在功能上和構造 函數/原型方法是等價的。不要單獨使用建構函式或原型方法。