Thunk深入解析

xi4oh4o 發(fā)布于2019-08-20 12:22 / 766人閱讀

摘要：捕抓信息，并且出錯(cuò)時(shí)，傳遞給回調(diào)函數(shù)回調(diào)函數(shù)應(yīng)該只調(diào)用一次?？偨Y(jié)在學(xué)習(xí)一個(gè)概念或者一個(gè)模塊時(shí)，測(cè)試代碼加深你對(duì)知識(shí)的理解和掌握。

一步步打造thunkify

本文的思路：

學(xué)習(xí)thunk相關(guān)知識(shí)，主要參考阮一峰的介紹

一步步實(shí)現(xiàn)thunkify模塊，并且使用測(cè)試用例來(lái)完善我們的代碼，打造出一個(gè)健壯的模塊

1. 誕生背景

Thunk函數(shù)的誕生是源于一個(gè)編譯器設(shè)計(jì)的問(wèn)題：求值策略，即函數(shù)的參數(shù)到底應(yīng)該何時(shí)求值。

例如：

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

其中x+5這個(gè)表達(dá)式應(yīng)該什么時(shí)候求值，有兩種思路

傳值調(diào)用(call by value)，即在進(jìn)入函數(shù)體之間，先計(jì)算x+5的值，再將這個(gè)值（6）傳入函數(shù)f，例如c語(yǔ)言，這種做法的好處是實(shí)現(xiàn)比較簡(jiǎn)單，但是有可能會(huì)造成性能損失。

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

2. Thunk函數(shù)的含義

編譯器的傳名調(diào)用實(shí)現(xiàn)，往往就是將參數(shù)放到一個(gè)臨時(shí)函數(shù)之中，再將這個(gè)臨時(shí)函數(shù)轉(zhuǎn)入函數(shù)體，這個(gè)臨時(shí)函數(shù)就叫做Thunk函數(shù)。

來(lái)看一段代碼示例：

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

f(x + 5);

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

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

3. javascript中的Thunk函數(shù)

我們都知道Javascript是傳值調(diào)用的，那么js中的Thunk函數(shù)又是怎么回事？

在Javascript語(yǔ)言中，Thunk函數(shù)替換的不是表達(dá)式，而是多參數(shù)函數(shù)，將其替換成單參數(shù)的版本，且只接受回調(diào)函數(shù)作為參數(shù)。

還是通過(guò)代碼來(lái)理解，即

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

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

原文中例子就是柯里化，預(yù)置參數(shù)fileName，直接調(diào)用fs.readFile

好，現(xiàn)在我們來(lái)思考如何實(shí)現(xiàn)thunkify函數(shù)。我們從調(diào)用的形式來(lái)看，返回的應(yīng)該是一個(gè)高階函數(shù)，即返回一個(gè)函數(shù)a，a的返回還是一個(gè)函數(shù)。

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

        }
    }
};

結(jié)合上述例子，因?yàn)槭前b函數(shù)，因此最終還是readFile執(zhí)行，且需要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);
        }
    }
};

這樣似乎很完美，我們運(yùn)行整個(gè)示例

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);
});

運(yùn)行結(jié)果為

4. 打造thunkify模塊

要寫(xiě)出一個(gè)健壯的thunkify函數(shù)，需要考慮的各種情況，而我們通過(guò)tj大神寫(xiě)的thunkify模塊的測(cè)試代碼，來(lái)看看我們自己的thunkify還存在哪些不足，一步步來(lái)優(yōu)化。

1、保存上下文的問(wèn)題

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

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

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

運(yùn)行之后，res的結(jié)果為undefined，原因是沒(méi)有保存上下文，改進(jìn)一下

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、捕抓錯(cuò)誤

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

運(yùn)行之后，發(fā)現(xiàn)并沒(méi)有捕抓到錯(cuò)誤，我們需要執(zhí)行函數(shù)進(jìn)行try/catch，并且當(dāng)出錯(cuò)時(shí)，傳遞出錯(cuò)信息。

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捕抓信息，并且出錯(cuò)時(shí)，傳遞給回調(diào)函數(shù)
            try {
                result = fn.apply(ctx, args);
            } catch (e) {
                callback(e);
            }
            return result;
        }
    }
};

3、回調(diào)函數(shù)應(yīng)該只調(diào)用一次。

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

load = thunkify(load);

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

運(yùn)行輸出結(jié)果為1 2 3，而我們期望結(jié)果只為1，那么需要判斷callback是否已經(jīng)執(zhí)行過(guò)了，使其只執(zhí)行一次。

var thunkify = function (fn) {
    return function () {
        var args = Array.prototype.slice.call(arguments);
        var ctx = this;
        return function (callback) {
            var called; 
            // 對(duì)callback進(jìn)行封裝，使其只能執(zhí)行一次。
            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;
        }
    }
};

到這里，我們通過(guò)了所有的測(cè)試，完成了一個(gè)健壯的thunkify模塊。

5. 總結(jié)

在學(xué)習(xí)一個(gè)概念或者一個(gè)模塊時(shí)，測(cè)試代碼加深你對(duì)知識(shí)的理解和掌握。

來(lái)源

Thunk-阮一峰

thunkify-tj

云服務(wù)器 GPU云服務(wù)器深入解析windows操作系統(tǒng) thunk 深入深入分析

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80944.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

xi4oh4o

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow學(xué)習(xí)

閱讀 579·2023-04-25 16:00
判斷鼠標(biāo)點(diǎn)擊的位置是否在某個(gè)div區(qū)域內(nèi)

閱讀 1624·2019-08-26 13:54
前端培訓(xùn)-初級(jí)階段-場(chǎng)景實(shí)戰(zhàn)（2019-05-23）-移動(dòng)端適配bug

閱讀 2504·2019-08-26 13:47
nodejs request模塊用法

閱讀 3435·2019-08-26 13:39
小程序movable-area拖拽fixed點(diǎn)擊失效

閱讀 1053·2019-08-26 13:37
前端的一些坑，一些記錄，一些冷知識(shí) 2

閱讀 2748·2019-08-26 10:21
一個(gè)故事講懂vue父子組件傳值

閱讀 3544·2019-08-23 18:19
初步接觸echarts

閱讀 1609·2019-08-23 18:02

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Thunk深入解析

相關(guān)文章

redux深入進(jìn)階

【源碼解析】redux-thunk

重讀redux源碼(二)

純Redux原理分析

深入前端-JavaScript異步編程

發(fā)表評(píng)論

0條評(píng)論

xi4oh4o

男|高級(jí)講師

TA的文章

tensorflow學(xué)習(xí)

判斷鼠標(biāo)點(diǎn)擊的位置是否在某個(gè)div區(qū)域內(nèi)

前端培訓(xùn)-初級(jí)階段-場(chǎng)景實(shí)戰(zhàn)（2019-05-23）-移動(dòng)端適配bug

nodejs request模塊用法

小程序movable-area拖拽fixed點(diǎn)擊失效

前端的一些坑，一些記錄，一些冷知識(shí) 2

一個(gè)故事講懂vue父子組件傳值

初步接觸echarts

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Thunk深入解析

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！