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 自定义的联动下拉框
Feb 07 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
Mar 10 Javascript
javascript sudoku 数独智力游戏生成代码
Mar 27 Javascript
了解一点js的Eval函数
Jul 26 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 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
我的论坛源代码(一)
2006/10/09 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
JavaScript Timer实现代码
2010/02/17 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
python中hashlib模块用法示例
2017/10/30 Python
Python编程中类与类的关系详解
2019/08/08 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
如何理解transaction事务的概念
2015/05/27 面试题
学生实习介绍信
2014/01/15 职场文书
认识深刻的检讨书
2014/02/16 职场文书
供用电专业求职信
2014/07/07 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers