javascript的工廠模式和構(gòu)造函數(shù)的區(qū)別

先給你介紹下JS常用的幾種模式

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國(guó)際域名空間、虛擬空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、寬城網(wǎng)站維護(hù)、網(wǎng)站推廣。

1.原始模式

//1.原始模式，對(duì)象字面量方式

var?person?=?{?

name:?'Jack',

age:?18,

sayName:?function?()?{?alert(this.name);?}

};

//1.原始模式，Object構(gòu)造函數(shù)方式

var?person?=?new?Object();

person.name?=?'Jack';

person.age?=?18;

person.sayName?=?function?()?{

alert(this.name);

};

/*顯然，當(dāng)我們要?jiǎng)?chuàng)建批量的person1、person2……時(shí)，

每次都要敲很多代碼，資深copypaster都吃不消！

然后就有了批量生產(chǎn)的工廠模式。*/

2.工廠模式

//2.工廠模式，定義一個(gè)函數(shù)創(chuàng)建對(duì)象

function?creatPerson?(name,?age)?{

var?person?=?new?Object();?

person.name?=?name;

person.age?=?age;

person.sayName?=?function?()?{

alert(this.name);

};

return?person;?

}

/*

工廠模式就是批量化生產(chǎn)，簡(jiǎn)單調(diào)用就可以進(jìn)入造人模式（啪啪啪……）。

指定姓名年齡就可以造一堆小寶寶啦，解放雙手。

但是由于是工廠暗箱操作的，所以你不能識(shí)別這個(gè)對(duì)象到底是什么類型、

是人還是狗傻傻分不清（instanceof?測(cè)試為?Object），

另外每次造人時(shí)都要?jiǎng)?chuàng)建一個(gè)獨(dú)立的temp對(duì)象，代碼臃腫，雅蠛蝶啊。

*/

3.構(gòu)造函數(shù)

//3.構(gòu)造函數(shù)模式，為對(duì)象定義一個(gè)構(gòu)造函數(shù)

function?Person?(name,?age)?{

this.name?=?name;

this.age?=?age;

this.sayName?=?function?()?{

alert(this.name);

};????

}

var?p1?=?new?Person('Jack',?18);?//創(chuàng)建一個(gè)p1對(duì)象

Person('Jack',?18);???

//屬性方法都給window對(duì)象，window.name='Jack'，window.sayName()會(huì)輸出Jack

4.原型模式

//4.原型模式，直接定義prototype屬性

function?Person?()?{}

Person.prototype.name?=?'Jack';

Person.prototype.age?=?18;

Person.prototype.sayName?=?function?()?{?alert(this.name);?};

//4.原型模式，字面量定義方式

function?Person?()?{}

Person.prototype?=?{

name:?'Jack',

age:?18,

sayName:?function?()?{?alert(this.name);?}

};

var?p1?=?new?Person();?//name='Jack'

var?p2?=?new?Person();?//name='Jack'

//這里需要注意的是原型屬性和方法的共享，即所有實(shí)例中

//都只是引用原型中的屬性方法，任何一個(gè)地方產(chǎn)生的改動(dòng)會(huì)引起其他實(shí)例的變化。

5.混合模式（構(gòu)造+原型）

//5.?原型構(gòu)造組合模式，

function?Person?(name,?age)?{

this.name?=?name;

this.age?=?age;

}

Person.prototype?=?{

hobby:?['running','football'];

sayName:?function?()?{?alert(this.name);?},

sayAge:?function?()?{?alert(this.age);?}

};

var?p1?=?new?Person('Jack',?20);?

//p1:'Jack',20;?__proto__:?['running','football'],sayName,sayAge

var?p2?=?new?Person('Mark',?18);?

//p1:'Mark',18;__proto__:?['running','football'],sayName,sayAge

//通過上面的例子，有什么區(qū)別一目了然

JavaScript 中介者模式與觀察者模式有何不同

感覺二者非常像，都是pub/sub機(jī)制，如何進(jìn)行區(qū)分？分別在什么不同的場(chǎng)景中進(jìn)行應(yīng)用？

在Obsever模式中， 不存在封裝約束的單一對(duì)象。Observer 和 Subject 必須合作才能維持約束。

Communication(通訊)模式由觀察者和目標(biāo)互聯(lián)的方式?jīng)Q定：?jiǎn)我荒繕?biāo)通常有很多觀察者，有時(shí)一個(gè)目標(biāo)的觀察者是另一個(gè)觀察者的目標(biāo)

Mediator 和 Observer 都能促進(jìn)松耦合，然后Mediator 模式通過限制對(duì)象嚴(yán)格通過Mediator 進(jìn)行通信來(lái)實(shí)現(xiàn)這個(gè)個(gè)目的

Observer 模式創(chuàng)建觀察者對(duì)喜愛那個(gè)，觀察者對(duì)象向訂閱它們的對(duì)喜愛那個(gè)發(fā)布其感興趣的事件。

在GoF的原文中是這樣描述觀察者模式的：

One or more observers are interested in the state of a subject and register their interest with the subject by attaching themselves. When something changes in our subject that the observer may be interested in, a notify message is sent which calls the update method in each observer. When the observer is no longer interested in the subject's state, they can simply detach themselves.

具體應(yīng)用場(chǎng)景是，當(dāng)subject的某個(gè)動(dòng)作需要引發(fā)一系列不同對(duì)象的動(dòng)作（比如你是一個(gè)班長(zhǎng)要去通知班里的某些人），與其一個(gè)一個(gè)的手動(dòng)調(diào)用觸發(fā)的方法（私下里一個(gè)一個(gè)通知），不如維護(hù)一個(gè)列表（建一個(gè)群），這個(gè)列表存有你想要調(diào)用的對(duì)象方法（想要通知的人）；之后每次做的觸發(fā)的時(shí)候只要輪詢這個(gè)列表就好了（群發(fā)），而不用關(guān)心這個(gè)列表里有誰(shuí)，只用關(guān)心想讓誰(shuí)加入讓誰(shuí)退出

這個(gè)列表就叫做ObserverList，它有一些維護(hù)列表方法：

function ObserverList(){

this.observerList = [];

}

ObserverList.prototype.Add = function( obj ){};

ObserverList.prototype.Empty = function(){};

ObserverList.prototype.Count = function(){};

ObserverList.prototype.Get = function( index ){};

ObserverList.prototype.Insert = function( obj, index ){};

ObserverList.prototype.IndexOf = function( obj, startIndex ){};

ObserverList.prototype.RemoveAt = function( index ){};

而我們的subject只用關(guān)心兩件事：1.維護(hù)這個(gè)列表，2.發(fā)布事件

function Subject(){

this.observers = new ObserverList();

}

Subject.prototype.AddObserver = function( observer ){

this.observers.Add( observer );

};

Subject.prototype.RemoveObserver = function( observer ){

this.observers.RemoveAt( this.observers.IndexOf( observer, 0 ) );

};

Subject.prototype.Notify = function( context ){

var observerCount = this.observers.Count();

for(var i=0; i observerCount; i++){

this.observers.Get(i).Update( context );

// 在這里假設(shè)的是列表里的每個(gè)對(duì)象都有update方法，但個(gè)人覺得這個(gè)列表里也可以是不同對(duì)象的不同方法，只要能接受當(dāng)前上下文作為參數(shù), 可以這樣執(zhí)行：

// subscription.callback.apply( subscription.context, args );

}

};

中介模式(Mediator Pattern)

讓我們假設(shè)這樣一個(gè)場(chǎng)景: 有一個(gè)Manager一聲令下，需要讓工人A和工人B開工，代碼可以是這樣的

Manager.start = function () {

A.work();

B.work();

}

其實(shí)還可以這么寫，新增一個(gè)中介模塊，這個(gè)模塊有存儲(chǔ)了Manager的常用命令比如start，stop，resume，每一個(gè)命令其實(shí)維護(hù)的也是一個(gè)列表，比如start的列表下存儲(chǔ)了所有員工的start方法：

Mediator["start"] = [

{

name: 'A',

callback: 'work'

},

{

name: 'B',

callback: 'workAgain'

},

]

所以Manager的方法可以重寫為

Manager.start = function () {

Mediator.publish('start') // publish 為觸發(fā)命令函數(shù)，以此來(lái)觸發(fā)start命令下維護(hù)的所有回調(diào)函數(shù)

}

代碼細(xì)節(jié)就不展示了，主要體現(xiàn)這么一個(gè)機(jī)制，而如果某個(gè)員工要提交自己的work方法供老板調(diào)用的話，只要注冊(cè)一下就好了

2

Mediator.subscribe('C', function callback() {});

問題是新增加一個(gè)中介模塊的好處是什么？

1.低耦合！如果不是經(jīng)理要讓員工開始工作，是董事長(zhǎng)怎么辦，或者是部門主管怎么辦，難道都要這么寫

XXX.start = function () {

A.work()

B.work();

}

都要把A.work什么抄一遍？當(dāng)然不是，只要給中介模塊發(fā)出命令就好了，

2.模塊之間不需要進(jìn)行通信，只要負(fù)責(zé)廣播和監(jiān)聽事件就好了

3.在模塊化的javascript中，中介模塊能提高可維護(hù)性：是否啟動(dòng)某個(gè)模塊，有沒有權(quán)限啟動(dòng)某個(gè)模塊，異步加載某些模塊，模塊之間的依賴關(guān)系，某些模塊啟動(dòng)失敗了怎么辦。這些邊界條件都可以交給它來(lái)判斷，而其他模塊只關(guān)心實(shí)現(xiàn)自己邏輯就好了

最后打個(gè)比方，中介模塊真的就像房屋中介一樣！如果你是房東，你只需要下令一聲“我要找人租房”，他們就自然會(huì)生成那個(gè)列表，你不用直接和房客打交道。

javascript嚴(yán)格模式下有哪些不同

嚴(yán)格模式聲明：“use strict”;

1、禁止變量未聲明就賦值

2、限制動(dòng)態(tài)綁定（屬性和方法歸屬哪個(gè)對(duì)象在編譯階段就要確定）

1）禁止使用with

2）創(chuàng)建eval作用域，eval內(nèi)聲明的變量外部訪問不到

3、增強(qiáng)的安全措施

1）禁止this關(guān)鍵字指向全局對(duì)象

2）禁止在函數(shù)內(nèi)部遍歷調(diào)用棧（函數(shù)內(nèi)訪問functionName.caller/functionName.arguments均報(bào)錯(cuò)）

4、禁止刪除變量（只有configurable設(shè)置為true的對(duì)象屬性才能被刪除）

5、對(duì)只讀屬性賦值將會(huì)報(bào)錯(cuò)

6、重名錯(cuò)誤

1）函數(shù)參數(shù)不能重名

7、禁止以零（0）開頭的8進(jìn)制表示法，支持?jǐn)?shù)字0加字母o：“0o”為前綴表示八進(jìn)制數(shù)

8、arguments的限制

1）arguments本身不能被賦值 ，但是arguments[x]仍然可以

2）arguments不再追蹤參數(shù)的變化，在函數(shù)內(nèi)改變參數(shù)值，arguments依然指向舊值

3）禁止使用arguments.callee，匿名函數(shù)無(wú)法調(diào)用自己了

9、函數(shù)必須在頂層聲明

10、不允許使用以下保留字做變量名

1）implements

2）interface

3）let

4）package

5）private

6）protected

7）public

8）static

9）yield

《JavaScript設(shè)計(jì)模式》pdf下載在線閱讀全文，求百度網(wǎng)盤云資源

《JavaScript設(shè)計(jì)模式》百度網(wǎng)盤pdf最新全集下載:

鏈接：

?pwd=i1tg 提取碼：i1tg

簡(jiǎn)介：《JavaScript設(shè)計(jì)模式》共分六篇四十章，首先討論了幾種函數(shù)的編寫方式，體會(huì)JavaScript在編程中的靈活性；然后講解了面向?qū)ο缶幊痰闹R(shí)，其中討論了類的創(chuàng)建、數(shù)據(jù)的封裝以及類之間的繼承；最后探討了各種模式的技術(shù)，如簡(jiǎn)單工廠模式，包括工廠方法模式、抽象工廠模式、建造者模式、原型模式、單例模式，以及外觀模式，包括適配器模式。本書還講解了幾種適配器、代理模式、裝飾者模式和MVC模式，討論了如何實(shí)現(xiàn)對(duì)數(shù)據(jù)、視圖、控制器的分離。在講解MVP模式時(shí)，討論了如何解決數(shù)據(jù)與視圖之間的耦合，并實(shí)現(xiàn)了一個(gè)模板生成器；講解MVVM模式時(shí)，討論了雙向綁定對(duì)MVC的模式演化。 ?

JavaScript創(chuàng)建對(duì)象的幾種模式比較

第一種：Object構(gòu)造函數(shù)創(chuàng)建

var Person = new Object();

Person.name = 'Nike';

Person.age = 29;

這行代碼創(chuàng)建了Object引用類型的一個(gè)新實(shí)例，然后把實(shí)例保存在變量Person中。

第二種：使用對(duì)象字面量表示法

var Person = {};//相當(dāng)于var Person = new Object();

var Person = {

name:'Nike';

age:29;

}

對(duì)象字面量是對(duì)象定義的一種簡(jiǎn)寫形式，目的在于簡(jiǎn)化創(chuàng)建包含大量屬性的對(duì)象的過程。也就是說(shuō)，第一種和第二種方式創(chuàng)建對(duì)象的方法其實(shí)都是一樣的，只是寫法上的區(qū)別不同

在介紹第三種的創(chuàng)建方法之前，我們應(yīng)該要明白為什么還要用別的方法來(lái)創(chuàng)建對(duì)象，也就是第一種，第二種方法的缺點(diǎn)所在：它們都是用了同一個(gè)接口創(chuàng)建很多對(duì)象，會(huì)產(chǎn)生大量的重復(fù)代碼，就是如果你有100個(gè)對(duì)象，那你要輸入100次很多相同的代碼。那我們有什么方法來(lái)避免過多的重復(fù)代碼呢，就是把創(chuàng)建對(duì)象的過程封裝在函數(shù)體內(nèi)，通過函數(shù)的調(diào)用直接生成對(duì)象。

第三種：使用工廠模式創(chuàng)建對(duì)象

function createPerson(name,age,job){

var o = new Object();

o.name = name;

o.age = age;

o.job = job;

o.sayName = function(){

alert(this.name);

};

return o;

}

var person1 = createPerson('Nike',29,'teacher');

var person2 = createPerson('Arvin',20,'student');

在使用工廠模式創(chuàng)建對(duì)象的時(shí)候，我們都可以注意到，在createPerson函數(shù)中，返回的是一個(gè)對(duì)象。那么我們就無(wú)法判斷返回的對(duì)象究竟是一個(gè)什么樣的類型。于是就出現(xiàn)了第四種創(chuàng)建對(duì)象的模式。

第四種:使用構(gòu)造函數(shù)創(chuàng)建對(duì)象

function Person(name,age,job){

this.name = name;

this.age = age;

this.job = job;

this.sayName = function(){

alert(this.name);

};

}

var person1 = new Person('Nike',29,'teacher');

var person2 = new Person('Arvin',20,'student');

對(duì)比工廠模式，我們可以發(fā)現(xiàn)以下區(qū)別：

1.沒有顯示地創(chuàng)建對(duì)象

2.直接將屬性和方法賦給了this對(duì)象

3.沒有return語(yǔ)句

4.終于可以識(shí)別的對(duì)象的類型。對(duì)于檢測(cè)對(duì)象類型，我們應(yīng)該使用instanceof操作符，我們來(lái)進(jìn)行自主檢測(cè)：

alert(person1 instanceof Object);//ture

alert(person1 instanceof Person);//ture

alert(person2 instanceof Object);//ture

alert(person2 instanceof Object);//ture

同時(shí)我們也應(yīng)該明白，按照慣例，構(gòu)造函數(shù)始終要應(yīng)該以一個(gè)大寫字母開頭，而非構(gòu)造函數(shù)則應(yīng)該以一個(gè)小寫字母開頭。

那么構(gòu)造函數(shù)確實(shí)挺好用的，但是它也有它的缺點(diǎn)：

就是每個(gè)方法都要在每個(gè)實(shí)例上重新創(chuàng)建一遍，方法指的就是我們?cè)趯?duì)象里面定義的函數(shù)。如果方法的數(shù)量很多，就會(huì)占用很多不必要的內(nèi)存。于是出現(xiàn)了第五種創(chuàng)建對(duì)象的方法

第五種：原型創(chuàng)建對(duì)象模式

function Person(){}

Person.prototype.name = 'Nike';

Person.prototype.age = 20;

Person.prototype.jbo = 'teacher';

Person.prototype.sayName = function(){

alert(this.name);

};

var person1 = new Person();

person1.sayName();

使用原型創(chuàng)建對(duì)象的方式，可以讓所有對(duì)象實(shí)例共享它所包含的屬性和方法。

如果是使用原型創(chuàng)建對(duì)象模式，請(qǐng)看下面代碼：

function Person(){}

Person.prototype.name = 'Nike';

Person.prototype.age = 20;

Person.prototype.jbo = 'teacher';

Person.prototype.sayName = function(){

alert(this.name);

};

var person1 = new Person();

var person2 = new Person();

person1.name ='Greg';

alert(person1.name); //'Greg' --來(lái)自實(shí)例

alert(person2.name); //'Nike' --來(lái)自原型

當(dāng)為對(duì)象實(shí)例添加一個(gè)屬性時(shí)，這個(gè)屬性就會(huì)屏蔽原型對(duì)象中保存的同名屬性。這時(shí)候我們就可以使用構(gòu)造函數(shù)模式與原型模式結(jié)合的方式，構(gòu)造函數(shù)模式用于定義實(shí)例屬性，而原型模式用于定義方法和共享的屬性

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

function Person(name,age,job){

this.name =name;

this.age = age;

this.job = job;

}

Person.prototype = {

constructor:Person,

sayName: function(){

alert(this.name);

};

}

var person1 = new Person('Nike',20,'teacher');

本文標(biāo)題：JavaScript模式的簡(jiǎn)單介紹
瀏覽地址：http://chinadenli.net/article30/dsgpcpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站排名、網(wǎng)站建設(shè)、、微信小程序、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)