Thunk深入解析

xi4oh4o 發布于2019-08-20 12:22 / 759人閱讀

摘要：捕抓信息，并且出錯時，傳遞給回調函數回調函數應該只調用一次。總結在學習一個概念或者一個模塊時，測試代碼加深你對知識的理解和掌握。

一步步打造thunkify

本文的思路：

學習thunk相關知識，主要參考阮一峰的介紹

一步步實現thunkify模塊，并且使用測試用例來完善我們的代碼，打造出一個健壯的模塊

1. 誕生背景

Thunk函數的誕生是源于一個編譯器設計的問題：求值策略，即函數的參數到底應該何時求值。

例如：

var x = 1;
function f(m) {
    return m * 2;
}
f(x + 5);

其中x+5這個表達式應該什么時候求值，有兩種思路

傳值調用(call by value)，即在進入函數體之間，先計算x+5的值，再將這個值（6）傳入函數f，例如c語言，這種做法的好處是實現比較簡單，但是有可能會造成性能損失。

傳名調用(call by name)，即直接將表達式(x+5)傳入函數體，只在用到它的時候求值。

2. Thunk函數的含義

編譯器的傳名調用實現，往往就是將參數放到一個臨時函數之中，再將這個臨時函數轉入函數體，這個臨時函數就叫做Thunk函數。

來看一段代碼示例：

function f(m) {
    return m*2;
}

f(x + 5);

// 等價于以下代碼
var thunk = function () {
    return x + 5;
};

function f(thunk) {
    return thunk() * 2;
}

3. javascript中的Thunk函數

我們都知道Javascript是傳值調用的，那么js中的Thunk函數又是怎么回事？

在Javascript語言中，Thunk函數替換的不是表達式，而是多參數函數，將其替換成單參數的版本，且只接受回調函數作為參數。

還是通過代碼來理解，即

// 正常版本的readFile，需要兩個參數filename、callback
fs.readFile(fileName, callback);

// thunk版本的readFile
var readFileThunk = thunkify(fs.readFile);
readFileThunk(fileName)(callback);

原文中例子就是柯里化，預置參數fileName，直接調用fs.readFile

好，現在我們來思考如何實現thunkify函數。我們從調用的形式來看，返回的應該是一個高階函數，即返回一個函數a，a的返回還是一個函數。

var thunkify = function (fn) {
    return function () {
        return function () {

        }
    }
};

結合上述例子，因為是包裝函數，因此最終還是readFile執行，且需要fileName，因此：

var thunkify = function (fn) {
    return function () {
        var args = Array.prototype.slice.call(arguments);
        return function (callback) {
            args.push(callback);
            return fn.apply(this, args);
        }
    }
};

這樣似乎很完美，我們運行整個示例

const fs = require("fs");

var thunkify = function (fn) {
    return function () {
        var args = Array.prototype.slice.call(arguments);
        return function (callback) {
            args.push(callback);
            return fn.apply(this, args);
        }
    }
};

var readFileThunk = thunkify(fs.readFile);
readFileThunk("test.txt", "utf-8")( (err, data) => {
    console.log(data);
});

運行結果為

4. 打造thunkify模塊

要寫出一個健壯的thunkify函數，需要考慮的各種情況，而我們通過tj大神寫的thunkify模塊的測試代碼，來看看我們自己的thunkify還存在哪些不足，一步步來優化。

1、保存上下文的問題

function load(fn) {
  fn(null, this.name);
}

var user = {
  name: "tobi",
  load: thunkify(load)
};

user.load()((err, res) => {
    console.log(res);
});

運行之后，res的結果為undefined，原因是沒有保存上下文，改進一下

var thunkify = function (fn) {
    return function () {
        var args = Array.prototype.slice.call(arguments);
        var ctx = this;
        return function (callback) {
            args.push(callback);
            return fn.apply(ctx, args);
        }
    }
};

2、捕抓錯誤

function load(fn) {
  throw new Error("boom");
}
load = thunkify(load);
load()(err => console.log(err.message));

運行之后，發現并沒有捕抓到錯誤，我們需要執行函數進行try/catch，并且當出錯時，傳遞出錯信息。

var thunkify = function (fn) {
    return function () {
        var args = Array.prototype.slice.call(arguments);
        var ctx = this;
        return function (callback) {
            args.push(callback);
            var result;
            // try/catch捕抓信息，并且出錯時，傳遞給回調函數
            try {
                result = fn.apply(ctx, args);
            } catch (e) {
                callback(e);
            }
            return result;
        }
    }
};

3、回調函數應該只調用一次。

function load(fn) {
  fn(null, 1);
  fn(null, 2);
  fn(null, 3);
}

load = thunkify(load);

load()((err,ret) => console.log(ret));

運行輸出結果為1 2 3，而我們期望結果只為1，那么需要判斷callback是否已經執行過了，使其只執行一次。

var thunkify = function (fn) {
    return function () {
        var args = Array.prototype.slice.call(arguments);
        var ctx = this;
        return function (callback) {
            var called; 
            // 對callback進行封裝，使其只能執行一次。
            args.push(function () {
                if(called) return;
                called = true;
                callback.apply(null, arguments);
            });
            var result;
            try {
                result = fn.apply(ctx, args);
            } catch (e) {
                callback(e);
            }
            return result;
        }
    }
};

到這里，我們通過了所有的測試，完成了一個健壯的thunkify模塊。

5. 總結

在學習一個概念或者一個模塊時，測試代碼加深你對知識的理解和掌握。

來源

Thunk-阮一峰

thunkify-tj

GPU云服務器云服務器深入解析windows操作系統 thunk 深入深入分析

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80944.html

redux深入進階

摘要：上一篇文章講解了如何使用，本篇文章將進一步深入，從的源碼入手，深入學習的中間件機制。的功能是讓支持異步，讓我們可以在中跟服務器進行交互等操作，而他的實現。。。上一篇文章講解了redux如何使用，本篇文章將進一步深入，從redux的源碼入手，深入學習redux的中間件機制。在這里我們會以一個redux-thunk中間件為例，逐步分解redux的中間機制如何操作，如何執行。閑話不多說，...

omgdog 2019-08-19 17:51 評論0 收藏0
【源碼解析】redux-thunk

摘要：的返回值是函數，這個函數經調用，傳入參數，之后會在中間件鏈上進行傳遞，只要保證每個中間件的參數是并且將傳遞給下一個中間件。了解了Redux原理之后，我很好奇Redux中間件是怎么運作的，于是選了最常用的redux-thunk進行源碼分析。此次分析用的redux-thunk源碼版本是2.2.0，redux源碼版本是3.7.2。并且需要了解Redux原理 redux中間件都是由redu...

simpleapples 2019-08-21 17:10 評論0 收藏0
重讀redux源碼(二)

摘要：函數組合，科里化的串聯結合示例源碼，實現也很優雅，對于返回的，將等參數傳遞進去，然后執行，等待回調異步完成再。對于正常對象則進行下一步。前言作為前端狀態管理器，這個比較跨時代的工具庫redux有很多實現和思想值得我們思考。在深入源碼之前，我們可以相關注下一些常見問題，這樣帶著問題去看實現，也能更加清晰的了解。常見問題大概看了下主要有這么幾個： redux三大原則這個可以直接參考...

dingda 2019-05-23 13:54 評論0 收藏0
純Redux原理分析

摘要：調用鏈中最后一個會接受真實的的方法作為參數，并借此結束調用鏈。總結我們常用的一般是除了和之外的方法，那個理解明白了，對于以后出現的問題會有很大幫助，本文只是針對最基礎的進行解析，之后有機會繼續解析對他的封裝前言雖然一直使用redux+react-redux，但是并沒有真正去講redux最基礎的部分理解透徹，我覺得理解明白redux會對react-redux有一個透徹的理解。其實，...

sumory 2019-08-22 17:07 評論0 收藏0
深入前端-JavaScript異步編程

摘要：缺點無法取消當處于狀態時，無法得知目前進展到哪一個階段錯誤不能被生成器什么是函數是提供的一種異步編程解決方案，語法行為與傳統函數完全不同函數有多種理解角度。 JavaScript的執行機制在上篇文章中進行了深入的探討，那么既然是一門單線程語言，如何進行良好體驗的異步編程呢回調函數Callbacks 當程序跑起來時，一般情況下，應用程序（application program）會時常通...

2json 2019-08-02 15:37 評論0 收藏0