本文例項總結了JS 建立物件的模式。分享給大家供大家參考，具體如下：

1.工廠模式

抽象了建立具體物件的過程，建立了一種函式，封裝特定的介面建立物件的細節。

• 新建一個物件
• 定義屬性和方法
• return剛新建的物件

function createPerson(name,age,job) {
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 obj.job = job;
 obj.sayHi = function() {
 congsole.log(this.name);
 };
 return obj;
}

var person1 = createPerson("name1","age1","job1");
var person2 = createPerson("name2","age2","job2");

存在問題：

沒有解決物件識別的問題（怎麼識別物件的型別）

2.建構函式模式

• 不顯式建立物件
• 直接將屬性和方法定義在this中
• 沒有return
• 通過 new操作符呼叫

function Person(name,job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayHi = function() {
 console.log(this.name);
 };
}

var person1 = new Person("name1","job1");
var person2 = new Person("name2","job2");

存在問題：

• 每個方法都要在例項上建立一次

3.原型模式

建立的每一個函式都有prototype原型屬性，這個屬性是一個指標，指向一個物件，這個物件的用途是包含可以由特定型別的所有例項共享的屬性和方法。

所有原生引用型別都在其建構函式的原型上定義了方法

function Person{

}

Person.prototype.name="name"
Person.prototype.age="age"
Person.prototype.job="job"
Person.prototype.sayHi=function(){
 console.log(this.name)
}

var person1=new Person()
var person2=new Person()

存在問題：

• 所有屬性是被很多例項共享的

4.組合構造和原型模式

建構函式用來定義例項屬性，原型模式用來定義方法和共享的屬性

function Person(name,job) {
 this.name = name;
 this.age = age;
 this.job = job;
}
Person.prototype={
 constructor:Person;
 sayHi:function(){
 console.log(this.name)
 }
}

var person1 = new Person("name1","job1");

5.動態原型模式

這裡對原型的修改,能夠對所有例項生效，只在初次呼叫建構函式會執行

function Person(name,job){
 this.name=name;
 this.age=age;
 this.job=job;
 if(typeof this.sayHi !="function" ){
 Person.prototype.sayHi=functong(){
  console.log(this.name)
 }
 }
}

var person1 = new Person("name1","job1");

6.寄生建構函式模式

工廠模式+建構函式

• 返回的物件與建構函式、建構函式的原型屬性之間沒有關係
• 不能依賴instanceof來去定物件原型
• 不建議使用

function Person(name,job) {
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 obj.job = job;
 obj.sayHi = function() {
 congsole.log(this.name);
 };
 return obj;
}

var person1 = new Person("name1","job1");

7.穩妥構造模式

• 沒有公共屬性
• 不使用this
• 不使用new

function Person(name,job) {
 var obj = new Object();
 // 定義室友變數和函式
 obj.sayHi = function() {
 congsole.log(name);
 };
 return obj;
}

var person1 = Person("name1","job1");
// name1

摘抄自《JavaScript 高階程式設計》第六章

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

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