函數(shù)型 VS 面向?qū)ο笮偷膉avascript程序設(shè)計(jì)

1、靈活的js語(yǔ)言可以輕易的就完成截然相反的兩種編程模式函數(shù)型程序設(shè)計(jì)和面向?qū)ο蟮某绦蛟O(shè)計(jì)。js原生的支持將函數(shù)當(dāng)做變量來(lái)處理。你可以將一個(gè)函數(shù)賦值給一個(gè)變量，然后把他傳給其他的變量。抽象的說(shuō)，我們可以認(rèn)為js的函數(shù)是一個(gè)特殊的變量：只不過(guò)他的形式是“函數(shù)”。js原生的也提供對(duì)象。在js中，對(duì)象可以認(rèn)為是一系列平面化的屬性值和方法。他們看起來(lái)像是一個(gè)數(shù)據(jù)字典，而不像你在其他諸如java、c+、c#中看到的對(duì)象那樣。在經(jīng)典的面向?qū)ο缶幊讨校惐硎究梢酝ㄟ^(guò)new操作符來(lái)生成一個(gè)實(shí)例的模板。但是在js中，沒(méi)有可以當(dāng)做藍(lán)本來(lái)生成對(duì)象的。在js中，一個(gè)對(duì)象的藍(lán)本更像是一個(gè)數(shù)據(jù)字典。所以在js中，你可以創(chuàng)建對(duì)

2、象，然后可以在對(duì)象中存儲(chǔ)數(shù)據(jù)。當(dāng)然，js的對(duì)象也提供一定程度的面向?qū)ο蟮奶匦裕热绶庋b和繼承。js開發(fā)越來(lái)越熱，兩種模式的優(yōu)劣是什么？js對(duì)兩種模式都支持，但是問(wèn)題的答案得你自己來(lái)弄清楚。它兩種都支持，但并不是某一種特別的合適。OOP的js框架和函數(shù)型的js都同時(shí)存在。函數(shù)型程序設(shè)計(jì)簡(jiǎn)介函數(shù)型程序設(shè)計(jì)中，每個(gè)代碼段都是在”function”之上建立的，這與傳統(tǒng)的OOP建立在”class”之上是不同的。一個(gè)函數(shù)只是對(duì)輸入的展現(xiàn)的一種操作。一個(gè)函數(shù)只是接收一些輸入，然后返回一些輸出，其他的都是隱藏起來(lái)的。在函數(shù)型程序設(shè)計(jì)中，你通過(guò)在一個(gè)函數(shù)中調(diào)用其他的函數(shù)來(lái)完成程序的輸入與輸出。這通常都沒(méi)有可以處

3、理輸入、存儲(chǔ)數(shù)據(jù)以及一系列的狀態(tài)更新的那一層。函數(shù)就像一個(gè)數(shù)值一樣，可以作為參數(shù)傳遞給其他函數(shù)。javascript與函數(shù)型程序設(shè)計(jì)需要明確的一個(gè)事實(shí)是：js并不是像F#那樣真正的函數(shù)型程序設(shè)計(jì)語(yǔ)言，雖然他有一些函數(shù)型程序設(shè)計(jì)模式的特性。利用這些特性，你也可以用js做很好的工作。到今天為止，使用jQuery就是這種模式最廣泛的應(yīng)用了。匿名函數(shù)是函數(shù)型程序設(shè)計(jì)的精華之所在。匿名函數(shù)是lambda計(jì)算式的另一種形式，一種可以適配經(jīng)流行的編碼風(fēng)格。123function (x,yreturn x + y;普通函數(shù)和匿名的函數(shù)的唯一區(qū)別就在于名字。在函數(shù)的上下文中，當(dāng)你只是需要函數(shù)的返回值作為參數(shù)來(lái)使

4、用的時(shí)候，并不是非得要給他一個(gè)函數(shù)名。通過(guò)下面這個(gè)例子我們來(lái)看看：123456789101112131415161718/ 一個(gè)用來(lái)計(jì)算和的函數(shù)var CalcTotal = function(x, y return x + y;/ 增加稅率var AddTaxes = function(x return x * 1.2;/ 最終的計(jì)算函數(shù)var CalcTotalPlusTaxes = function (fnCalcTotal, fnAddTaxes, x, y return fnAddTaxes(fnCalcTotal(x, y;/ 執(zhí)行var result = CalcTotalPlu

5、sTaxes(CalcTotal, AddTaxes, 40, 60;alert(result;需要注意的是，你也可以使用匿名函數(shù)，而不是非得通過(guò)一個(gè)中間變量來(lái)傳遞給最終的計(jì)算式。123alert(function(xreturn x * 1.2(100;將匿名函數(shù)看做一個(gè)變量，可以很輕松的將數(shù)據(jù)和特性合并在一起。這也給你了一個(gè)機(jī)會(huì)去試驗(yàn)一些其他的設(shè)計(jì)原則。當(dāng)高一級(jí)的模塊（無(wú)論對(duì)象還是函數(shù)）需要低一級(jí)的模塊提供的返回值的時(shí)候，就可以將低一級(jí)的模塊直接當(dāng)做參數(shù)傳過(guò)去。很多情況下，這會(huì)提高函數(shù)參數(shù)的可讀性，并且讓代碼更優(yōu)雅一些，當(dāng)然，也會(huì)讓你在處理復(fù)雜事物的時(shí)候更加得心應(yīng)手。jQuery和函數(shù)型程

6、序設(shè)計(jì)jQuery在函數(shù)型程序設(shè)計(jì)方面吸引了人們極大的關(guān)注。整個(gè)jQuery庫(kù)都是基于jquery對(duì)象或者說(shuō)$。$是DOM元素的一個(gè)封裝，DOM元素也可以通過(guò)$(表達(dá)式傳遞進(jìn)去。另外，jQuery支持鏈?zhǔn)讲僮鳎恳粋€(gè)函數(shù)運(yùn)行之后都會(huì)返回同一個(gè)jquery對(duì)象。jQuery非常高效，因?yàn)槟憧梢栽谥饕ぷ魇遣僮鱀OM元素的WEB編程環(huán)境下最大限度的發(fā)揮出函數(shù)型程序設(shè)計(jì)的威力。你也許是jQuery的粉絲，并且覺(jué)得這種函數(shù)式的操作非常贊。但是，這不是需要完全把這種編程模式到處使用的理由。我們通過(guò)下面這個(gè)jQuery源碼來(lái)看個(gè)例子：12345678jQuery.fn = jQtotype

7、 = init: function( selector, context . ,size: function( return this.length; ,each: function( callback, args return jQuery.each( this, callback, args ; ,ready: function( fn . :可以看到，jQuery對(duì)象有他自己的原型，也有一些自有的方法：比如size和each。更有意思的是，當(dāng)你寫jQuery的插件的時(shí)候，你只是給通過(guò)添加一個(gè)函數(shù)擴(kuò)展了原型方法。至此，所有高效的js編程，都是兩種模式混合的結(jié)果。當(dāng)然jQuery中函數(shù)型的模

8、式更加明顯一些。javascript中的對(duì)象真正面向?qū)ο缶幊讨械膶?duì)象與javascript中的對(duì)象有一個(gè)很明顯的不同。在面向?qū)ο蟮恼Z(yǔ)言中，類是你要使用的對(duì)象的藍(lán)本。在javascript中，你所使用的對(duì)象的藍(lán)本是一個(gè)數(shù)據(jù)字典或者一個(gè)函數(shù)。當(dāng)你在js中創(chuàng)建了一個(gè)對(duì)象，你就擁有一個(gè)你可以填進(jìn)去任何數(shù)據(jù)的空的數(shù)據(jù)字典。之前說(shuō)過(guò)，通過(guò)一些方法，你可以創(chuàng)建一些自定義的對(duì)象或者繼承自現(xiàn)有的對(duì)象。這只在js中有效。當(dāng)你需要通過(guò)添加中間的轉(zhuǎn)化來(lái)接近真正的面向?qū)ο笳Z(yǔ)言的時(shí)候，在js中有兩種辦法：閉包和原型。在講述那兩種辦法之前，我們先來(lái)講講js中的對(duì)象類型和他的用法。你可以通過(guò)new關(guān)鍵字來(lái)創(chuàng)建一個(gè)空的對(duì)象，然

9、后你可以給這個(gè)對(duì)象添加進(jìn)去你想要的內(nèi)容：123456789101112131415161718var person = new Object(;person.Name = Dino;person.LastName = Esposito;person.BirthDate = new Date(1979,10,17person.getAge = function( var today = new Date(;var thisDay = today.getDate(;var thisMonth = today.getMonth(;var thisYear = today.getFullYear(;v

10、ar age = thisYear-this.BirthDate.getFullYear(-1;if (thisMonth this.BirthDate.getMonth(age = age +1;elseif (thisMonth = this.BirthDate.getMonth( &thisDay = this.BirthDate.getDate(age = age +1;return age;我們現(xiàn)在擁有一個(gè)名為person的對(duì)象，但是沒(méi)有Person對(duì)象。在js中，所有的原聲對(duì)象都有一個(gè)只讀的prototype屬性。通過(guò)這個(gè)屬性，你可以用來(lái)提供一些函數(shù)，這些函數(shù)在使用new關(guān)鍵字的時(shí)

11、候，新生成的對(duì)象可以與原對(duì)象共享這些方法。下面有兩種方法可以在js中實(shí)現(xiàn)面向?qū)ο缶幊?。通過(guò)閉包實(shí)現(xiàn)面向?qū)ο箝]包是編程語(yǔ)言中的一個(gè)基本概念。在js中，閉包是指那些擁有同樣上下文的變量和方法的一個(gè)函數(shù)。下面這個(gè)例子就是使用閉包來(lái)模擬一個(gè)Person類：1234567891011121314151617181920var Person = function(name, lastname, birthdatethis.Name = name;this.LastName = lastname;this.BirthDate = birthdate;this.getAge = function( var t

12、oday = new Date(;var thisDay = today.getDate(;var thisMonth = today.getMonth(;var thisYear = today.getFullYear(;var age = thisYear-this.BirthDate.getFullYear(-1;if (thisMonth this.BirthDate.getMonth(age = age +1;elseif (thisMonth = this.BirthDate.getMonth( &thisDay = this.BirthDate.getDate(age = age

13、 +1;return age;可以看出，閉包就是父類的構(gòu)造函數(shù)。在閉包模式中，構(gòu)造器包含類成員的聲明，并且這些成員都是封裝起來(lái)的。另外，成員都是基于實(shí)例的，所以會(huì)消耗內(nèi)存。如何使用呢：12var p = new Person(Rock,ux,new Date(;alert( + is + p.getAge(;閉包模式是完全封裝的，僅此而已。原型模式的面向?qū)ο蠓椒ㄍㄟ^(guò)js中prototype對(duì)象，你可以定義一個(gè)類的結(jié)構(gòu)。下面這個(gè)例子用來(lái)說(shuō)明怎樣避免使用閉包來(lái)重寫Person類。12345678910111213141516171819202122232425262728/ 構(gòu)造器va

14、r Person = function(name, lastname, birthdatethis.initialize(name, lastname, birthdate;/ 成員Ptotype.initialize(name, lastname, birthdatethis.Name = name;this.LastName = lastname;this.BirthDate = birthdate;Ptotype.getAge = function(var today = new Date(;var thisDay = today.getDate(;v

15、ar thisMonth = today.getMonth(;var thisYear = today.getFullYear(;var age = thisYear-this.BirthDate.getFullYear(-1;if (thisMonth this.BirthDate.getMonth(age = age +1;elseif (thisMonth = this.BirthDate.getMonth( &thisDay = this.BirthDate.getDate(age = age +1;return age;在原型模式下面，構(gòu)造器和成員之間結(jié)構(gòu)清晰，但是構(gòu)造函數(shù)是必須的。

16、這里并沒(méi)有私有成員，var關(guān)鍵字可以讓其只在閉包中有效。你可以通過(guò)定義setter/getter來(lái)操作你需要的屬性，但是這些屬性在類外面也是可以直接訪問(wèn)修改的。你可以通過(guò)一些特殊的操作（比如添加前綴）來(lái)定義私有變量。只是一種辦法而已。原型模式可以很簡(jiǎn)單的實(shí)現(xiàn)繼承：12345Developer = function Developer(name, lastname, birthdatethis.initialize(name, lastname, birthdate;Dtotype = new Person(;需要注意的是，你必須通過(guò)使用this關(guān)鍵字來(lái)訪問(wèn)原型中的相關(guān)成

17、員方法。閉包還是原型？在原型模式中，所有的成員都是共享的。所以，相比而言，內(nèi)存的開銷要小一些。除去語(yǔ)法方面的不同，通過(guò)原型模式定義的類更加接近經(jīng)典意義上的面向?qū)ο笳Z(yǔ)言。閉包還是原型的選擇還要從性能和瀏覽器的兼容性來(lái)考慮。原型模式的加載速度不錯(cuò)，而且在Firefox中性能也很好。（相比而言，閉包模式在IE下面的加載更快一些。）原型模式對(duì)于智能感知支持不錯(cuò)，這樣在一些IDE中（比如VS）就能得到很好的工具支持。原型模式下，你不必通過(guò)創(chuàng)建一個(gè)實(shí)例來(lái)查看類型信息，閉包模式下就不行。最后，調(diào)試的時(shí)候，原型模式可以方便的訪問(wèn)私有成員，閉包模式下面得多幾步操作才行。舉個(gè)例子，微軟的ajax庫(kù)使用的就是原型模式（閉包模式從未被考慮）。結(jié)論Javascript并不是純粹的函數(shù)型或者面向?qū)ο蟮恼Z(yǔ)言。但是他從兩種語(yǔ)言都有借鑒，所以你需要做好一些準(zhǔn)備。如今，Javascript對(duì)于編寫客戶端的網(wǎng)頁(yè)和移動(dòng)應(yīng)用程序來(lái)說(shuō)必不可少。而且現(xiàn)在的腳本編寫也不像當(dāng)初