引言

本篇帶來 Thunk 理解，這也是本瓜最津津樂道的 JS 函數(shù)式編程中延遲處理的思想核心之一！

什么是 Thunk ？

簡單理解：在計算機編程中，Thunk 就是一種實現(xiàn)延遲執(zhí)行的手段。

舉個栗子??????

我要計算 99 的 9 次方，然后再把它打印出來，你會怎么寫？

大聰明肯定是直接一句話：

console.log(Math.pow(99, 9)) // 913517247483640800

有點想法的同學肯定想封裝一個函數(shù)，因為后續(xù)還可能要 88 的 8 次方、77 的 7 次方等等：

const power = (base, exponent) => {
  return Math.pow(base, exponent);
};
console.log(power(99, 9)); // 913517247483640800

如果還有更多想法，可能會考慮：

今天你讓我 console 打印結果，明天如果讓我 alert 彈窗提醒結果怎么辦？后天又讓我 handleXXX 處理結果，又該怎么辦？

所以，這里可以設計一個（可自定義的）回調函數(shù)來處理這個運算結果：

代碼演進

const power = (base, exponent,callback) => {
  return callback(Math.pow(base, exponent))
};
const powerThunk = (callback) => {
  return function () {
    power(99, 9, callback);
  };
};
const calculatePower = powerAsyncThunk((result) => console.log(result));
calculatePower(); // 913517247483640800

在這個例子中，調用powerThunk() 并不會馬上執(zhí)行 power() 運算，這就是所謂的延遲執(zhí)行。

并且 powerThunk() 只用再傳一個回調函數(shù)進去就行了，不用再傳 base 99 和 exponent 9 這兩個參數(shù)了。

在某種意義上來講，thunk 也是一個已經(jīng)固定某些參數(shù)的一個函數(shù)，上例中 power 要傳 3 個參數(shù)，而 powerThunk 只用傳一個參數(shù)就行了。這感覺就有點像柯里化。

可能有同學問了：

“我就喜歡直接修改，不喜歡封裝，行嗎？”

“行呀，咋不行，即使自己不做封裝，你也在無時無刻地用這種封裝。Promise 就是基于 Thunk。”

繼續(xù)上面的例子講：

改造成異步

上面的例子是同步的，我們改造成異步的：

const fetchCurrenciesData = (callback) => {
  fetch("https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies.json")
  .then(res => res.json())
  .then(res => callback(res));
}
// This is an async thunk
const asyncThunk = (callback) => {
  return function () {
    fetchCurrenciesData(callback);
  }
}
// This async thunk now returns a function that 
// can be called later on to fetch data from the API.
const fetchCurrencies = asyncThunk((res) => console.log(res));
fetchCurrencies();

當我們調用 fetchCurrencies() 時，會執(zhí)行 fetchCurrenciesData((res) => console.log(res))()

就會按序執(zhí)行 fetch 方法，然后走 .then 處理成 json，然后打印。

toThunk 工具函數(shù)

一套嵌一套，母豬帶熊罩。所以，我們可以寫出一個 toThunk 工具函數(shù)：

function toThunk(asyncFn) {
  return (...args) => {
    return (callback) => {
      asyncFn(...args, callback);
    };
  };
}

可以將任何函數(shù)處理做成上述的邏輯：

let thunk = toThunk(readFile); // readFile 是異步函數(shù)
thunk = thunk('./foo');
thunk((err, data) => /* do sth. */))

thunk 的兩步執(zhí)行，第一步傳入?yún)?shù)，第二步是傳入回調函數(shù)，這就是 Promise 的 then 的方法思路??！

thunk 還可以搭配 es6 生成器使用，本篇就不作展開。

JavaScript 中「Thunk」怎么理解，你 get 到了嗎？

以上就是JavaScript函數(shù)式編程Thunk原理解析的詳細內容，更多關于JavaScript函數(shù)式編程Thunk的資料請關注腳本之家其它相關文章！