同系列友情鏈接:

---

1.設(shè)計(jì)模式之初體驗(yàn)—精讀《JavaScript 設(shè)計(jì)模式》Addy Osmani著

2.設(shè)計(jì)模式的分類—精讀《JavaScript 設(shè)計(jì)模式》Addy Osmani著

Construct（構(gòu)造器）模式

---

在經(jīng)典的面向?qū)ο缶幊陶Z(yǔ)言中，Construtor是一種在內(nèi)存已分配給該對(duì)象的情況下，用于初始化新創(chuàng)建對(duì)象的特殊方法。

在 JavaScript 中，幾乎所有東西都是都是對(duì)象，可能你會(huì)經(jīng)常找不到對(duì)象，?，你承認(rèn)不？?

來(lái)看一下什么是 Object構(gòu)造器 ：

用于創(chuàng)建特定類型的對(duì)象——準(zhǔn)備好對(duì)象以備使用，同時(shí)接受構(gòu)造器可以使用的參數(shù)，以在第一次創(chuàng)建對(duì)象時(shí)，設(shè)置成員屬性和方法值。

下圖為：Constructor(構(gòu)造器)模式

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

在 JavaScript 中，創(chuàng)建對(duì)象時(shí)有發(fā)生，常見(jiàn)的創(chuàng)建方式有兩種：

直接空對(duì)象賦值；

使用 new關(guān)鍵字

// 1. 直接空對(duì)象賦值 var newObject = {};// 2. 使用 new 關(guān)鍵字創(chuàng)建，newObject構(gòu)造器的簡(jiǎn)潔記法 var newObject = new Object(); 復(fù)制代碼

在 Object構(gòu)造器為特定的值創(chuàng)建對(duì)象封裝，或者沒(méi)有傳遞值時(shí)，它將創(chuàng)建 一個(gè)空對(duì)象并返回這個(gè)空對(duì)象；

對(duì)象的賦值

四種方法可以將鍵值賦值給一個(gè)對(duì)象：

ECMAScript 3 兼容方式；

“點(diǎn)”語(yǔ)法；

中括號(hào)語(yǔ)法

只適用于ECMAScript 5 方式；

Object.defineProperty;

Object.defineProperties

// 1.點(diǎn)語(yǔ)法 // 設(shè)置屬性 newObject.someKey = "Hello World!"; // 獲取屬性值 var key = newObject.someKey;// 2.中括號(hào)語(yǔ)法 // 設(shè)置屬性 newObject["somekey"] = "Hello world!"; // 獲取屬性值 var key = newObject["somekey"];// 3.Object.defineProperty // 設(shè)置屬性 Object.defineProperty(newObject,"somekey",{value:"Hello World!",// 該屬性對(duì)應(yīng)的值，默認(rèn)為undefinedwritable:true,// 能否修改屬性的值，如果直接使用字面量定義對(duì)象，默認(rèn)值為trueenumerable:true,// 表示該屬性是否可枚舉，即是否通過(guò)for-in循環(huán)或Object.keys()返回屬性，如果直接使用字面量定義對(duì)象，默認(rèn)值為trueconfigurable:true// 表示能否通過(guò)delete刪除此屬性，能否修改屬性的特性，或能否修改把屬性修改為訪問(wèn)器屬性，如果直接使用字面量定義對(duì)象，默認(rèn)值為true }); // 也可以簡(jiǎn)化一下這種方式 var defineProp = function(obj,key,value){config.value=value;Object.defineProperty(obj,key,config); } // 使用上述方式，先創(chuàng)建一個(gè)空的 person對(duì)象 var person = Object.create(null); // 然后設(shè)置各個(gè)屬性 defineProp(person,"car","Delorean"); defineProp(person,"dateOfBrith","1989"); defineProp(person,"hasBeard",false); // 獲取屬性值同1，2 var key_car = person["car"]; var key_dateOfBrith = person["dateOfBrith"]; var key_hasBeard = person["hasBeard"];// 4.Object.defineProperties // 設(shè)置屬性 Object.defineProperties(newObject,{"someKey":{value:"Hello World!",writable:true},"anotherKey":{value:"Foo Bar",writable:false} }); // 獲取屬性值同1，2 var key_someKey = person["someKey"]; var key_anotherKey = person["anotherKey"];復(fù)制代碼

上面定義的這些方法甚至可以用于繼承如下所示：

// 用法 // 創(chuàng)建賽車司機(jī) driver 對(duì)象，繼承于 person 對(duì)象 var driver = Object.create(person); // 為 driver 設(shè)置一些屬性 defineProp(deriver,"topSpeed","100mph"); // 獲取繼承屬性 console.log(driver.dateOfBrith); // 獲取我們?cè)O(shè)置的100mph屬性 console.log(driver.topSpeed);復(fù)制代碼

基本Constructor(構(gòu)造器)

大家都知道 JavaScript 不支持類的概念，但是它卻支持與對(duì)象一起使用的 特殊的 Constructor 函數(shù)。通過(guò)在構(gòu)造器前面加 new關(guān)鍵字，告訴 JavaScript 像使用構(gòu)造器一樣實(shí)例化一個(gè)新的對(duì)象，并且對(duì)象成員由該函數(shù)定義。

在構(gòu)造器內(nèi)，關(guān)鍵字 this引用新創(chuàng)建的對(duì)象。回顧對(duì)象創(chuàng)建，基本的構(gòu)造器看起來(lái)可能是這樣的：

function Car(model,year,miles){this.model = model;this.year = year;this.miles = miles;this.toString= function(){return this.model+ " has done " + this.miles + " miles";} } // 用法 var civic = new Car("Honda Civic",2009,20000); var mondeo= new Car("Ford Mondeo",2010,5000);console.log(civic.toString()); console.log(mondeo.toString()); 復(fù)制代碼

上面是一個(gè)簡(jiǎn)單的構(gòu)造器模式版本，但是也是存在問(wèn)題的：因?yàn)樗茈y繼承，另一個(gè) 問(wèn)題就是 toString()這樣的函數(shù)是為每個(gè)使用 Car 構(gòu)造器創(chuàng)建的新對(duì)象而重新定義的。 這不是最理想的，因?yàn)檫@種函數(shù)應(yīng)該在所有的 Car 實(shí)例之間共享。

其實(shí)這個(gè)問(wèn)題很好解決，因?yàn)橛泻芏郋S3和 ES5兼容替代方法能夠用于創(chuàng)建對(duì)象。

帶原型的Constructor(構(gòu)造器)

JavaScript中有一個(gè)名為 prototype 的屬性。調(diào)用 JavaScript 構(gòu)造器創(chuàng)建一個(gè)對(duì)象后，新的對(duì)象就具有構(gòu)造器原型的所有屬性。通過(guò)這種方式，可以創(chuàng)建多個(gè) Car 對(duì)象，并訪問(wèn)相同的原型。所以我們可以擴(kuò)展原始示例，如下所示：

function Car(model,year,miles){this.model = model;this.year = year;this.miles = miles; } // 前方警告：小伙伴是否還記得反模式一條：避免重新定義 prototype對(duì)象 // 所以下面我們是使用 Object.prototype.newMethod而不是Object.prototype來(lái)定義對(duì)象內(nèi)部的方法 Car.prototype.toString=function(){return this.model+ " has done " + this.miles + " miles"; } // 用法 var civic = new Car("Honda Civic",2009,20000); var mondeo= new Car("Ford Mondeo",2010,5000);console.log(civic.toString()); console.log(mondeo.toString());// 這樣 toString()的單一示實(shí)例就可以在所有的 Car 對(duì)象之間共享了 復(fù)制代碼

小結(jié)

今天的構(gòu)造器模式，是不是很nice？

但是，你掌握了多少？

你可以動(dòng)動(dòng)小手指示例代碼都敲一遍，相信你可以更進(jìn)一步了解,掌握 Constructor(構(gòu)造器)模式。

下一篇將對(duì)Module(模塊)模式做詳細(xì)的介紹。這一模式更精彩，因?yàn)楹芸炷憔蜁?huì)知道為什么別人都那么寫了，以及模塊化的相關(guān)概念等等等

( ^_^ )/~~拜拜

總結(jié)

以上是生活随笔為你收集整理的3.Contructor(构造器)模式—精读《JavaScript 设计模式》Addy Osmani著的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。