引言

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

什么是 Thunk ？

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

舉個(gè)栗子??????

我要計(jì)算 99 的 9 次方，然后再把它打印出來(lái)，你會(huì)怎么寫(xiě)？

大聰明肯定是直接一句話(huà)：

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

有點(diǎn)想法的同學(xué)肯定想封裝一個(gè)函數(shù)，因?yàn)楹罄m(xù)還可能要 88 的 8 次方、77 的 7 次方等等：

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

如果還有更多想法，可能會(huì)考慮：

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

所以，這里可以設(shè)計(jì)一個(gè)（可自定義的）回調(diào)函數(shù)來(lái)處理這個(gè)運(yùn)算結(jié)果：

代碼演進(jìn)

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

在這個(gè)例子中，調(diào)用powerThunk() 并不會(huì)馬上執(zhí)行 power() 運(yùn)算，這就是所謂的延遲執(zhí)行。

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

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

可能有同學(xué)問(wèn)了：

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

“行呀，咋不行，即使自己不做封裝，你也在無(wú)時(shí)無(wú)刻地用這種封裝。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();

當(dāng)我們調(diào)用 fetchCurrencies() 時(shí)，會(huì)執(zhí)行 fetchCurrenciesData((res) => console.log(res))()

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

toThunk 工具函數(shù)

一套嵌一套，母豬帶熊罩。所以，我們可以寫(xiě)出一個(gè) 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ù)，第二步是傳入回調(diào)函數(shù)，這就是 Promise 的 then 的方法思路??！

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

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

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

最新評(píng)論