Thunk函數的使用

編譯器的求值策略通常分為傳值調用以及傳名調用，Thunk函數是應用於編譯器的傳名調用實現，往往是將參數放到一個臨時函數之中，再將這個臨時函數傳入函數體，這個臨時函數就叫做Thunk 函數。

求值策略

編譯器的求值策略通常分為傳值調用以及傳名調用，在下面的例子中，將一個表達式作為參數進行傳遞，傳值調用以及傳名調用中實現的方式有所不同。

var x = 1;
 
 function s(y){
     console.log(y + 1); // 3
 }
 
 s(x + 1);

在上述的例子中，無論是使用傳值調用還是使用傳名調用，執行的結果都是一樣的，但是其調用過程不同：

傳值調用：首先計算x + 1，然後將計算結果2傳遞到s函數，即相當於調用s(2)。

傳名調用：直接將x + 1表達式傳遞給y，使用時再計算x + 1，即相當於計算(x + 1) + 1。

傳值調用與傳名調用各有利弊，傳值調用比較簡單，但是對參數求值的時候，實際上還沒用到這個參數，有可能造成沒有必要的計算。傳名調用可以解決這個問題，但是實現相對來說比較複雜。

var x = 1;
 
 function s(y){
     console.log(y + 1); // 3
 }
 
 s(x + 1, x + 2);

在上面這個例子中，函數s並沒有用到x + 2這個表達式求得的值，使用傳名調用的話只將表達式傳入而並未計算，只要在函數中沒有用到x + 2這個表達式就不會計算，使用傳值調用的話就會首先將x + 2的值計算然後傳入，如果沒有用到這個值，那麼就多了一次沒有必要的計算。Thunk函數就是作為傳名調用的實現而構建的，往往是將參數放到一個臨時函數之中，再將這個臨時函數傳入函數體，這個臨時函數就叫做Thunk 函數。

var x = 1;
 
 function s(y){
     console.log(y + 1); // 3
 }
 
 s(x + 1);
 
 // 等同於
 
 var x = 1;
 
 function s(thunk){
     console.log(thunk() + 1); // 3
 }
 
 var thunk = function(){
     return x + 1;
 }
 
 s(thunk);

Js中的Thunk函數

Js中的求值策略是是傳值調用，在Js中使用Thunk函數需要手動進行實現且含義有所不同，在Js中，Thunk函數替換的不是表達式，而是多參數函數，將其替換成單參數的版本，且只接受回調函數作為參數。

// 假設一個延時函數需要傳遞一些參數
 // 通常使用的版本如下
 var delayAsync = function(time, callback, ...args){
     setTimeout(() => callback(...args), time);
 }
 
 var callback = function(x, y, z){
     console.log(x, y, z);
 }
 
 delayAsync(1000, callback, 1, 2, 3);
 
 // 使用Thunk函數
 
 var thunk = function(time, ...args){
     return function(callback){
         setTimeout(() => callback(...args), time);
     }
 }
 
 var callback = function(x, y, z){
     console.log(x, y, z);
 }
 
 var delayAsyncThunk = thunk(1000, 1, 2, 3);
 delayAsyncThunk(callback);

實現一個簡單的Thunk函數轉換器，對於任何函數，只要參數有回調函數，就能寫成Thunk函數的形式。

var convertToThunk = function(funct){
   return function (...args){
     return function (callback){
       return funct.apply(this, args);
     }
   };
 };
 
 var callback = function(x, y, z){
     console.log(x, y, z);
 }
 
 var delayAsyncThunk = convertToThunk(function(time, ...args){
     setTimeout(() => callback(...args), time);
 });
 
 thunkFunct = delayAsyncThunk(1000, 1, 2, 3);
 thunkFunct(callback);

Thunk函數在ES6之前可能應用比較少，但是在ES6之後，出現了Generator函數，通過使用Thunk函數就可以可以用於Generator函數的自動流程管理。首先是關於Generator函數的基本使用，調用一個生成器函數並不會馬上執行它裏面的語句，而是返回一個這個生成器的迭代器iterator 對象，他是一個指向內部狀態對象的指針。當這個迭代器的next()方法被首次（後續）調用時，其內的語句會執行到第一個（後續）出現yield的位置為止，yield后緊跟迭代器要返回的值，也就是指針就會從函數頭部或者上一次停下來的地方開始執行到下一個yield。或者如果用的是yield*，則表示將執行權移交給另一個生成器函數（當前生成器暫停執行）。

function* f(x) {
     yield x + 10;
     yield x + 20;
     return x + 30;
 }
 var g = f(1);
 console.log(g); // f {<suspended>}
 console.log(g.next()); // {value: 11, done: false}
 console.log(g.next()); // {value: 21, done: false}
 console.log(g.next()); // {value: 31, done: true}
 console.log(g.next()); // {value: undefined, done: true} // 可以無限next()，但是value總為undefined，done總為true

由於Generator函數能夠將函數的執行暫時掛起，那麼他就完全可以操作一個異步任務，當上一個任務完成之後再繼續下一個任務，下面這個例子就是將一個異步任務同步化表達，當上一個延時定時器完成之後才會進行下一個定時器任務，可以通過這種方式解決一個異步嵌套的問題，例如利用回調的方式需要在一個網絡請求之後加入一次回調進行下一次請求，很容易造成回調地獄，而通過Generator函數就可以解決這個問題，事實上async/await就是利用的Generator函數以及Promise實現的異步解決方案。

var it = null;
 
 function f(){
     var rand = Math.random() * 2;
     setTimeout(function(){
         if(it) it.next(rand);
     },1000)
 }
 
 function* g(){ 
     var r1 = yield f();
     console.log(r1);
     var r2 = yield f();
     console.log(r2);
     var r3 = yield f();
     console.log(r3);
 }
 
 it = g();
 it.next();

雖然上邊的例子能夠自動執行，但是不夠方便，現在實現一個Thunk函數的自動流程管理，其自動幫我們進行回調函數的處理，只需要在Thunk函數中傳遞一些函數執行所需要的參數比如例子中的index，然後就可以編寫Generator函數的函數體，通過左邊的變量接收Thunk函數中funct執行的參數，在使用Thunk函數進行自動流程管理時，必須保證yield后是一個Thunk函數。
關於自動流程管理run函數，首先需要知道在調用next()方法時，如果傳入了參數，那麼這個參數會傳給上一條執行的yield語句左邊的變量，在這個函數中，第一次執行next時並未傳遞參數，而且在第一個yield上邊也並不存在接收變量的語句，無需傳遞參數，接下來就是判斷是否執行完這個生成器函數，在這裏並沒有執行完，那麼將自定義的next函數傳入res.value中，這裏需要注意res.value是一個函數，可以在下邊的例子中將註釋的那一行執行，然後就可以看到這個值是f(funct){...}，此時我們將自定義的next函數傳遞后，就將next的執行權限交予了f這個函數，在這個函數執行完異步任務后，會執行回調函數，在這個回調函數中會觸發生成器的下一個next方法，並且這個next方法是傳遞了參數的，上文提到傳入參數後會將其傳遞給上一條執行的yield語句左邊的變量，那麼在這一次執行中會將這個參數值傳遞給r1，然後在繼續執行next，不斷往複，直到生成器函數結束運行，這樣就實現了流程的自動管理。

function thunkFunct(index){
     return function f(funct){
         var rand = Math.random() * 2;
         setTimeout(() => funct({rand:rand, index: index}), 1000)
     }
 }
 
 function* g(){ 
     var r1 = yield thunkFunct(1);
     console.log(r1.index, r1.rand);
     var r2 = yield thunkFunct(2);
     console.log(r2.index, r2.rand);
     var r3 = yield thunkFunct(3);
     console.log(r3.index, r3.rand);
 }
 
 function run(generator){
     var g = generator();
 
     var next = function(data){
         var res = g.next(data);
         if(res.done) return ;
         // console.log(res.value);
         res.value(next);
     }
 
     next();
 }
 
 run(g);

每日一題

https://github.com/WindrunnerMax/EveryDay

參考

https://www.jianshu.com/p/9302a1d01113
 https://segmentfault.com/a/1190000017211798
 http://www.ruanyifeng.com/blog/2015/05/thunk.html

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※網頁設計公司推薦不同的風格，搶佔消費者視覺第一線

※Google地圖已可更新顯示潭子電動車充電站設置地點!!

※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益

※別再煩惱如何寫文案,掌握八大原則!

※網頁設計最專業,超強功能平台可客製化

Orignal From: Thunk函數的使用

發燒車訊

搜尋此網誌