JavaScript函数式编程Thunk原理解析

目录
  • 引言
    • 举个栗子
    • 代码演进
    • 改造成异步
    • toThunk 工具函数

引言

本篇带来 Thunk 理解，这也是本瓜最津津乐道的 JS 函数式编程中延迟处理的思想核心之一！

什么是 Thunk ？

简单理解：在计算机编程中，Thunk 就是一种实现延迟执行的手段。

举个栗子

我要计算 99 的 9 次方，然后再把它打印出来，你会怎么写？

大聪明肯定是直接一句话：

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

有点想法的同学肯定想封装一个函数，因为后续还可能要 88 的 8 次方、77 的 7 次方等等：

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

如果还有更多想法，可能会考虑：

今天你让我 console 打印结果，明天如果让我 alert 弹窗提醒结果怎么办？后天又让我 handleXXX 处理结果，又该怎么办？

所以，这里可以设计一个（可自定义的）回调函数来处理这个运算结果：

代码演进

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() 并不会马上执行 power() 运算，这就是所谓的延迟执行。

并且 powerThunk() 只用再传一个回调函数进去就行了，不用再传 base 99 和 exponent 9 这两个参数了。

在某种意义上来讲，thunk 也是一个已经固定某些参数的一个函数，上例中 power 要传 3 个参数，而 powerThunk 只用传一个参数就行了。这感觉就有点像柯里化。

可能有同学问了：

“我就喜欢直接修改，不喜欢封装，行吗？”

“行呀，咋不行，即使自己不做封装，你也在无时无刻地用这种封装。Promise 就是基于 Thunk。”

继续上面的例子讲：

改造成异步

上面的例子是同步的，我们改造成异步的：

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() 时，会执行 fetchCurrenciesData((res) => console.log(res))()

就会按序执行 fetch 方法，然后走 .then 处理成 json，然后打印。

toThunk 工具函数

一套嵌一套，母猪带熊罩。所以，我们可以写出一个 toThunk 工具函数：

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

可以将任何函数处理做成上述的逻辑：

let thunk = toThunk(readFile); // readFile 是异步函数
thunk = thunk('./foo');
thunk((err, data) => /* do sth. */))

thunk 的两步执行，第一步传入参数，第二步是传入回调函数，这就是 Promise 的 then 的方法思路！！

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

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

以上就是JavaScript函数式编程Thunk原理解析的详细内容，更多关于JavaScript函数式编程Thunk的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析

    本文实例讲述了JavaScript函数式编程(Functional Programming)组合函数(Composition)用法.分享给大家供大家参考,具体如下: 组合(Composition)函数,就是把两个或以上的函数组合到一块儿,整成一个新的函数.我找到了一个很好的例子,很好地解释了组合函数这个概念. 比如一个应用主要是记录一下日常的花销(expenses),应用里的数据看起来像这样: const expenses = [ { name: '租金', price: 3000, type:

  • JS中的一些常用的函数式编程术语

    组合 Composition 组合某种类型(含函数)的两个元素,进而生成一个该类型的新元素: JavaScript let compose = (f, g) => a => f(g(a)) let toUpperCase = x => x.toUpperCase() let exclaim = x => x + '!' let shout = compose(exclaim, toUpperCase); shout("hello world") // HELLO

  • JavaScript函数式编程(Functional Programming)纯函数用法分析

    本文实例讲述了JavaScript函数式编程(Functional Programming)纯函数用法.分享给大家供大家参考,具体如下: 函数式编程鼓励我们多创建纯函数(pure functions),纯函数只依赖你交给它的东西,不使用任何函数以外的东西,也不会影响到函数以外的东西.跟纯函数对应的就是不纯函数(impure functions),也就是不纯函数可能会使用函数以外的东西,比如使用了一个全局变量.也可能会影响到函数以外的东西,比如改变了一个全局变量的值. 多使用纯属函数是因为它更可靠

  • JavaScript函数式编程(Functional Programming)声明式与命令式实例分析

    本文实例讲述了JavaScript函数式编程(Functional Programming)声明式与命令式.分享给大家供大家参考,具体如下: 函数式编程属于声明式编程(declarative programming)的范畴,经常跟声明式编程一块儿讨论的是命令式编程(imperative programming),因为它们是两种不太一样的风格. 命令式编程一般就是说清楚具体要怎么样得到一个结果:先这样做,再这样做,然后再这样,如果这样,就这样做 - 声明式编程就是声明(说明)一下你想得到的结果是什

  • JS Thunk 函数的含义和用法实例总结

    本文实例讲述了JS Thunk 函数的含义和用法.分享给大家供大家参考,具体如下: 前面我们已经学习过了Generator 函数的优势和使用场景. 这篇文章我们继续学习阮老师的第二篇文章,Thunk 函数的含义和用法 说实话,在这之前是没听过这个词的,但其实如果你对犀牛书里的不完全函数有认真看过的话 理解起来也不是很费劲. 首先什么是 thunk 函数? 很多场景下我们都会陷入一个问题,就是函数参数的求值时间. 是函数调用时即求值还是在函数内使用时才求值? var x = 1; function

  • JavaScript中的函数式编程详解

    函数式编程 函数式编程是一种编程范式,是一种构建计算机程序结构和元素的风格,它把计算看作是对数学函数的评估,避免了状态的变化和数据的可变,与函数式编程相对的是命令式编程.我们有这样一个需求,给数组的每个数字加一: // 数组每个数字加一, 命令式编程 let arr = [1, 2, 3, 4]; let newArr = []; for(let i = 0; i < arr.length; i++){ newArr.push(arr[i] + 1); } console.log(newArr)

  • JavaScript函数式编程Thunk原理解析

    目录 引言 举个栗子 代码演进 改造成异步 toThunk 工具函数 引言 本篇带来 Thunk 理解,这也是本瓜最津津乐道的 JS 函数式编程中延迟处理的思想核心之一! 什么是 Thunk ? 简单理解:在计算机编程中,Thunk 就是一种实现延迟执行的手段. 举个栗子 我要计算 99 的 9 次方,然后再把它打印出来,你会怎么写? 大聪明肯定是直接一句话: console.log(Math.pow(99, 9)) // 913517247483640800 有点想法的同学肯定想封装一个函数,

  • JavaScript 函数式编程的原理

    1,JavaScript中函数.方法的调用 在JavaScript中,有两种调用函数的方式.一般的方式是把参数放在括号中,另一种方式是同时把函数和参数都放在括号中.如: 复制代码 代码如下: function test(x) { alert(x); } test("hello"); (test)("hello"); //等同于下面的代码 (function test(x) { alert(x); })("hello"); //也等同于下面的代码

  • javascript函数式编程基础

    javascript函数式编程基础

    目录 一.引言 二.什么是函数式编程 三.纯函数(函数式编程的基石,无副作用的函数) 四.函数柯里化 五.函数组合 六.声明式和命令式代码 七.Point Free 八.示例应用 九.总结 一.引言 函数式编程的历史已经很悠久了,但是最近几年却频繁的出现在大众的视野,很多不支持函数式编程的语言也在积极加入闭包,匿名函数等非常典型的函数式编程特性.大量的前端框架也标榜自己使用了函数式编程的特性,好像一旦跟函数式编程沾边,就很高大上一样,而且还有一些专门针对函数式编程的框架和库,比如:RxJS.cy

  • 《JavaScript函数式编程》读后感

    本文章记录本人在学习 函数式 中理解到的一些东西,加深记忆和并且整理记录下来,方便之后的复习. 在近期看到了<JavaScript函数式编程>这本书预售的时候就定了下来.主要目的是个人目前还是不理解什么是函数式编程.在自己学习的过程中一直听到身边的人说面向过程编程和面向对象编程,而函数式就非常少.为了自己不要落后于其他同学的脚步,故想以写笔记的方式去分享和记录自己阅读中所汲取的知识. js 和函数式编程 书中用了一句简单的话来回答了什么是函数式编程: 函数式编程通过使用函数来将值转换为抽象单元

  • 探究JavaScript函数式编程的乐趣

    探究JavaScript函数式编程的乐趣

    编程范式 编程范式是一个由思考问题以及实现问题愿景的工具组成的框架.很多现代语言都是聚范式(或者说多重范式): 他们支持很多不同的编程范式,比如面向对象,元程序设计,泛函,面向过程,等等. 函数式编程范式 函数式编程就像一辆氢燃料驱动的汽车--先进的未来派,但是还没有被广泛推广.与命令式编程相反,他由一系列语句组成,这些语句用于更新执行时的全局状态.函数式编程将计算转化作表达式求值.这些表达式全由纯数学函数组成,这些数学函数都是一流的(可以被当做一般值来运用和处理),并且没有副作用. 函数式编程

  • javascript函数式编程实例分析

    本文实例讲述了javascript函数式编程.分享给大家供大家参考.具体分析如下: js像其他动态语言一样是可以写高阶函数的,所谓高阶函数是可以操作函数的函数.因为在js中函数是一个彻彻底底的对象,属于第一类公民,这提供了函数式编程的先决条件. 下面给出一个例子代码,出自一本js教程,功能是计算数组元素的平均值和标准差,先列出非函数式编程的一种写法: var data = [1,1,3,5,5]; var total = 0; for(var i = 0;i < data.length;i++)

  • Javascript函数式编程简单介绍

    几十年来,函数式编程一直是计算机科学狂热者的至爱,由于数学的纯洁性和谜一般的本质, 它被埋藏在计算机实验室,只有数据学家和有希望获得博士学位的人士使用.但是现在,它正经历一场复兴, 这要感谢一些现代语言比如Python,Julia,Ruby,Clojure以及--但不是最后一个--Javascript. 你是说Javascript?这个WEB脚本语言?没错! Javascript已经被证明是一项长期以来都没有消失的重要的技术.这主要是由于它扩展的一些框架和库而使其具有重生的能力, 比如backb

  • JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析

    本文实例讲述了JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法.分享给大家供大家参考,具体如下: 箭头函数在 JavaScript 里面,是 ES6(ES2015)才加入进来的.因为函数里有个像箭头一样的符号:=>,所以叫箭头函数,英文经常也会称为 Fat arrow functions,胖乎乎的箭头函数.这种函数也称为 lambda 表达式.箭头函数不能当作构造函数使用. 语法 一个箭头函数看起来像这样: const

随机推荐