這篇文章主要介紹了JavaScript的函數(shù)式編程基礎指南,雖然JavaScript被許多人一再強調(diào)面向對象,但js中卻沒有類,而本文所展現(xiàn)的函數(shù)主導的js編程則同樣可以很爽,需要的朋友可以參考下

引言

JavaScript是一種強大的，卻被誤解的編程語言。一些人喜歡說它是一個面向對象的編程語言，或者它是一個函數(shù)式編程語言。另外一些人喜歡說，它不是一個面向對象的編程語言，或者它不是一個函數(shù)式編程語言。還有人認為它兼具面向對象語言和函數(shù)式語言的特點，或者，認為它既不是面向對象的也不是函數(shù)式的，好吧，讓我們先擱置那些爭論。

讓我們假設我們共有這樣的一個使命：在JavaScript語言所允許的范圍內(nèi)，盡可能多的使用函數(shù)式編程的原則來編寫程序。

首先，我們需要清理下腦子里那些關于函數(shù)式編程的錯誤觀念。

在JS界被(重度)誤解的函數(shù)式編程

顯然有相當一批開發(fā)者一天到晚的以函數(shù)式范式的方式使用JavaScript。我還是要說有更大量的JavaScript開發(fā)者，并不真正理解那佯做的真正意義。

我確信，導致這種局面是因為很多用于服務端的web開發(fā)語言都源自C語言，而C語言，很顯然不是一種函數(shù)式編程語言。

似乎有兩個層級的混亂，第一個層級的混亂我們用下面這個在jQuery中經(jīng)常會用到的例子來說明：

$(".signup").click(function(event){

  $("#signupModal").show();

  event.preventDefault();

});

嘿，仔細看。我傳遞一個匿名函數(shù)作為參數(shù)，這在JavaScript世界里被稱作眾所周知“CallBack”（回調(diào))函數(shù)。

真有人會認為這就是函數(shù)式編程嗎？根本不是！

這個例子展示了一個函數(shù)式語言的關鍵特性：函數(shù)作為參數(shù)。另一方面，這個3行代碼的例子也違背了幾乎所有其他的函數(shù)式編程范式。

第二個層級的混亂有點微妙。讀到這里，一些追求潮流的JS開發(fā)者在暗自思考。

好吧，廢話！但是我已經(jīng)知道了所有關于函數(shù)式編程的知識與技能。我在我所有的項目上使用Underscore.js。

Underscore.js 是一個廣受歡迎的JavaScript庫，到處都在使用。舉個例子，我有一組單詞，我需要獲得一個集合，集合里的每個元素是各個單詞的頭兩個字母。用Underscore.js實現(xiàn)這個相當簡單：

var firstTwoLetters = function(words){

  return _.map(words,function(word){

    return _.first(word,2);

  });

};

看！看JavaScript巫術。我正在使用這些高級的函數(shù)式應用函數(shù)，像_.map 和 _.first。你還有什么要說的，利蘭(譯注：作者Leland）？

盡管underscore 和 像_.map這樣的函數(shù)是非常有價值的函數(shù)式范式，但是像這個例子中所采用的組織代碼的方法看起來…冗長而且對于我來說太難于理解。我們真的需要這樣做嗎？

如果開始思考的時候多一點“函數(shù)式”的思維，可能我們能夠把上面的例子改成這樣：

// ...一點魔法

var firstTwoLetters = map(first(2));

仔細想想，在1行代碼中包含了和上面5行代碼同樣的信息。words 和word 僅僅是參數(shù)/占位符。這個方法的核心是用一種更明顯的方式組合map函數(shù)，first函數(shù)，和常量2。

JavaScript是函數(shù)式編程語言嗎？

沒有神奇的公式能夠判定一種語言是不是“函數(shù)式”語言。有些語言很明顯就是函數(shù)式的，就像另外一些語言很明顯不是函數(shù)式的，但是有大量語言的是模棱兩可的中間派。

于是這里給出一些常用的、重要的函數(shù)式語言的“配料”（JavaScript能實現(xiàn)用粗體標志）

1.函數(shù)是“第一等公民”

2.函數(shù)能夠返回函數(shù)

3.詞法上支持閉包

4.函數(shù)要“純粹”

5.可靠遞歸

6.沒有變異狀態(tài)

這決不是一個排它的列表，但是我們至少要逐個討論Javascript中最重要的三個特性，它們支撐我們可以用函數(shù)式的方式來編寫程序。

讓我們逐個詳細的了解下：

函數(shù)是“第一等公民”

這條可能是在所有的配料中最明顯的，并且可能是在很多現(xiàn)代編程語言中最常見到的。

在JavaScript局部變量是通過var關鍵字來定義的。

var foo = "bar";

JavaScript中把函數(shù)以局部變量的方式定義是非常容易做到的。

var add = function (a, b) { return a + b; };

var even = function (a) { return a % 2 === 0; };

這些都是事實，變量：變量add和變量even通過被賦值的方式，與函數(shù)定義建立引用關系，這種引用關系是在任何時候如果需要是可以被改變的。

// 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; };

當然，這沒有什么特別的。但是成為“第一等公民”這個重要的特性使得我們能夠把函數(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

這樣做看起來有點笨拙，但是當把接下來的函數(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ù)。

讓我們再談談一些函數(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ù)式程序設計 ）

我們當然可以像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ù)應用），但是更強大一點。

準確的說，函數(shù)式編程之所以強大，大部分因于此。簡單和易理解的函數(shù)成為我們構筑軟件的基礎構件。當擁有高水平的組織能力、很少重用的邏輯的時候，函數(shù)能夠被組合和混合在一起用來表達出更復雜的行為。

高階函數(shù)可以得到的樂趣更多。讓我們看兩個例子：

1.翻轉二元函數(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ā)者的關鍵。

那么…什么是閉包？

簡單的說，閉包就是內(nèi)部函數(shù)一直擁有父函數(shù)作用域的訪問權限，即使父函數(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的引入）

一些進一步的例子來證明這論點：

// 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"

關于作用域還有一些重要的事情需要考慮。例如，我們需要創(chuàng)建一個函數(shù)，接受一個數(shù)字（0-9），返回該數(shù)字相應的英文名稱。

簡單點，有人會這樣寫：

// 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ù)所返回的結果不正確。

那么，這樣寫：

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ù)遠離了意外風險，但是帶來了性能損失，由于每次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ù)表達式，僅僅實例化names變量一次，然后返回digit_name3函數(shù)，在 IIFE (Immediately-Invoked-Function-Expression 立即執(zhí)行表達式)的閉包函數(shù)持有names變量的引用。

這個方案兼具前兩個的優(yōu)點，回避了缺點。搞定！這是一個常用的模式用來創(chuàng)建一個不可被外部環(huán)境修改“private”（私有）狀態(tài)。