javascript如何以工廠模式、建構函式模式、原型模式建立物件實例詳解

雖然使用Object建構函式或使用物件字面量可以很方便的用來建立一個對象，但這種方式有一個明顯的缺點：使用一個介面建立多個物件會產生很多冗餘的程式碼。因此為了解決這個問題，人們開始使用以下幾種方式來常見物件。

工廠模式

此模式抽象化了建立物件的具體過程，用函數來以特定介面建立物件的細節

#

 function cPerson(name,sex,age){
 var o = new Object();
 o.name = name;
 o.sex = sex;
 o.age = age;
 o.show = function(){
 console.log(this.name,this.age,this.sex);
 }
 return o;
}
 var p1 = cPerson('龙','男','100');
 p1.show();
 var p2 = cPerson('田','女','14');
 p2.show();

工廠模式測試

工廠方式的問題：使用工廠模式能夠創建一個包含所有資訊的對象，可以無數次的調用的這個函數。雖然其解決了創建多個相似物件的問題，但卻沒有解決物件識別的問題(即如何得知一個物件的類型)

建構子模式

function CPerson(name,sex,age) {//注意这里 构造函数首字母大写
 this.name = name;
 this.sex = sex;
 this.age = age;
 this.show = function () {
 console.log(this.name, this.age, this.sex);
 }
}
var p1 = new CPerson('龙','男','100');
 p1.show();
var p2 = new CPerson('田','女','14');
 p2.show();

建構子模式測試

注意建構子與工廠模式有些不同的地方，如下

建構函式首字母大寫

沒有明確地創建物件

將屬性和方法賦值給了this 物件

沒有return語句

而且以此方式來呼叫構造函數會大致經歷幾個步驟

建立一個新的物件

將建構函數的作用域賦值給這個物件（因此this就指向了這個物件）

執行建構函式中的程式碼（即為新物件新增屬性和方法的過程）

回傳物件

注意：建構子其實和普通的函式沒有太大的差別，唯一的不同在於調用方式的不同。以下示範不同的幾種呼叫方式

 // 调用方式1 new 方式
 var p1 = new CPerson('龙','男','100');
 p1.show();//龙 100 男
 // 调用方式2 普通函数调用
 CPerson('龙','男','100');
 window.show()//龙 100 男 注意属性和方法会被设置到window对象上
 // 调用方式3 在另一个对象的作用域中调用
 var obj = new Object();
 CPerson.call(obj,'龙','男','100');
 obj.show(); //龙 100 男 在obj的作用域

建構子的問題：使用建構子最主要的問題就是每個方法都要在每個實例上重新建立一次，p1與p2的都有show方法，但不是同一個Function的實例，因為function在js中也是一個物件。因此他們共有的show方法並不相等。

原型模式

每個函數都有一個prototype屬性，這個屬性是一個指針，指向一個物件。而這個物件的用途是 包含可以由 特定類型 的所有 實例 共享的屬性和方法。即呼叫建構函式所建立的那個物件的 原型物件

好處是可以讓所有物件的實例共享他的屬性的方法。即無需在建構函式中定義實例的資訊

 function CPerson(){
}
CPerson.prototype.name='龙';
CPerson.prototype.sex='男';
CPerson.prototype.age=100;
CPerson.prototype.show=function(){
 console.log(this.name, this.age, this.sex);
}
var p1 = new CPerson();
 p1.show(); //龙 100 男
var p2 = new CPerson();
 p2.show();//龙 100 男
 console.log(p1.show == p2.show)//true

以上是javascript如何以工廠模式、建構函式模式、原型模式建立物件實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！