快捷導(dǎo)航

JavaScript對象創(chuàng)建模式實(shí)例匯總

更新時(shí)間：2016年10月03日 10:52:52 作者：angel

這篇文章主要介紹了JavaScript對象創(chuàng)建模式,結(jié)合實(shí)例形式總結(jié)分析了JavaScript常見的對象創(chuàng)建模式,包括工廠模式、構(gòu)造函數(shù)模式、原型模式、動(dòng)態(tài)原型模式、寄生構(gòu)造函數(shù)模式、穩(wěn)妥構(gòu)造函數(shù)模式等,需要的朋友可以參考下

本文實(shí)例總結(jié)了JavaScript對象創(chuàng)建模式。分享給大家供大家參考，具體如下：

在JavaScript中創(chuàng)建對象是很容易的，可以使用對象字面量或者構(gòu)造函數(shù)。常用的創(chuàng)建對象的模式有以下幾種：

一. 工廠模式

工廠模式抽象了具體對象的過程，用函數(shù)來封裝以特ing接口創(chuàng)建對象的細(xì)節(jié)。
如下：

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);

工廠模式雖然解決了創(chuàng)建多個(gè)相似兌現(xiàn)過的問題，但是卻沒有解決對象識別的問題。

二. 構(gòu)造函數(shù)模式

構(gòu)造函數(shù)模式可以創(chuàng)建特定類型的對象。

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操作符來標(biāo)識對象類型。

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

三. 原型模式

每個(gè)函數(shù)都有一個(gè)prototype（原型）屬性。這個(gè)屬性是一個(gè)指針，指向一個(gè)對象，而這個(gè)對象的用途是包含可以由特定類型的所有實(shí)例共享的屬性和方法。

使用原型對象的好處是，可以讓所有對象實(shí)例共享它所包含的屬性和方法。

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);
  }
};

原型中所有屬性是被很多實(shí)例共享的，通過在實(shí)例上添加一個(gè)同名屬性，可以隱藏原型中的對應(yīng)屬性。但是，對于包含引用類型值的屬性來說，問題就比較明顯了，如下：

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

四. 組合使用構(gòu)造函數(shù)模式和原型模式

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); // false
alert(cat.sayName === dog.sayName); // true

五. 動(dòng)態(tài)原型模式

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"

使用動(dòng)態(tài)原型模式時(shí)，不能使用對象字面量重寫原型。如果在已經(jīng)創(chuàng)建了實(shí)例的情況下重寫原型，那么就會切斷現(xiàn)有實(shí)例與新原型之間的聯(lián)系。

六. 寄生構(gòu)造函數(shù)模式

寄生構(gòu)造函數(shù)模式的基本思想是創(chuàng)建一個(gè)函數(shù)，該函數(shù)的作用僅僅是封裝創(chuàng)建對象的代碼，然后再返回新創(chuàng)建的對象。

從表面上看，這個(gè)函數(shù)很像典型的構(gòu)造函數(shù)。除了使用new操作符之外，這個(gè)模式跟工廠模式長得一模一樣。構(gòu)造函數(shù)在不返回值的情況下，默認(rèn)會返回新對象實(shí)例。而通過在構(gòu)造函數(shù)的末尾添加一個(gè)return語句，可以重寫調(diào)用構(gòu)造函數(shù)時(shí)返回的值。

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"

由于返回的對象與構(gòu)造函數(shù)或構(gòu)造函數(shù)的原型之間沒有什么關(guān)系，因此不能依賴instanceof操作符來確定對象類型。

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

七. 穩(wěn)妥構(gòu)造函數(shù)模式

穩(wěn)妥構(gòu)造函數(shù)模式與寄生構(gòu)造函數(shù)模式類似，但有兩點(diǎn)不同：

一是新創(chuàng)建對象的實(shí)例方法不引用this；

二是不適用new操作符調(diào)用構(gòu)造函數(shù)。

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"

穩(wěn)妥構(gòu)造函數(shù)模式適合在某些安全執(zhí)行環(huán)境。

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: