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


Posted in Javascript onApril 08, 2020

本文实例讲述了JS Thunk 函数的含义和用法。分享给大家供大家参考,具体如下:

前面我们已经学习过了Generator 函数的优势和使用场景。

这篇文章我们继续学习阮老师的第二篇文章,Thunk 函数的含义和用法

说实话,在这之前是没听过这个词的,但其实如果你对犀牛书里的不完全函数有认真看过的话
理解起来也不是很费劲。

首先什么是 thunk 函数?

很多场景下我们都会陷入一个问题,就是函数参数的求值时间。

是函数调用时即求值还是在函数内使用时才求值?

var x = 1;
function f(m){
 return m * 2;   
}
f(x + 5)
//我们把在调用时就计算的方式称为传值调用,等同于:
f(6)
//我们把在函数内部使用时才求值的方式称为传名调用,等同于:
return (x + 5) * 2;

两种方式各有利弊,传值调用比较简单,但是如果计算后的结果没有在程序中使用的话,损失就有点大。
因此有很多场景都倾向于传名调用。

但是像 C,java 的编译方式都是固定的,如何基于现有基础改变程序的执行方式。

比较常见的是将想要传名调用的参数放到一个临时函数之中,把临时函数当做参数,只在使用的时候执行。

这个包装参数的临时函数就叫 Thunk 函数。我们试一下用 Thunk 函数改写一下上面的例子:

function f(m){
 return m * 2;   
}
 
f(x + 5);
 
// 等同于
 
var thunk = function () {
 return x + 5;
};
 
function f(thunk){
 return thunk() * 2;
}

其实这里我倒觉得可以翻翻犀牛书里的不完全函数,跟 Thunk 函数一个道理,

通过 return 一个 function 来实现传名调用。

老师也顺便介绍了用在生产环境的 Thunkify 模块

我们看一下源码,还是有一些好玩的地方的。

function thunkify(fn){
 //全局返回一个临时函数
 return function(){
  var args = new Array(arguments.length);
  var ctx = this;
 
  for(var i = 0; i < args.length; ++i) {
   args[i] = arguments[i];
  }
  //上面一段将参数copy到args
  
  return function(done){
   var called; 
   args.push(function(){
    if (called) return; //对callback重新包装,控制callback只执行一次
    called = true;
    done.apply(null, arguments);
   });
 
   try {
    fn.apply(ctx, args);
   } catch (err) {
    done(err);
   }
  }
 }
};

执行结果:

function f(a, b, callback){
 var sum = a + b;
 callback(sum);
 callback(sum);
}
 
var ft = thunkify(f);
ft(1, 2)(console.log); 
// 3

这个地方的理解,方法f在执行时的参数并不是 1,2,console.log

console.log 参数在 thunkify 内部被重新包装,成了:

function(){
 if (called) return; //对callback重新包装,控制callback只执行一次
 called = true;
 console.log.apply(null, arguments);
}

了解了 Thunk 函数之后,我们要停下来想一想,还是那句话,它的出现要解决什么问题?

是不是一定要使用 Thunk 函数?Thunk 用在什么场景下?

从前面的内容来看,其实并没有什么用,可能概念比较新颖,但是使用起来好像并没有太多提高。

但是没用的话我们也不会写这么一篇文章。

自从有了 Generator 函数,Thunk 函数现在可以用于 Generator 函数的自动流程管理。

看一下例子:

var fs = require('fs');
var thunkify = require('thunkify');
var readFile = thunkify(fs.readFile);
 
var gen = function* (){
 var r1 = yield readFile('/etc/fstab');
 console.log(r1.toString());
 var r2 = yield readFile('/etc/shells');
 console.log(r2.toString());
};

这个例子中,我们使用 yield 将执行权交给下一个协程,那么就需要有一种方法把执行权在交还给当前函数

这种方法就是 Thunk 函数,因为它可以重新包装回调函数,我们可以自己写包装函数,将执行权交还给 Generator 函数。

为了对比,我们先看一下如果手动执行上面的代码会是什么样的:

var g = gen();         //开始执行协程
var r1 = g.next();       //读取第一个文件
r1.value(function(err, data){  //读取完成执行回调
 if (err) throw err;
 var r2 = g.next(data);    //读取第二个文件
 r2.value(function(err, data){ //读取完成执行回调
  if (err) throw err;
  g.next(data);        //结束协程
 });
});

不难发现,上面的代码其实就是将同一个回调函数传入 value 属性(next 执行返回 value 和 done )

我在看的时候就在想,这个value是属性啊,为什么可以执行?还传递参数?

慢慢理一理:

value属性是yield的返回值,gen中的yield返回的是一个 Thunk 函数,不是固定值。

所以可以执行value,看前面例子里的这句:ft(1, 2)(console.log);

value就等同于ft(1, 2)的返回值

传递的function回调等同于(console.log);

这么是不是就理解了?

Thunk 函数真正的威力,在于可以自动执行 Generator 函数。下面就是一个基于 Thunk 函数的 Generator 执行器:

function run(fn) {
 var gen = fn();  //自动开始协程
 //对next进行包装,形成 Thunk 函数,遍历调用
 function next(err, data) {
  var result = gen.next(data);
  if (result.done) return;
  result.value(next);
 }
 next();
 /* 参考bootstrap的写法改写一下
 !function next(err, data) {
  var result = gen.next(data);
  if (result.done) return;
  result.value(next);
 }();
 */
}
run(gen);

上面的写法很简单吧,这么改写之后就不需要你手动的去控制执行next的时机了

只需要执行run函数就行。但是要保证每一个yield后面都是一个 Thunk 函数,否则的话就不能自动执行了。

这一章的学习总结就结束了,我们学会了如何使用 Thunk 函数实现自动执行,但 Thunk 函数并不是 Generator 函数自动执行的唯一方案。

因为自动执行的关键是,必须有一种机制,自动控制 Generator 函数的流程,接收和交还程序的执行权。回调函数可以做到这一点,Promise 对象也可以做到这一点。

下一篇文章我们去看一下基于promise实现的自动执行器:co

原文:Thunk 函数的含义和用法

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
简介JavaScript错误处理机制
Aug 04 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 #Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 #Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 #Javascript
vue开发移动端底部导航条功能
Apr 08 #Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 #Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 #Javascript
JS快速实现简单计算器
Apr 08 #Javascript
You might like
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
PHP异常处理浅析
2015/05/12 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
js 内存释放问题
2010/04/25 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
python抽象基类用法实例分析
2015/06/04 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
python能否java成为主流语言吗
2020/06/22 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
编辑找工作求职信范文
2013/12/16 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android