這些高階的函式技術，你掌握了麼

在 JavaScript 中，函式為一等公民（First Class），所謂的 “一等公民”，指的是函式與其他資料型別一樣，處於平等地位，可以賦值給其他變數，也可以作為引數，傳入另一個函式，或作為其它函式的返回值。

接下來阿寶哥將介紹與函式相關的一些技術，閱讀完本文，你將瞭解高階函式、函式組合、柯里化、偏函式、惰性函式和快取函式的相關知識。

一、高階函式

在數學和電腦科學中，高階函式是至少滿足下列一個條件的函式：

• 接受一個或多個函式作為輸入；
• 輸出一個函式。

接收一個或多個函式作為輸入，即函式作為引數傳遞。這種應用場景，相信很多人都不會陌生。比如常用的 Array.prototype.map() 和 Array.prototype.filter() 高階函式：

// Array.prototype.map 高階函式
const array = [1, 2, 3, 4];
const map = array.map(x => x * 2); // [2, 4, 6, 8]

// Array.prototype.filter 高階函式
const words = ['semlinker', 'kakuqo', 'lolo', 'abao'];
const result = words.filter(word => word.length > 5); // ["semlinker", "kakuqo"]

而輸出一個函式，即呼叫高階函式之後，會返回一個新的函式。我們日常工作中，常見的 debounce 和 throttle 函式就滿足這個條件，因此它們也可以被稱為高階函式。

關注「全棧修仙之路」閱讀阿寶哥原創的 3 本免費電子書及 50 幾篇 “重學TS” 教程。

二、函式組合

函式組合就是將兩個或兩個以上的函式組合生成一個新函式的過程：

const compose = function (f, g) {
  return function (x) {
    return f(g(x));
  };
};

在以上程式碼中，f 和 g 都是函式，而 x 是組合生成新函式的引數。

2.1 函式組合的作用

在專案開發過程中，為了實現函式的複用，我們通常會盡量保證函式的職責單一，比如我們定義了以下功能函式：

在擁有以上功能函式的基礎上，我們就可以自由地對函式進行組合，來實現特定的功能：

function lowerCase(input) {
  return input && typeof input === "string" ? input.toLowerCase() : input;
}

function upperCase(input) {
  return input && typeof input === "string" ? input.toUpperCase() : input;
}

function trim(input) {
  return typeof input === "string" ? input.trim() : input;
}

function split(input, delimiter = ",") {
  return typeof input === "string" ? input.split(delimiter) : input;
}

const trimLowerCaseAndSplit = compose(trim, lowerCase, split);
trimLowerCaseAndSplit(" a,B,C "); // ["a", "b", "c"]

在以上的程式碼中，我們通過 compose 函式實現了一個 trimLowerCaseAndSplit 函式，該函式會對輸入的字串，先執行去空格處理，然後在把字串中包含的字母統一轉換為小寫，最後在使用 , 分號對字串進行拆分。利用函式組合的技術，我們就可以很方便的實現一個 trimUpperCaseAndSplit 函式。

2.2 組合函式的實現

function compose(...funcs) {
  return function (x) {
    return funcs.reduce(function (arg, fn) {
      return fn(arg);
    }, x);
  };
}

在以上的程式碼中，我們通過 Array.prototype.reduce 方法來實現組合函式的排程，對應的執行順序是從左到右。這個執行順序與 Linux 管道或過濾器的執行順序是一致的。

不過如果你想從右往左開始執行的話，這時你就可以使用 Array.prototype.reduceRight 方法來實現。

其實每當看到 compose 函式，阿寶哥就情不自禁想到 “如何更好地理解中介軟體和洋蔥模型” 這篇文章中介紹的 compose 函式：

function compose(middleware) {
  // 省略部分程式碼
  return function (context, next) {
    let index = -1;
    return dispatch(0);
    function dispatch(i) {
      if (i <= index)
        return Promise.reject(new Error("next() called multiple times"));
      index = i;
      let fn = middleware[i];
      if (i === middleware.length) fn = next;
      if (!fn) return Promise.resolve();
      try {
        return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
      } catch (err) {
        return Promise.reject(err);
      }
    }
  };
}

利用上述的 compose 函式，我們就可以實現以下通用的任務處理流程：

三、柯里化

柯里化（Currying）是一種處理函式中含有多個引數的方法，並在只允許單一引數的框架中使用這些函式。這種轉變是現在被稱為 “柯里化” 的過程，在這個過程中我們能把一個帶有多個引數的函式轉換成一系列的巢狀函式。它返回一個新函式，這個新函式期望傳入下一個引數。當接收足夠的引數後，會自動執行原函式。

在理論電腦科學中，柯里化提供了簡單的理論模型，比如：在只接受一個單一引數的 lambda 演算中，研究帶有多個引數的函式的方式。與柯里化相反的是 Uncurrying，一種使用匿名單引數函式來實現多引數函式的方法。比如：

const func = function(a) {
  return function(b) {
    return a * a + b * b;
  }
}

func(3)(4); // 25

Uncurrying 不是本文的重點，接下來我們使用 Lodash 提供的 curry 函式來直觀感受一下，對函式進行 “柯里化” 處理之後產生的變化：

const abc = function(a, b, c) {
  return [a, b, c];
};
 
const curried = _.curry(abc);
 
curried(1)(2)(3); // => [1, 2, 3]
curried(1, 2)(3); // => [1, 2, 3]
curried(1, 2, 3); // => [1, 2, 3]

_.curry(func, [arity=func.length])

建立一個函式，該函式接收 func 的引數，要麼呼叫func返回的結果，如果 func 所需引數已經提供，則直接返回 func 所執行的結果。或返回一個函式，接受餘下的func 引數的函式，可以使用 func.length 設定需要累積的引數個數。

來源：https://www.lodashjs.com/docs...

這裡需要特別注意的是，在數學和理論電腦科學中的柯里化函式，一次只能傳遞一個引數。而對於 JavaScript 語言來說，在實際應用中的柯里化函式，可以傳遞一個或多個引數。好的，介紹完柯里化的相關知識，接下來我們來介紹柯里化的作用。

3.1 柯里化的作用

3.1.1 引數複用

function buildUri(scheme, domain, path) {
  return `${scheme}://${domain}/${path}`;
}

const profilePath = buildUri("https", "github.com", "semlinker/semlinker");
const awesomeTsPath = buildUri("https", "github.com", "semlinker/awesome-typescript");

在以上程式碼中，首先我們定義了一個 buildUri 函式，該函式可用於構建 uri 地址。接著我們使用 buildUri 函式構建了阿寶哥 Github 個人主頁 和 awesome-typescript 專案的地址。對於上述的 uri 地址，我們發現 https 和 github.com 這兩個引數值是一樣的。

假如我們需要繼續構建阿寶哥其他專案的地址，我們就需要重複設定相同的引數值。那麼有沒有辦法簡化這個流程呢？答案是有的，就是對 buildUri 函式執行柯里化處理，具體處理方式如下：

const _ = require("lodash");

const buildUriCurry = _.curry(buildUri);
const myGithubPath = buildUriCurry("https", "github.com");
const profilePath = myGithubPath("semlinker/semlinker");
const awesomeTsPath = myGithubPath("semlinker/awesome-typescript");

3.1.2 延遲計算/執行

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

const curried = _.curry(add);
const plusOne = curried(1);

在以上程式碼中，通過對 add 函式執行 “柯里化” 處理，我們可以實現延遲計算。好的，簡單介紹完柯里化的作用，我們來動手實現一個柯里化函式。

3.2 柯里化的實現

現在我們已經知道了，當柯里化後的函式接收到足夠的引數後，就會開始執行原函式。而如果接收到的引數不足的話，就會返回一個新的函式，用來接收餘下的引數。基於上述的特點，我們就可以自己實現一個 curry 函式：

function curry(func) {
  return function curried(...args) {
    if (args.length >= func.length) { // 通過函式的length屬性，來獲取函式的形參個數
      return func.apply(this, args);
    } else {
      return function (...args2) {
        return curried.apply(this, args.concat(args2));
      };
    }
  }
}

四、偏函式應用

在電腦科學中，偏函式應用（Partial Application）是指固定一個函式的某些引數，然後產生另一個更小元的函式。而所謂的元是指函式引數的個數，比如含有一個引數的函式被稱為一元函式。

偏函式應用（Partial Application）很容易與函式柯里化混淆，它們之間的區別是：

• 偏函式應用是固定一個函式的一個或多個引數，並返回一個可以接收剩餘引數的函式；
• 柯里化是將函式轉化為多個巢狀的一元函式，也就是每個函式只接收一個引數。

瞭解完偏函式與柯里化的區別之後，我們來使用 Lodash 提供的 partial 函式來了解一下它如何使用。

4.1 偏函式的使用

function buildUri(scheme, domain, path) {
  return `${scheme}://${domain}/${path}`;
}

const myGithubPath = _.partial(buildUri, "https", "github.com");
const profilePath = myGithubPath("semlinker/semlinker");
const awesomeTsPath = myGithubPath("semlinker/awesome-typescript");

_.partial(func, [partials])

建立一個函式。 該函式呼叫 func，並傳入預設的 partials 引數。

來源：https://www.lodashjs.com/docs...

4.2 偏函式的實現

偏函式用於固定一個函式的一個或多個引數，並返回一個可以接收剩餘引數的函式。基於上述的特點，我們就可以自己實現一個 partial 函式：

function partial(fn) {
  let args = [].slice.call(arguments, 1);
  return function () {
    const newArgs = args.concat([].slice.call(arguments));
    return fn.apply(this, newArgs);
  };
}

4.3 偏函式實現 vs 柯里化實現

五、惰性函式

由於不同瀏覽器之間存在一些相容性問題，這導致了我們在使用一些 Web API 時，需要進行判斷，比如：

function addHandler(element, type, handler) {
  if (element.addEventListener) {
    element.addEventListener(type, handler, false);
  } else if (element.attachEvent) {
    element.attachEvent("on" + type, handler);
  } else {
    element["on" + type] = handler;
  }
}

在以上程式碼中，我們實現了不同瀏覽器 新增事件監聽 的處理。程式碼實現起來也很簡單，但存在一個問題，即每次呼叫的時候都需要進行判斷，很明顯這是不合理的。對於上述這個問題，我們可以通過惰性載入函式來解決。

5.1 惰性載入函式

所謂的惰性載入就是當第 1 次根據條件執行函式後，在第 2 次呼叫函式時，就不再檢測條件，直接執行函式。要實現這個功能，我們可以在第 1 次條件判斷的時候，在滿足判斷條件的分支中覆蓋掉所呼叫的函式，具體的實現方式如下所示：

function addHandler(element, type, handler) {
  if (element.addEventListener) {
    addHandler = function (element, type, handler) {
      element.addEventListener(type, handler, false);
    };
  } else if (element.attachEvent) {
    addHandler = function (element, type, handler) {
      element.attachEvent("on" + type, handler);
    };
  } else {
    addHandler = function (element, type, handler) {
      element["on" + type] = handler;
    };
  }
  // 保證首次呼叫能正常執行監聽
  return addHandler(element, type, handler);
}

除了使用以上的方式，我們也可以利用自執行函式來實現惰性載入：

const addHandler = (function () {
  if (document.addEventListener) {
    return function (element, type, handler) {
      element.addEventListener(type, handler, false);
    };
  } else if (document.attachEvent) {
    return function (element, type, handler) {
      element.attachEvent("on" + type, handler);
    };
  } else {
    return function (element, type, handler) {
      element["on" + type] = handler;
    };
  }
})();

通過自執行函式，在程式碼載入階段就會執行一次條件判斷，然後在對應的條件分支中返回一個新的函式，用來實現對應的處理邏輯。

六、快取函式

快取函式是將函式的計算結果快取起來，當下次以同樣的引數呼叫該函式時，直接返回已快取的結果，而無需再次執行函式。這是一種常見的以空間換時間的效能優化手段。

要實現快取函式的功能，我們可以把經過序列化的引數作為 key，在把第 1 次呼叫後的結果作為 value 儲存到物件中。在每次執行函式呼叫前，都先判斷快取中是否含有對應的 key，如果有的話，直接返回該 key 對應的值。分析完快取函式的實現思路之後，接下來我們來看一下具體如何實現：

function memorize(fn) {
  const cache = Object.create(null); // 儲存快取資料的物件
  return function (...args) {
    const _args = JSON.stringify(args);
    return cache[_args] || (cache[_args] = fn.apply(fn, args));
  };
};

定義完 memorize 快取函式之後，我們就可以這樣來使用它：

let complexCalc = (a, b) => {
  // 執行復雜的計算
};

let memoCalc = memorize(complexCalc);
memoCalc(666, 888);
memoCalc(666, 888); // 從快取中獲取

關注「全棧修仙之路」閱讀阿寶哥原創的 3 本免費電子書及 50 幾篇 “重學TS” 教程。

七、參考資源

• 維基百科 - 高階函式
• 維基百科 - 柯里化
• javascript-functional-programming-explained-partial-application-and-currying