JavaScript的函數式編程基礎指南，javascript編程基礎

JavaScript的函數式編程基礎指南，javascript編程基礎

引言

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

讓我們假設我們共有這樣的一個使命：在JavaScript語言所允許的範圍內，儘可能多的使用函數式編程的原則來編寫程式。

首先，我們需要清理下腦子裡那些關於函數式編程的錯誤觀念。

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

顯然有相當一批開發人員一天到晚的以函數式範式的方式使用JavaScript。我還是要說有更大量的JavaScript開發人員，並不真正理解那佯做的真正意義。

我確信，導致這種局面是因為很多用於服務端的web開發語言都源自C語言，而C語言，很顯然不是一種函數式程式設計語言。

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

$(".signup").click(function(event){  $("#signupModal").show();  event.preventDefault();});

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

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

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

第二個層級的混亂有點微妙。讀到這裡，一些追求潮流的JS開發人員在暗自思考。

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

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

var firstTwoLetters = function(words){  return _.map(words,function(word){    return _.first(word,2);  });};

看！看JavaScript巫術。我正在使用這些進階的函數式應用函數，像_.map 和 _.first。你還有什麼要說的，利蘭(譯註：作者Leland）？

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

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

// ...一點魔法var firstTwoLetters = map(first(2));

仔細想想，在1行代碼中包含了和上面5行代碼同樣的資訊。words 和word 僅僅是參數/預留位置。這個方法的核心是用一種更明顯的方式組合map函數，first函數，和常量2。

JavaScript是函數式程式設計語言嗎？

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

於是這裡給出一些常用的、重要的函數式語言的“配料”（JavaScript能實現用粗體標誌）

• 函數是“第一等公民”
• 函數能夠返回函數
• 詞法上支援閉包
• 函數要“純粹”
• 可靠遞迴
• 沒有變異狀態

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

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

函數是“第一等公民”

這條可能是在所有的配料中最明顯的，並且可能是在很多現代程式設計語言中最常見到的。

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

var foo = "bar";

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

var add = function (a, b) { return a + b; };var even = function (a) { return a % 2 === 0; };

這些都是事實，變數：變數add和變數even通過被賦值的方式，與函數定義建立參考關聯性，這種參考關聯性是在任何時候如果需要是可以被改變的。

// capture the old version of the functionvar old_even = even;  // assign variable `even` to a new, different functioneven = function (a) { return a & 1 === 0; };

當然，這沒有什麼特別的。但是成為“第一等公民”這個重要的特性使得我們能夠把函數以參數的方式傳遞給另一個函數。舉個例子：

var binaryCall = function (f, a, b) { return f(a, b); };

這是一個函數，他接受了一個二元函數f，和兩個參數a，b，然後調用這個二元函數f，該二元函數f以a、b為輸入參數。

add(1,2) === binaryCall(add, 1, 2); // true

這樣做看起來有點笨拙，但是當把接下來的函數式編程“配料”合并考慮的時候，牛叉之處就顯而易見了…

函數能返回函數（換個說法“高階函數”）

事情開始變的酷起來。儘管開始比較簡單。函數最終以新的函數作為傳回值。舉個例子：

var applyFirst = function (f, a) {  return function (b) { return f(a, b); };};

這個函數（applyFirst）接受一個二元函數作為其中一個參數，可以把第一個參數（即二元函數）看作是這個applyFirst函數的“部分操作”，然後返回一個一元（一個參數）函數，該一元函數被調用的時候返回外部函數的第一個參數（f）的二元函數f(a, b)。返回兩個參數的二元函數。

讓我們再談談一些函數，例如mult(乘法)函數：

var mult = function(a, b) { return a * b; };

依循mult(乘法)函數的邏輯，我們可以寫一個新的函數double(乘方)：

var double = applyFirst(mult, 2); double(32); // 64double(7.5); // 15

這就是偏函數，在FP中經常會用到。（譯註：FP全名為 Functional Programming 函數式程式設計 ）

我們當然可以像applyFirst那樣定義函數：

var curry2 = function (f) { return function (a) {  return function (b) {   return f(a, b);  }; };};

現在，我想要一個double（乘方）函數，我們換種方式做：

var double = curry2(mult)(2);

這種方式被稱作“函數柯裡化”。有點類似partial application（偏函數應用），但是更強大一點。

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

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

1.翻轉二元函數參數順序

// flip the argument order of a functionvar flip = function (f) { return function (a, b) { return f(b, a); };}; divide(10, 5) === flip(divide)(5, 10); // true

2.建立一個組合了其他函數的函數

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

這個例子建立了一個實用的函數，我們可以使用它來記錄下每次函數調用。

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 modeapp_init({ /* ... */});

詞法閉包+範圍

我深信理解如何有效利用閉包和範圍是成為一個偉大JavaScript開發人員的關鍵。
那麼…什麼是閉包？

簡單的說，閉包就是內建函式一直擁有父函數範圍的存取權限，即使父函數已經返回。<譯註4>
可能需要個例子。

var createCounter = function () { var count = 0; return function () {  return ++count; };}; var counter1 = createCounter(); counter1(); // 1counter1(); // 2 var counter2 = createCounter(); counter2(); // 1counter1(); // 3

一旦createCounter函數被調用，變數count就被分配一個新的記憶體地區。然後，返回一個函數，這個函數持有對變數count的引用，並且每次調用的時候執行count加1操作。

注意從createCounter函數的範圍之外，我們是沒有辦法直接操作count的值。Counter1和Counter2函數可以操作各自的count變數的副本，但是只有在這種非

常具體的方式操作count（自增1）才是被支援的。

在JavaScript，範圍的邊界檢查只在函數被聲明的時候。逐個函數，並且僅僅逐個函數，擁有它們各自的範圍表。（註：在ECMAScript 6中不再是這樣，因為let的引入）

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

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

關於範圍還有一些重要的事情需要考慮。例如，我們需要建立一個函數，接受一個數字（0-9），返回該數字相應的英文名稱。

簡單點，有人會這樣寫：

// 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函數所返回的結果不正確。
那麼，這樣寫：

var digit_name2 = function(n){ var names = ['zero','one','two','three','four','five','six','seven','eight','nine']; return names[n];};

這次把names數組定義成函數digit_name2局部變數.這個函數遠離了意外風險，但是帶來了效能損失，由於每次digit_name2被調用的時候，都將重新為names數組定義和分配空間。換個例子如果names是個非常大的數組，或者可能digit_name2函數在一個迴圈中被調用多次，這時候效能影響將非常明顯。

// "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]; };})();

這時候我們面臨第三個選擇。這裡我們實現立即調用的函數運算式，僅僅執行個體化names變數一次，然後返回digit_name3函數，在 IIFE (Immediately-Invoked-Function-Expression 立即執行運算式)的閉包函數持有names變數的引用。
這個方案兼具前兩個的優點，迴避了缺點。搞定！這是一個常用的模式用來建立一個不可被外部環境修改“private”（私人）狀態。

您可能感興趣的文章:

• 理解javascript函數式編程中的閉包（closure）
• 探究JavaScript函數式編程的樂趣
• javascript函數式編程程式員的工具集
• 深入探討javascript函數式編程
• Javascript函數式程式設計語言
• Javascript函數式編程簡單介紹
• 淺談javascript函數式編程
• 《JavaScript函數式編程》讀後感
• javascript函數式編程執行個體分析
• JavaScript 函數式編程的原理