JavaScript創(chuàng)建對(duì)象方式總結(jié)【工廠模式、構(gòu)造函數(shù)模式、原型模式等】

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

這里主要是對(duì)《JavaScript高級(jí)程序設(shè)計(jì)》第六章（面向?qū)ο蟮某绦蛟O(shè)計(jì)）的總結(jié)，書上的這章至少看了4遍是有的。該章主要講對(duì)象的創(chuàng)建與繼承。其中創(chuàng)建對(duì)象和繼承方式至少6種，再加上一些方法屬性，很容易搞得暈頭轉(zhuǎn)向的。因此有必要對(duì)本章的內(nèi)容理一理，以后忘了也好過來看一看。

由于文章長度的限制，本文主要講創(chuàng)建對(duì)象。

1 創(chuàng)建對(duì)象

1.1 一般方法

使用Object或者采用對(duì)象字面量的方法。

var o = {a: 1};
var o2=new Object();
o2.a=1;

缺點(diǎn)：使用同一個(gè)接口創(chuàng)建很多對(duì)象，會(huì)產(chǎn)生大量重復(fù)的代碼。

1.2工廠模式

function parent(name,age){
 var Child = new Object();
 Child.name=name;
 Child.age=age;
 Child.sayHi=function(){
 console.log("Hi");
 }
 return Child;
};
var x = Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

函數(shù)parent能夠根據(jù)接受的參數(shù)來構(gòu)建一個(gè)包含所有必要信息的child對(duì)象。可以無限次調(diào)用這個(gè)函數(shù)，都會(huì)返回一個(gè)包含兩個(gè)屬性和一個(gè)方法的對(duì)象。

解決了創(chuàng)建多個(gè)相似對(duì)象的問題，但卻沒有解決對(duì)象識(shí)別的問題（即怎樣知道一個(gè)對(duì)象的類型）。

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

對(duì)于構(gòu)造函數(shù)這個(gè)名字，學(xué)過java或者c++的同學(xué)應(yīng)該都是知道的，在js里也是差不多的。

用構(gòu)造函數(shù)將上面的例子重寫如下：

function Parent(name,age){
 this.name=name;
 this.age=age;
 this.sayHi=function(){
 console.log("Hi");
 };
}
var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

對(duì)于構(gòu)造函數(shù)，我們需要在調(diào)用的時(shí)候加關(guān)鍵字 new。要注意的是，構(gòu)造函數(shù)始終是以一個(gè)大寫字母開頭，而非構(gòu)造函數(shù)始終是以一個(gè)小寫字母開頭。

與工廠模式相比，主要有以下幾個(gè)不同之處：

缺點(diǎn)：使用構(gòu)造函數(shù)的缺點(diǎn)就是每個(gè)方法都需要在每個(gè)實(shí)例上重新創(chuàng)建一遍。

1.4原型模式

我們創(chuàng)建的每一個(gè)函數(shù)都有一個(gè)prototype（原型）屬性，這個(gè)屬性是一個(gè)指針，指向一個(gè)對(duì)象，而這個(gè)對(duì)象的用途是包含可以由特定類型的所有實(shí)例共享的屬性與方法。使用原型對(duì)象的好處是可以讓所有的對(duì)象實(shí)例共享其包含的屬性與方法。

function Parent(name,age){
 Parent.prototype.name=name;
 Parent.prototype.age=age;
 Parent.prototype.sayHi=function(){
 console.log("Hi");
 };
}
var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

缺點(diǎn)：優(yōu)點(diǎn)就是其缺點(diǎn)，方法屬性都可以共享。具體可以看下面這個(gè)例子

function Parent(name,age){
 Parent.prototype.name=name;
 Parent.prototype.age=age;
 Parent.prototype.arr=["123","we"];
 Parent.prototype.sayHi=function(){
 console.log("Hi");
 };
}
var x = new Parent("Tom",12);
var y = new Parent("Tom1",12);
x.arr.push("x");
y.arr.push("y");
console.log(x.arr);//["123", "we", "x", "y"]
console.log(y.arr);//["123", "we", "x", "y"]

對(duì)象x修改自己的屬性，竟然會(huì)影響到y(tǒng)對(duì)象；同理，對(duì)y也一樣。這個(gè)明顯就很不合理啊，太可怕了！

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

function Parent(name,age){
　　//只把屬性留在這里定義，方法放在原型對(duì)象中
 this.name=name;
 this.age=age;
}
//第一種方式
Parent.prototype.sayHi=function(){
 console.log("Hi");
};
//第二種方式
//由于采用對(duì)象字面量，因此必須修正其constructor屬性；
Parent.prototype={
 constructor:Parent,
 sayHi:function(){
 console.log("Hi");
 }
}
var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

在這個(gè)例子中，實(shí)例屬性都是在構(gòu)造函數(shù)中定義的，而由所有實(shí)例共享的屬性constructor和方法則是在原型中定義的。

是目前使用最廣泛、認(rèn)同度最高的一種創(chuàng)建自定義類型的方法。

--------------------------感覺后面幾種方法有些變態(tài)了--------------------------------

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

function Parent(name,age){
 this.name=name;
 this.age=age;
 if( typeof this.sayHi !="function"){
 Parent.prototype.sayHi=function(){
 console.log("Hi");
 };
 }
}
var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

先檢查某個(gè)應(yīng)該存在方法是否有效再來決定是否需要初始化原型。

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

當(dāng)前面幾種都不適用的情況下，可以使用寄生構(gòu)造函數(shù)模式。這種函數(shù)的基本思想是創(chuàng)建一個(gè)函數(shù)，該函數(shù)的作用僅僅是封裝創(chuàng)建對(duì)象的代碼，然后再返回新創(chuàng)建的對(duì)象。

function parent(name,age){
 var Child = new Object();
 Child.name=name;
 Child.age=age;
 Child.sayHi=function(){
 console.log("Hi");
 }
 return Child;
};
var x = Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

但是其實(shí)就是和工廠模式一模一樣，你ＴＭ在逗我嗎？？？？？

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

穩(wěn)妥構(gòu)造函數(shù)遵循與寄生構(gòu)造函數(shù)模式類似的模式，但有兩點(diǎn)不同：一是新創(chuàng)建對(duì)象的實(shí)例方法不引用this; 二是不使用new操作調(diào)用構(gòu)造函數(shù)。

function Parent(name,age){
 var o=new Object();
　　 //私有變量或者方法
 var name=name,
 age=age;
 o.sayName=function(){
　　　　 //name前面沒有this
 console.log(name+" "+age)
 }
 return o;
}
var x = Parent("Tom",12);
x.sayName(); //Tom 12

變量x中保存的是一個(gè)穩(wěn)妥對(duì)象，而除了調(diào)用sayName()方法外，沒有別的方式可以訪問其數(shù)據(jù)成員。

更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com