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 相关文章推荐
本地对象Array的原型扩展实现代码
Dec 04 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 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.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
十大使用PHP框架的理由
2015/09/26 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
Python timeit模块的使用实践
2020/01/13 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
违反学校规则制度检讨书
2015/01/01 职场文书
小学教师自我评价
2015/03/04 职场文书
物业保洁员管理制度
2015/08/05 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫