constructor設(shè)計(jì)模式

在經(jīng)典的面向?qū)ο缶幊陶Z(yǔ)言中,constructor是一個(gè)特殊的方法靶庙,被用來(lái)初始化一個(gè)新建的對(duì)象石蔗,一旦該對(duì)象被分配內(nèi)存話(huà)。

在JavaScript中幾乎所有的東西都是一個(gè)對(duì)象乏苦,然而常常引起我們興趣的是對(duì)象的constructor株扛。

對(duì)象的構(gòu)造函數(shù)用于創(chuàng)建特定類(lèi)型的對(duì)象(既要準(zhǔn)備使用對(duì)象,也要接收參數(shù))汇荐,構(gòu)造函數(shù)在創(chuàng)建對(duì)象時(shí)可以用來(lái)設(shè)置成員屬性和方法的值洞就。

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

在JavaScript中創(chuàng)建對(duì)象的三種通用方法如下:

// 每種方法將創(chuàng)建一個(gè)空對(duì)象

var newObject = {}

// or

var newObject = Object.create( Object.prototype )

// or

var newObject = new Object();

最后一個(gè)方法實(shí)現(xiàn)對(duì)象的創(chuàng)建可以傳入指定的值,如果沒(méi)有傳遞掀淘,將創(chuàng)建一個(gè)空對(duì)象旬蟋,然后返回它。

傳入String革娄,返回String倾贰,類(lèi)似于new String();
傳入Number,返回Number拦惋,類(lèi)似于new Number();
傳入Object匆浙,返回Object,相當(dāng)于沒(méi)傳

為對(duì)象指定鍵和值有如下四種方法:

兼容ES3的方法

// 1. `.`(Dot) 語(yǔ)法
// 設(shè)置屬性
newObject.someKey = 'Hello world';
// 獲取屬性
var value = newObject.somekey;


// 2. '[]'方括號(hào)語(yǔ)法
// 設(shè)置屬性
newObject["someKey"] = "Hello World";
// 獲取屬性
var value = newObject["someKey"];

兼容ES5的方法(要了解更多的信息厕妖,請(qǐng)轉(zhuǎn) http://kangax.github.com/es5-compat-table/

// 3. Object.defineProperty
// 設(shè)置屬性
Object.defineProperty(newObject, "someKey", {
    value: "Hello World",
    writable: true,
    enumerable: true,
    configurable: true
})
// 獲取屬性的方法首尼,用1,2中方法即可

// 詳細(xì)了解Object.defineProperty的使用可參考[https://segmentfault.com/a/1190000007434923](https://segmentfault.com/a/1190000007434923)

// 4. Object.defineProperties
// 設(shè)置屬性

Object.defineProperties(newObject, {
    "someKey": {
        value: "Hello World",
        writable: true
    },
    "anotherKey": {
        value: "Ha ha",
        writable: true
    }
})

// 獲取屬性的方法叹放,用1饰恕,2中方法即可

對(duì)象的繼承

前面我們說(shuō)到幾種的對(duì)象的創(chuàng)建方式,在三種對(duì)象的創(chuàng)建中井仰,第一種方式最簡(jiǎn)單埋嵌,效率更高,其他兩種內(nèi)部都用了對(duì)象的繼承,如果沒(méi)有傳入任何參數(shù)俱恶,實(shí)現(xiàn)和第一種相似雹嗦。下面試第二三種創(chuàng)建對(duì)象的實(shí)例:

// 第二種
var obj = {};
obj.a=1;
obj.a -> 1
var obj2 = Object.create(obj)
obj2.a -> 1

// 第三種
var obj = {};
obj.a = 1;
obj.a -> 1
var obj2  = new Object(obj);
obj2.a -> 1

所以只是要?jiǎng)?chuàng)建一個(gè)空對(duì)象,第一種方法更好合是,要實(shí)現(xiàn)對(duì)象的繼承用第二三種方法了罪,第二三種方法的區(qū)別在于前者是ES3,后者是ES5聪全。

// Object.create 的內(nèi)部實(shí)現(xiàn)如下:
Object.create = function(o) {
    function F(){}
    F.prototype=o;
    return new F();
}

constructor 基礎(chǔ)

眾所周知泊藕,JavaScript一門(mén)不支持 class 這個(gè)概念,但是它支持對(duì)象的構(gòu)造函數(shù)难礼,通過(guò)關(guān)鍵字 new 我們想要一個(gè)構(gòu)造函數(shù)創(chuàng)建一個(gè)對(duì)象和它用函數(shù)定義的成員娃圆。

在constructor的內(nèi)部玫锋,this 關(guān)鍵字是被創(chuàng)建的新對(duì)象的引用。重溫對(duì)象的創(chuàng)建過(guò)程讼呢,一個(gè)基礎(chǔ)的 constructor 如下所示:

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";
  };
}
 
// 用法:
 
// 創(chuàng)建一個(gè)car的實(shí)例 
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
 
// 結(jié)果輸出
console.log( civic.toString() ); -> "Honda Civic has done 20000 miles"
console.log( mondeo.toString() ); -> "Ford Mondeo has done 5000 miles"·

如果現(xiàn)在就把它定義為一個(gè)設(shè)計(jì)模式相信撩鹿,很多人對(duì)不會(huì)用它,因?yàn)樗嬖谥恍﹩?wèn)題悦屏。其中一個(gè)就是繼承性节沦,另一個(gè)是每創(chuàng)建一個(gè)對(duì)象實(shí)例,toString() 方法都要被重新定義础爬,理想的實(shí)現(xiàn)方式是要實(shí)現(xiàn) toString() 在不同的實(shí)例類(lèi)型之間共享甫贯。

constructor 和 prototype

在JavaScript中,Function 像其他對(duì)象一樣幕帆,有一個(gè) prototype 获搏。當(dāng)我們用contructor創(chuàng)建一個(gè)對(duì)象,所有constructor的 prototype上的屬性都將被新對(duì)象繼承失乾。所以上面的例子我們可以修改如下:

function Car( model, year, miles ) {
    this.model = model;
    this.year = year;
    this.miles = miles;
}

Car.prototype.toString = function () {
    return this.model + " has done " + this.miles + " miles";
};
 
// 用法:
 
// 創(chuàng)建一個(gè)car的實(shí)例 
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
 
// 結(jié)果輸出
console.log( civic.toString() ); -> "Honda Civic has done 20000 miles"
console.log( mondeo.toString() ); -> "Ford Mondeo has done 5000 miles"·

這樣常熙,toString() 將實(shí)現(xiàn)在不同的對(duì)象實(shí)例間的共享。

其它設(shè)計(jì)模式相關(guān)文章請(qǐng)轉(zhuǎn)‘大處著眼碱茁,小處著手’——設(shè)計(jì)模式系列

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末裸卫,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子纽竣,更是在濱河造成了極大的恐慌墓贿,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,482評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蜓氨,死亡現(xiàn)場(chǎng)離奇詭異聋袋,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)穴吹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén)幽勒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人港令,你說(shuō)我怎么就攤上這事啥容。” “怎么了顷霹?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,762評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵咪惠,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我淋淀,道長(zhǎng)遥昧,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,273評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮渠鸽,結(jié)果婚禮上叫乌,老公的妹妹穿的比我還像新娘。我一直安慰自己徽缚,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,289評(píng)論 5 373
  • 文/花漫 我一把揭開(kāi)白布革屠。 她就那樣靜靜地躺著凿试,像睡著了一般。 火紅的嫁衣襯著肌膚如雪似芝。 梳的紋絲不亂的頭發(fā)上那婉,一...
    開(kāi)封第一講書(shū)人閱讀 49,046評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音党瓮,去河邊找鬼详炬。 笑死,一個(gè)胖子當(dāng)著我的面吹牛寞奸,可吹牛的內(nèi)容都是我干的呛谜。 我是一名探鬼主播,決...
    沈念sama閱讀 38,351評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼枪萄,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼隐岛!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起瓷翻,我...
    開(kāi)封第一講書(shū)人閱讀 36,988評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤聚凹,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后齐帚,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體妒牙,經(jīng)...
    沈念sama閱讀 43,476評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,948評(píng)論 2 324
  • 正文 我和宋清朗相戀三年对妄,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了湘今。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,064評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡饥伊,死狀恐怖象浑,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情琅豆,我是刑警寧澤愉豺,帶...
    沈念sama閱讀 33,712評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站茫因,受9級(jí)特大地震影響蚪拦,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,261評(píng)論 3 307
  • 文/蒙蒙 一驰贷、第九天 我趴在偏房一處隱蔽的房頂上張望盛嘿。 院中可真熱鬧,春花似錦括袒、人聲如沸次兆。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,264評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)芥炭。三九已至,卻和暖如春恃慧,著一層夾襖步出監(jiān)牢的瞬間园蝠,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,486評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工痢士, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留彪薛,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,511評(píng)論 2 354
  • 正文 我出身青樓怠蹂,卻偏偏與公主長(zhǎng)得像善延,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子褥蚯,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,802評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容