深入理解JavaScript系列：設(shè)計(jì)模式

這篇文章主要介紹了深入理解JavaScript系列(26):設(shè)計(jì)模式之構(gòu)造函數(shù)模式詳解，本文講解了基本用法、構(gòu)造函數(shù)與原型、只能用new嗎？、強(qiáng)制使用new、原始包裝函數(shù)等內(nèi)容，需要的朋友可以參考下介紹構(gòu)造函數(shù)大家都很熟悉了，不過(guò)如果你是新手，還是有必要來(lái)了解一下什么叫構(gòu)造函數(shù)的。構(gòu)造函數(shù)用于創(chuàng)建特定類(lèi)型的對(duì)象一一不僅聲明了使用的對(duì)象，構(gòu)造函數(shù)還可以接受參數(shù)以便第一次創(chuàng)建對(duì)象的時(shí)候設(shè)置對(duì)象的成員值。你可以自定義自己的構(gòu)造函數(shù)，然后在里面聲明自定義類(lèi)型對(duì)象的屬性或方法?；居梅ㄔ贘avaScript里，構(gòu)造函數(shù)通常是認(rèn)為用來(lái)實(shí)現(xiàn)實(shí)例的，JavaScript沒(méi)有類(lèi)的概念，但是有特殊的構(gòu)造函數(shù)。通過(guò)new關(guān)鍵字來(lái)調(diào)用定義的否早函數(shù)，你可以告訴JavaScript你要?jiǎng)?chuàng)建一個(gè)新對(duì)象并且新對(duì)象的成員聲明都是構(gòu)造函數(shù)里定義的。在構(gòu)造函數(shù)內(nèi)部，this關(guān)鍵字引用的是新創(chuàng)建的對(duì)象?；居梅ㄈ缦拢捍a如下：functionCar(model,year,miles)(this.model=model;this.year=year;es=miles;this.output=function()(returnthis.model+"走了"+es+"公里”；}；}vartom=newCar("大叔”，2009,20000);vardudu=newCar("Dudu",2010,5000);console.log(tom.output());console.log(dudu.output());上面的例子是個(gè)非常簡(jiǎn)單的構(gòu)造函數(shù)模式，但是有點(diǎn)小問(wèn)題。首先是使用繼承很麻煩了，其次output()在每次創(chuàng)建對(duì)象的時(shí)候都重新定義了，最好的方法是讓所有Car類(lèi)型的實(shí)例都共享這個(gè)output()方法，這樣如果有大批量的實(shí)例的話，就會(huì)節(jié)約很多內(nèi)存。解決這個(gè)問(wèn)題，我們可以使用如下方式：代碼如下：functionCar(model,year,miles)(this.model=model;this.year=year;es=miles;this.output=formatCar;}functionformatCar()(returnthis.model+"走了"+es+"公里”；}這個(gè)方式雖然可用，但是我們有如下更好的方式。構(gòu)造函數(shù)與原型JavaScript里函數(shù)有個(gè)原型屬性叫prototype,當(dāng)調(diào)用構(gòu)造函數(shù)創(chuàng)建對(duì)象的時(shí)候，所有該構(gòu)造函數(shù)原型的屬性在新創(chuàng)建對(duì)象上都可用。按照這樣，多個(gè)Car對(duì)象實(shí)例可以共享同一個(gè)原型，我們?cè)贁U(kuò)展一下上例的代碼：代碼如下：functionCar(model,year,miles)(this.model=model;this.year=year;es=miles;}/*注意：這里我們使用了Ototype.方法名，而不是Ototype主要是用來(lái)避免重寫(xiě)定義原型prototype對(duì)象*/Ctotype.output=function()(returnthis.model+"走了"+es+"公里”；};vartom=newCar("大叔”，2009,20000);vardudu=newCar("Dudu",2010,5000);console.log(tom.output());console.log(dudu.output());這里，output()單實(shí)例可以在所有Car對(duì)象實(shí)例里共享使用。另外：我們推薦構(gòu)造函數(shù)以大寫(xiě)字母開(kāi)頭，以便區(qū)分普通的函數(shù)。只能用new嗎？上面的例子對(duì)函數(shù)car都是用new來(lái)創(chuàng)建對(duì)象的，只有這一種方式么？其實(shí)還有別的方式，我們列舉兩種：代碼如下：functionCar(model,year,miles)(this.model=model;this.year=year;es=miles;//自定義一個(gè)output輸出內(nèi)容this.output=function()(returnthis.model+"走了"+es+"公里”；}}〃方法1：作為函數(shù)調(diào)用Car("大叔”,2009,20000);//添加到window對(duì)象上console.log(window.output());〃方法2：在另外一個(gè)對(duì)象的作用域內(nèi)調(diào)用varo=newObject();Car.call(o,"Dudu",2010,5000);console.log(o.output());該代碼的方法1有點(diǎn)特殊，如果不適用new直接調(diào)用函數(shù)的話，this指向的是全局對(duì)象window，我們來(lái)驗(yàn)證一下：代碼如下：//作為函數(shù)調(diào)用vartom=Car("大叔”，2009,20000);console.log(typeoftom);//"undefined"console.log(window.output());//'大叔走了20000公里"這時(shí)候?qū)ο髏om是undefined，而window.output()會(huì)正確輸出結(jié)果，而如果使用new關(guān)鍵字則沒(méi)有這個(gè)問(wèn)題，驗(yàn)證如下：代碼如下：//使用new關(guān)鍵字vartom=newCar("大叔"，2009,20000);console.log(typeoftom);//"object"console.log(tom.output());//"大叔走了20000公里"強(qiáng)制使用new上述的例子展示了不使用new的問(wèn)題，那么我們有沒(méi)有辦法讓構(gòu)造函數(shù)強(qiáng)制使用new關(guān)鍵字呢，答案是肯定的，上代碼：代碼如下：functionCar(model,year,miles)(if(!(thisinstanceofCar))(returnnewCar(model,year,miles);}this.model=model;this.year=year;es=miles;this.output=function()(returnthis.model+"走了"+es+"公里"；}}vartom=newCar("大叔"，2009,20000);vardudu=Car("Dudu",2010,5000);console.log(typeoftom);//"object"console.log(tom.output());//"大叔走了20000公里"console.log(typeofdudu);//"object"console.log(dudu.output());//"Dudu走了5000公里"通過(guò)判斷this的instanceof是不是Car來(lái)決定返回newCar還是繼續(xù)執(zhí)行代碼，如果使用的是new關(guān)鍵字，則(thisinstanceofCar)為真，會(huì)繼續(xù)執(zhí)行下面的參數(shù)賦值，如果沒(méi)有用new，(thisinstanceofCar)就為假，就會(huì)重新new一個(gè)實(shí)例返回。原始包裝函數(shù)JavaScript里有3中原始包裝函數(shù)：number,string,boolean，有時(shí)候兩種都用：代碼如下：//使用原始包裝函數(shù)vars=newString("mystring");varn=newNumber(101);varb=newBoolean(true); //推薦這種vars="mystring";varn=101;varb=true;推薦，只有在想保留數(shù)值狀態(tài)的時(shí)候使用這些包裝函數(shù)，關(guān)于區(qū)別可以參考下面的代碼:代碼如下：//原始stringvargreet="Hellothere";//使用split()方法分割greet.split('')[0];//"Hello"http://給原始類(lèi)型添加新屬性不會(huì)報(bào)錯(cuò)greet.smile=true;//單沒(méi)法獲取這個(gè)值(18章ECMAScript實(shí)現(xiàn)里我們講了為什么)console.log(typeofgreet.smile);//"undefined"http://原始stringvargreet=newString("Hellothere");//使用split()方法分割