JavaScript ES6函數式編程（一）：閉包與高階函數

  • 2019 年 10 月 20 日
  • 筆記

函數式編程的歷史

函數的第一原則是要小，第二原則則是要更小 —— ROBERT C. MARTIN

解釋一下上面那句話，就是我們常說的一個函數只做一件事，比如：將字元串首字母和尾字母都改成大寫，我們此時應該編寫兩個函數。為什麼呢？為了更好的復用，這樣做保證了函數更加的顆粒化。

早在 1950 年代，隨著 Lisp 語言的創建，函數式編程（ Functional Programming，簡稱 FP）就已經開始出現在大家視野。而直到近些年，函數式以其優雅，簡單的特點開始重新風靡整個編程界，主流語言在設計的時候無一例外都會更多的參考函數式特性（ Lambda 表達式，原生支援 map ，reduce ……），Java8 開始支援函數式編程。

而在前端領域，我們同樣能看到很多函數式編程的影子：Lodash.js、Ramda.js庫的廣泛使用，ES6 中加入了箭頭函數，Redux 引入 Elm 思路降低 Flux 的複雜性，React16.6 開始推出 React.memo()，使得 pure functional components 成為可能，16.8 開始主推 Hooks，建議使用 pure functions 進行組件編寫……

這些無一例外的說明，函數式編程這種古老的編程範式並沒有隨著歲月而褪去其光彩，反而愈加生機勃勃。

什麼是函數式編程

上面我們了解了函數式編程的歷史，確定它是個很棒的東西。接下來，我們要去了解一下什麼是函數式編程？

其實函數我們從小就學，什麼一元函數（f(x) = 3x），二元函數……根據學術上函數的定義，函數即是一種描述集合和集合之間的轉換關係，輸入通過函數都會返回有且只有一個輸出值。

所以，函數實際上是一個關係，或者說是一種映射，而這種映射關係是可以組合的，一旦我們知道一個函數的輸出類型可以匹配另一個函數的輸入，那他們就可以進行組合。

在編程的世界裡，我們需要處理其實也只有「數據」和「關係」，而「關係」就是函數，「數據」就是要傳入的實參。我們所謂的編程工作也不過就是在找一種映射關係，比如：將字元串首字母轉為大寫。一旦關係找到了，問題就解決了，剩下的事情，就是讓數據流過這種關係，然後轉換成另一個數據返回給我們。

想像一個流水線車間的工作過程，把輸入當做原料，把輸出當做產品，數據可以不斷的從一個函數的輸出可以流入另一個函數輸入，最後再輸出結果，這不就是一套流水線嘛？

所以，現在你明確了函數式編程是什麼了吧？它其實就是強調在編程過程中把更多的關注點放在如何去構建關係。通過構建一條高效的建流水線，一次解決所有問題。而不是把精力分散在不同的加工廠中來回奔波傳遞數據。

函數式編程的特點

  • 函數是一等公民

根據維基百科，程式語言中一等公民的概念是由英國電腦學家Christopher Strachey提出來的，時間則早在上個世紀60年代，那個時候還沒有個人電腦，沒有互聯網，沒有瀏覽器，也沒有JavaScript。並且當時也沒給出清晰的定義。

關於一等公民，我找到一個權威的定義，來自於一本書《Programming Language Pragmatics》，這本書是很多大學的程式語言設計的教材。

In general, a value in a programming language is said to have first-class status if it can be passed as a parameter, returned from a subroutine, or assigned into a variable.

也就是說，在程式語言中，一等公民可以作為函數參數，可以作為函數返回值，也可以賦值給變數。

例如，字元串在幾乎所有程式語言中都是一等公民，字元串可以做為函數參數，字元串可以作為函數返回值，字元串也可以賦值給變數。

對於各種程式語言來說，函數就不一定是一等公民了，比如Java 8之前的版本。

對於JavaScript來說，函數可以賦值給變數，也可以作為函數參數，還可以作為函數返回值，因此JavaScript中函數是一等公民。

  • 聲明式編程 (Declarative Programming)

通過上面的例子可以看出來，函數式編程大多時候都是在聲明我需要做什麼，而非怎麼去做。這種編程風格稱為聲明式編程 。

// 比如：我們要列印數組中的每個元素  // 1. 命令式編程  let arr = [1, 2, 3];  for (let i = 0, len = arr.length; i < len; i++) {    console.log(arr[i])  }    // 2. 聲明式編程  let arr = [1, 2, 3];  arr.forEach(item => {    console.log(item)  })    /*  * 相對於命令式編程的 for 循環拿到每個元素，聲明式編程不需要自己去找每個元素  * 因為 forEach 已經幫我們拿到了，就是 item，直接列印出來就行  */

這樣有個好處是程式碼的可讀性特別高，因為聲明式程式碼大多都是接近自然語言的，同時，它解放了大量的人力，因為它不關心具體的實現，因此它可以把優化能力交給具體的實現，這也方便我們進行分工協作。

  • 惰性執行（Lazy Evaluation）

所謂惰性執行指的是函數只在需要的時候執行，即不產生無意義的中間變數。

  • 無狀態和數據不可變 (Statelessness and Immutable data)

這是函數式編程的核心概念：

數據不可變：它要求你所有的數據都是不可變的，這意味著如果你想修改一個對象，那你應該創建一個新的對象用來修改，而不是修改已有的對象。
無狀態： 主要是強調對於一個函數，不管你何時運行，它都應該像第一次運行一樣，給定相同的輸入，給出相同的輸出，完全不依賴外部狀態的變化。

  • 沒有副作用(side effect)

副作用，一般指完成分內的事情之後還帶來了不好的影響。在函數中，最常見的副作用就是隨意修改外部變數。由於js對象傳遞的是引用地址，這很容易帶來bug。

例如： map 函數的本來功能是將輸入的數組根據一個函數轉換，生成一個新的數組。而在 JS 中，我們經常可以看到下面這種對 map 的 「錯誤」 用法，把 map 當作一個循環語句，然後去直接修改數組中的值。

const list = [...];  // 修改 list 中的 type 和 age  list.map(item => {    item.type = 1;    item.age++;  })

傳遞引用一時爽，程式碼重構火葬場

這樣函數最主要的輸出功能沒有了，變成了直接修改了外部變數，這就是它的副作用。而沒有副作用的寫法應該是：

const list = [...];  // 修改 list 中的 type 和 age  const newList = list.map(item => ({...item, type: 1, age:item.age + 1}));

保證函數沒有副作用，一來能保證數據的不可變性，二來能避免很多因為共享狀態帶來的問題。當你一個人維護程式碼時候可能還不明顯，但隨著項目的迭代，項目參與人數增加，大家對同一變數的依賴和引用越來越多，這種問題會越來越嚴重。最終可能連維護者自己都不清楚變數到底是在哪裡被改變而產生 Bug。

  • 純函數 (pure functions)

函數式編程最關注的對象就是純函數，純函數的概念有兩點：

不依賴外部狀態（無狀態）： 函數的的運行結果不依賴全局變數，this 指針，IO 操作等。
沒有副作用（數據不變）： 不修改全局變數，不修改入參。

所以純函數才是真正意義上的 「函數」， 它也遵循引用透明性——相同的輸入，永遠會得到相同的輸出。

我們這麼強調使用純函數，純函數的意義是什麼？

便於測試和優化：這個意義在實際項目開發中意義非常大，由於純函數對於相同的輸入永遠會返回相同的結果，因此我們可以輕鬆斷言函數的執行結果，同時也可以保證函數的優化不會影響其他程式碼的執行。這十分符合測試驅動開發 TDD（Test-Driven Development ) 的思想，這樣產生的程式碼往往健壯性更強。

可快取性：因為相同的輸入總是可以返回相同的輸出，因此，我們可以提前快取函數的執行結果，有很多庫有所謂的 memoize 函數，下面以一個簡化版的 memoize 為例，這個函數就能快取函數的結果，對於像 fibonacci 這種計算，就可以起到很好的快取效果。

  function memoize(fn) {      const cache = {};      return function() {        const key = JSON.stringify(arguments);        var value = cache[key];        if(!value) {          value = [fn.apply(null, arguments)];  // 放在一個數組中，方便應對 undefined，null 等異常情況          cache[key] = value;        }        return value[0];      }    }      const fibonacci = memoize(n => n < 2 ? n: fibonacci(n - 1) + fibonacci(n - 2));    console.log(fibonacci(4))  // 執行後快取了 fibonacci(2), fibonacci(3),  fibonacci(4)    console.log(fibonacci(10)) // fibonacci(2), fibonacci(3),  fibonacci(4) 的結果直接從快取中取出，同時快取其他的

閉包

定義：一個能夠讀取其他函數內部變數的函數，實質是變數的解析過程（由內而外）

閉包是ES中一個離不開的話題，而且也是是一個難懂又必須搞明白的概念！說起閉包，就不得不提與它密切相關的變數作用域和變數的生命周期。下面來看下：

變數作用域

變數作用域分為兩類：全局作用域和局部作用域。

  • 編寫在script標籤中的變數或者沒用var關鍵字聲明的變數，就代表全局變數，在頁面的任意位置都可以訪問到
  • 在函數中聲明變數帶有var關鍵字的即是局部變數，局部變數只能在函數內才能訪問到
function fn() {      var a = 1;     // a為局部變數      console.log(a);  // 1  }  fn();  console.log(a);     // a is not defined  外部訪問不到內部的變數

上面程式碼展示了在函數中聲明的局部變數a在函數外部拿不到。可是我們就想要在函數外拿到它，怎麼辦？下面就要看發揮閉包的威力了。

函數可以創造函數作用域，在函數作用域中如果要查找一個變數的時候，如果在該函數內沒有聲明這個變數，就會向該函數的外層繼續查找，一直查到全局變數為止。

所以變數的查找是由內而外的，這也形成了所謂的作用域鏈。

var a = 7;  function outer() {      var b = 8;      function inner() {          var c = 9;          alert(b);          alert(a);      }      inner();      alert(c);   // c is not defined  }  outer();    // 調用函數

還是最開始的函數，利用作用域鏈，我們試著去拿到a，改造一下fn函數：

function fn() {      var a = 1;     // a為局部變數      return function() {          console.log(a);      }  }  var fn2 = fn();  fn2();      // 1

理解了變數作用域，順著這條作用域鏈，再來回顧一下閉包的定義：閉包就是能夠讀取其他函數內部變數的函數，實質是變數的解析過程（由內而外）

變數生命周期

理解了變數作用域，再來看看變數的生命周期，直白一點就是它能在程式中存活多久。

  • 對於全局變數而言，它的生命周期機就是永久的，除非我們手動銷毀它（這一點也是很有必要的，防止記憶體溢出）
  • 對於在函數中通過var聲明的變數而言，就沒那麼幸運了。當函數執行完畢後，它也就沒什麼利用價值了，隨之被瀏覽器的垃圾處理機制當垃圾處理掉了
    比如下面這段程式碼：
var forever = 'i am forever exist'  // 全局變數，永生  function fn() {      var a = 123;    // fn執行完畢後，變數a就將被銷毀了      console.log(a);  }  fn();

函數執行完畢，內部的變數a就被無情的銷毀了。那麼我們有沒有辦法拯救這個變數呢？答案是肯定的，救星來了——閉包

閉包的創建

function outFn() {      var i = 1;      function inFn () {          return ++i      }      return inFn;  }  var fn = outFn(); // 此處創建了一個閉包  fn();   // 2  fn();   // 3  fn();   // 4

上面的程式碼創建了一個閉包，有兩個特點：

  1. 函數inFn嵌套在函數outFn內部
  2. 函數outFn返回內部函數inFn

在執行完var fn = outFn();後，變數 fn 實際上是指向了函數 inFn，再執行 fn( ) 後就會返回 i 的值（第一次為1）。這段程式碼其實就創建了一個閉包，這是因為函數 outFn 外的變數 fn 引用了函數 outFn 內的函數inFn。也就是說，當函數 outFn 的內部函數 inFn 被函數 outFn 外的一個變數 fn 引用的時候，就創建了一個閉包（函數內部的變數 i 被保存到記憶體中，不會被立即銷毀）。

參考鏈接：
閉包的創建
閉包和記憶體

高階函數

定義：高階函數就是接受函數作為參數或者返回函數作為輸出的函數。

下面分兩種情況講解，搞清這兩種應用場景，這將有助於理解並運用高階函數。

函數作為參數傳入

函數作為參數傳入最常見的就是回調函數。例如：在 ajax 非同步請求的過程中，回調函數使用的非常頻繁。因為非同步執行不能確定請求返回的時間，將callback回調函數當成參數傳入，待請求完成後執行 callback 函數。

$.ajax({    url: 'http://musicapi.leanapp.cn/search',  // 以網易雲音樂為例    data: {        keywords    },    success: function (res) {        callback && callback(res.result.songs);    }  })

函數作為返回值輸出

函數作為返回值輸出的應用場景那就太多了，這也體現了函數式編程的思想。其實從閉包的例子中我們就已經看到了關於高階函數的相關內容了。

還記得在我們去判斷數據類型的時候，我們都是通過Object.prototype.toString來計算的，每個數據類型之間只是'[object XXX]'不一樣而已。

下面我們封裝一個高階函數，實現對不同類型變數的判斷：

function isType (type) {      return function (obj) {          return Object.prototype.toString.call(obj) === `[object ${type}]      }  }    const isArray = isType('Array'); // 判斷數組類型的函數  const isString = isType('String'); // 判斷字元串類型的函數  console.log(isArray([1, 2]); // true  console.log(isString({});  // false

參考鏈接：
高階函數，你怎麼那麼漂亮呢！
簡明 JavaScript 函數式編程——入門篇

總結

最後總結一下這次的重點：純函數、變數作用域、閉包、高階函數。

  1. 純函數的定義：給定的輸入返回相同的輸出的函數。
  2. 變數作用域是閉包的實質。根據變數作用域向上查找的特性，閉包可以快取變數到記憶體中，函數執行完畢不會立即銷毀。
  3. 高階函數的核心是閉包，利用閉包快取一些未來會用到的變數，可以實現柯里化、偏應用…

下一節介紹柯里化、偏應用和組合…

VirMach 便宜 VPS

QNews

QNews