JavaScript的函數(shù)式編程基礎(chǔ)指南
引言
JavaScript是一種強(qiáng)大的,卻被誤解的編程語言。一些人喜歡說它是一個面向?qū)ο蟮木幊陶Z言,或者它是一個函數(shù)式編程語言。另外一些人喜歡說,它不是一個面向?qū)ο蟮木幊陶Z言,或者它不是一個函數(shù)式編程語言。還有人認(rèn)為它兼具面向?qū)ο笳Z言和函數(shù)式語言的特點,或者,認(rèn)為它既不是面向?qū)ο蟮囊膊皇呛瘮?shù)式的,好吧,讓我們先擱置那些爭論。
讓我們假設(shè)我們共有這樣的一個使命:在JavaScript語言所允許的范圍內(nèi),盡可能多的使用函數(shù)式編程的原則來編寫程序。
首先,我們需要清理下腦子里那些關(guān)于函數(shù)式編程的錯誤觀念。
在JS界被(重度)誤解的函數(shù)式編程
顯然有相當(dāng)一批開發(fā)者一天到晚的以函數(shù)式范式的方式使用JavaScript。我還是要說有更大量的JavaScript開發(fā)者,并不真正理解那佯做的真正意義。
我確信,導(dǎo)致這種局面是因為很多用于服務(wù)端的web開發(fā)語言都源自C語言,而C語言,很顯然不是一種函數(shù)式編程語言。
似乎有兩個層級的混亂,第一個層級的混亂我們用下面這個在jQuery中經(jīng)常會用到的例子來說明:
$(".signup").click(function(event){ $("#signupModal").show(); event.preventDefault(); });
嘿,仔細(xì)看。我傳遞一個匿名函數(shù)作為參數(shù),這在JavaScript世界里被稱作眾所周知“CallBack”(回調(diào))函數(shù)。
真有人會認(rèn)為這就是函數(shù)式編程嗎?根本不是!
這個例子展示了一個函數(shù)式語言的關(guān)鍵特性:函數(shù)作為參數(shù)。另一方面,這個3行代碼的例子也違背了幾乎所有其他的函數(shù)式編程范式。
第二個層級的混亂有點微妙。讀到這里,一些追求潮流的JS開發(fā)者在暗自思考。
好吧,廢話!但是我已經(jīng)知道了所有關(guān)于函數(shù)式編程的知識與技能。我在我所有的項目上使用Underscore.js。
Underscore.js 是一個廣受歡迎的JavaScript庫,到處都在使用。舉個例子,我有一組單詞,我需要獲得一個集合,集合里的每個元素是各個單詞的頭兩個字母。用Underscore.js實現(xiàn)這個相當(dāng)簡單:
var firstTwoLetters = function(words){ return _.map(words,function(word){ return _.first(word,2); }); };
看!看JavaScript巫術(shù)。我正在使用這些高級的函數(shù)式應(yīng)用函數(shù),像_.map 和 _.first。你還有什么要說的,利蘭(譯注:作者Leland)?
盡管underscore 和 像_.map這樣的函數(shù)是非常有價值的函數(shù)式范式,但是像這個例子中所采用的組織代碼的方法看起來…冗長而且對于我來說太難于理解。我們真的需要這樣做嗎?
如果開始思考的時候多一點“函數(shù)式”的思維,可能我們能夠把上面的例子改成這樣:
// ...一點魔法 var firstTwoLetters = map(first(2));
仔細(xì)想想,在1行代碼中包含了和上面5行代碼同樣的信息。words 和word 僅僅是參數(shù)/占位符。這個方法的核心是用一種更明顯的方式組合map函數(shù),first函數(shù),和常量2。
JavaScript是函數(shù)式編程語言嗎?
沒有神奇的公式能夠判定一種語言是不是“函數(shù)式”語言。有些語言很明顯就是函數(shù)式的,就像另外一些語言很明顯不是函數(shù)式的,但是有大量語言的是模棱兩可的中間派。
于是這里給出一些常用的、重要的函數(shù)式語言的“配料”(JavaScript能實現(xiàn)用粗體標(biāo)志)
- 函數(shù)是“第一等公民”
- 函數(shù)能夠返回函數(shù)
- 詞法上支持閉包
- 函數(shù)要“純粹”
- 可靠遞歸
- 沒有變異狀態(tài)
這決不是一個排它的列表,但是我們至少要逐個討論Javascript中最重要的三個特性,它們支撐我們可以用函數(shù)式的方式來編寫程序。
讓我們逐個詳細(xì)的了解下:
函數(shù)是“第一等公民”
這條可能是在所有的配料中最明顯的,并且可能是在很多現(xiàn)代編程語言中最常見到的。
在JavaScript局部變量是通過var關(guān)鍵字來定義的。
var foo = "bar";
JavaScript中把函數(shù)以局部變量的方式定義是非常容易做到的。
var add = function (a, b) { return a + b; }; var even = function (a) { return a % 2 === 0; };
這些都是事實,變量:變量add和變量even通過被賦值的方式,與函數(shù)定義建立引用關(guān)系,這種引用關(guān)系是在任何時候如果需要是可以被改變的。
// capture the old version of the function var old_even = even; // assign variable `even` to a new, different function even = function (a) { return a & 1 === 0; };
當(dāng)然,這沒有什么特別的。但是成為“第一等公民”這個重要的特性使得我們能夠把函數(shù)以參數(shù)的方式傳遞給另一個函數(shù)。舉個例子:
var binaryCall = function (f, a, b) { return f(a, b); };
這是一個函數(shù),他接受了一個二元函數(shù)f,和兩個參數(shù)a,b,然后調(diào)用這個二元函數(shù)f,該二元函數(shù)f以a、b為輸入?yún)?shù)。
add(1,2) === binaryCall(add, 1, 2); // true
這樣做看起來有點笨拙,但是當(dāng)把接下來的函數(shù)式編程“配料”合并考慮的時候,牛叉之處就顯而易見了…
函數(shù)能返回函數(shù)(換個說法“高階函數(shù)”)
事情開始變的酷起來。盡管開始比較簡單。函數(shù)最終以新的函數(shù)作為返回值。舉個例子:
var applyFirst = function (f, a) { return function (b) { return f(a, b); }; };
這個函數(shù)(applyFirst)接受一個二元函數(shù)作為其中一個參數(shù),可以把第一個參數(shù)(即二元函數(shù))看作是這個applyFirst函數(shù)的“部分操作”,然后返回一個一元(一個參數(shù))函數(shù),該一元函數(shù)被調(diào)用的時候返回外部函數(shù)的第一個參數(shù)(f)的二元函數(shù)f(a, b)。返回兩個參數(shù)的二元函數(shù)。
讓我們再談?wù)勔恍┖瘮?shù),例如mult(乘法)函數(shù):
var mult = function(a, b) { return a * b; };
依循mult(乘法)函數(shù)的邏輯,我們可以寫一個新的函數(shù)double(乘方):
var double = applyFirst(mult, 2); double(32); // 64 double(7.5); // 15
這就是偏函數(shù),在FP中經(jīng)常會用到。(譯注:FP全名為 Functional Programming 函數(shù)式程序設(shè)計 )
我們當(dāng)然可以像applyFirst那樣定義函數(shù):
var curry2 = function (f) { return function (a) { return function (b) { return f(a, b); }; }; };
現(xiàn)在,我想要一個double(乘方)函數(shù),我們換種方式做:
var double = curry2(mult)(2);
這種方式被稱作“函數(shù)柯里化”。有點類似partial application(偏函數(shù)應(yīng)用),但是更強(qiáng)大一點。
準(zhǔn)確的說,函數(shù)式編程之所以強(qiáng)大,大部分因于此。簡單和易理解的函數(shù)成為我們構(gòu)筑軟件的基礎(chǔ)構(gòu)件。當(dāng)擁有高水平的組織能力、很少重用的邏輯的時候,函數(shù)能夠被組合和混合在一起用來表達(dá)出更復(fù)雜的行為。
高階函數(shù)可以得到的樂趣更多。讓我們看兩個例子:
1.翻轉(zhuǎn)二元函數(shù)參數(shù)順序
// flip the argument order of a function var flip = function (f) { return function (a, b) { return f(b, a); }; }; divide(10, 5) === flip(divide)(5, 10); // true
2.創(chuàng)建一個組合了其他函數(shù)的函數(shù)
// return a function that's the composition of two functions... // compose (f, g)(x) -> f(g(x)) var compose = function (f1, f2) { return function (x) { return f1(f2(x)); }; }; // abs(x) = Sqrt(x^2) var abs = compose(sqrt, square); abs(-2); // 2
這個例子創(chuàng)建了一個實用的函數(shù),我們可以使用它來記錄下每次函數(shù)調(diào)用。
var logWrapper = function (f) { return function (a) { console.log('calling "' + f.name + '" with argument "' + a); return f(a); }; }; var app_init = function(config) { /* ... */ }; if(DEBUG) { // log the init function if in debug mode app_init = logWrapper(app_init); } // logs to the console if in debug mode app_init({ /* ... */ });
詞法閉包+作用域
我深信理解如何有效利用閉包和作用域是成為一個偉大JavaScript開發(fā)者的關(guān)鍵。
那么…什么是閉包?
簡單的說,閉包就是內(nèi)部函數(shù)一直擁有父函數(shù)作用域的訪問權(quán)限,即使父函數(shù)已經(jīng)返回。<譯注4>
可能需要個例子。
var createCounter = function () { var count = 0; return function () { return ++count; }; }; var counter1 = createCounter(); counter1(); // 1 counter1(); // 2 var counter2 = createCounter(); counter2(); // 1 counter1(); // 3
一旦createCounter函數(shù)被調(diào)用,變量count就被分配一個新的內(nèi)存區(qū)域。然后,返回一個函數(shù),這個函數(shù)持有對變量count的引用,并且每次調(diào)用的時候執(zhí)行count加1操作。
注意從createCounter函數(shù)的作用域之外,我們是沒有辦法直接操作count的值。Counter1和Counter2函數(shù)可以操作各自的count變量的副本,但是只有在這種非
常具體的方式操作count(自增1)才是被支持的。
在JavaScript,作用域的邊界檢查只在函數(shù)被聲明的時候。逐個函數(shù),并且僅僅逐個函數(shù),擁有它們各自的作用域表。(注:在ECMAScript 6中不再是這樣,因為let的引入)
一些進(jìn)一步的例子來證明這論點:
// global scope var scope = "global"; var foo = function(){ // inner scope 1 var scope = "inner"; var myscope = function(){ // inner scope 2 return scope; }; return myscope; }; console.log(foo()()); // "inner" console.log(scope); // "global"
關(guān)于作用域還有一些重要的事情需要考慮。例如,我們需要創(chuàng)建一個函數(shù),接受一個數(shù)字(0-9),返回該數(shù)字相應(yīng)的英文名稱。
簡單點,有人會這樣寫:
// global scope... var names = ['zero','one','two','three','four','five','six','seven','eight','nine']; var digit_name1 = function(n){ return names[n]; };
但是缺點是,names定義在了全局作用域,可能會意外的被修改,這樣可能致使digit_name1函數(shù)所返回的結(jié)果不正確。
那么,這樣寫:
var digit_name2 = function(n){ var names = ['zero','one','two','three','four','five','six','seven','eight','nine']; return names[n]; };
這次把names數(shù)組定義成函數(shù)digit_name2局部變量.這個函數(shù)遠(yuǎn)離了意外風(fēng)險,但是帶來了性能損失,由于每次digit_name2被調(diào)用的時候,都將重新為names數(shù)組定義和分配空間。換個例子如果names是個非常大的數(shù)組,或者可能digit_name2函數(shù)在一個循環(huán)中被調(diào)用多次,這時候性能影響將非常明顯。
// "An inner function enjoys that context even after the parent functions have returned." var digit_name3 = (function(){ var names = ['zero','one','two','three','four','five','six','seven','eight','nine']; return function(n){ return names[n]; }; })();
這時候我們面臨第三個選擇。這里我們實現(xiàn)立即調(diào)用的函數(shù)表達(dá)式,僅僅實例化names變量一次,然后返回digit_name3函數(shù),在 IIFE (Immediately-Invoked-Function-Expression 立即執(zhí)行表達(dá)式)的閉包函數(shù)持有names變量的引用。
這個方案兼具前兩個的優(yōu)點,回避了缺點。搞定!這是一個常用的模式用來創(chuàng)建一個不可被外部環(huán)境修改“private”(私有)狀態(tài)。
相關(guān)文章
JavaScript中String.match()方法的使用詳解
這篇文章主要介紹了JavaScript中String.match()方法的使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06JavaScript DOM學(xué)習(xí)第一章 W3C DOM簡介
文檔對象模式(Document Object Model DOM)用來描述HTML頁面中那些輸入框、圖片、段落等等元素與最頂級的結(jié)構(gòu)document之間的關(guān)系。用適當(dāng)?shù)姆椒▉磉x取這些元素,我們就可以改變他們。2010-02-02關(guān)于JavaScript對象類型之Array及Object
這篇文章主要介紹了關(guān)于JavaScript對象類型之Array及Object,Array 類型是 ECMAScript 中最常用的類型了。而且,ECMAScript 中的數(shù)組與其他多數(shù)語言中的數(shù)組有著相當(dāng)大的區(qū)別,需要的朋友可以參考下2023-05-05詳解JavaScript正則表達(dá)式中的global屬性的使用
這篇文章主要介紹了詳解JavaScript正則表達(dá)式中的global屬性的使用,是JS學(xué)習(xí)進(jìn)階中的重要知識點,需要的朋友可以參考下2015-06-06