JavaScript對象建立模式執行個體匯總_javascript技巧

本文執行個體總結了JavaScript對象建立模式。分享給大家供大家參考，具體如下：

在JavaScript中建立對象是很容易的，可以使用對象字面量或者建構函式。常用的建立對象的模式有以下幾種：

一. 原廠模式

原廠模式抽象了具體對象的過程，用函數來封裝以特ing介面建立對象的細節。
如下：

function createAnimal(name, age) {  var o = new Object();  o.name = name;  o.age = age;  o.sayName = function() {    alert(this.name);  }  return o;}var cat = createAnimal("cat", 12);var dog = createAnimal("dog", 3);

原廠模式雖然解決了建立多個相似兌現過的問題，但是卻沒有解決對象識別的問題。

二. 建構函式模式

建構函式模式可以建立特定類型的對象。

function Animal(name, age) {  this.name = name;  this.age = age;  this.sayName = function() {    alert(this.name);  }}var cat = new Animal("cat", 12);var dog = new Animal("dog", 3);

可以使用對象的constructor屬性或instanceof操作符來標識物件類型。

cat.constructor == Animal // truecat instanceof Animal // true

三. 原型模式

每個函數都有一個prototype（原型）屬性。這個屬性是一個指標，指向一個對象，而這個對象的用途是包含可以由特定類型的所有執行個體共用的屬性和方法。

使用原型對象的好處是，可以讓所有對象執行個體共用它所包含的屬性和方法。

function Animal() {}Animal.prototype.name = "animal";Animal.prototype.age = 1;Animal.prototype.sayName = function() {  alert(this.name);}var test1 = new Animal();test1.sayName(); // "animal"var test2 = new Animal();test2.sayName(); // "animal"alert(test1.sayName === test2.sayName); // true

或者：

function Animal() {}Animal.prototype = {  constructor: Animal,  name: "animal",  age: 1,  sayName: function() {    alert(this.name);  }};

原型中所有屬性是被很多執行個體共用的，通過在執行個體上添加一個同名屬性，可以隱藏原型中的對應屬性。但是，對於包含參考型別值的屬性來說，問題就比較明顯了，如下：

function Animal() {}Animal.prototype = {  constructor: Animal,  name: "animal",  age: 1,  hobbies: ["dance", "sing", "play"],  sayName: function() {    alert(this.name);  }};var cat = new Animal();var dog = new Animal();cat.hobbies.push("sleep");alert(cat.hobbies); // "dance", "sing", "play", "sleep"alert(dog.hobbies); // "dance", "sing", "play", "sleep"alert(cat.hobbies === dog.hobbies); // true

四. 組合使用建構函式模式和原型模式

function Animal(name, age) {  this.name = "animal";  this.age = 1;  this.hobbies = ["dance", "sing", "play"];}Animal.prototype = {  constructor: Animal,  sayName: function() {    alert(this.name);  }};var cat = new Animal("cat", 2);var dog = new Animal("dog", 3);cat.hobbies.push("sleep");alert(cat.hobbies); // "dance", "sing", "play", "sleep"alert(dog.hobbies); // "dance", "sing", "play"alert(cat.hobbies === dog.hobbies); // falsealert(cat.sayName === dog.sayName); // true

五. 動態原型模式

function Animal(name, age) {  this.name = name;  this.age = age;  if(typeof this.sayName != "function") {    Animal.prototype.sayName = function() {      alert(this.name);    }  }}var cat = new Animal("cat", 12);cat.sayName(); // "cat"

使用動態原型模式時，不能使用對象字面量重寫原型。如果在已經建立了執行個體的情況下重寫原型，那麼就會切斷現有執行個體與新原型之間的聯絡。

六. 寄生建構函式模式

寄生建構函式模式的基本思想是建立一個函數，該函數的作用僅僅是封裝建立對象的代碼，然後再返回新建立的對象。

從表面上看，這個函數很像典型的建構函式。除了使用new操作符之外，這個模式跟原廠模式長得一模一樣。建構函式在不傳回值的情況下，預設會返回新對象執行個體。而通過在建構函式的末尾添加一個return語句，可以重寫調用建構函式時返回的值。

function Animal(name, age) {  var o = new Object();  o.name = name;  o.age = age;  o.sayName = function() {    alert(this.name);  }  return o;}var cat = new Animal("cat", 12);cat.sayName(); // "cat"

由於返回的對象與建構函式或建構函式的原型之間沒有什麼關係，因此不能依賴instanceof操作符來確定物件類型。

建議在可以使用其他模式的情況下，不能使用這種模式。

七. 穩妥建構函式模式

穩妥建構函式模式與寄生建構函式模式類似，但有兩點不同：

一是新建立對象的執行個體方法不引用this；

二是不適用new操作符調用建構函式。

function Animal(name, age) {  var o = new Object();  o.name = name;  o.age = age;  var msg = "Hello, I'm ";  o.sayName = function() {    alert(msg + this.name);  }  return o;}var cat = new Animal("cat", 12);cat.sayName(); // "Hello, I'm cat"

穩妥建構函式模式適合在某些安全執行環境。

更多關於JavaScript相關內容可查看本站專題：《javascript物件導向入門教程》、《JavaScript中json操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript尋找演算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍曆演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所協助。