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 相关文章推荐
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
javascript实现日期按月份加减
May 15 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
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图片验证码代码
2008/03/27 PHP
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
Extjs学习笔记之七 布局
2010/01/08 Javascript
模拟select的代码
2011/10/19 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
Python的面向对象思想分析
2015/01/14 Python
解决Python中回文数和质数的问题
2019/11/24 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
Python多线程thread及模块使用实例
2020/04/28 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
德国高尔夫商店:Par71.de
2020/11/29 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
学生安全承诺书
2014/05/22 职场文书
我的中国心演讲稿
2014/09/04 职场文书
授权收款委托书
2014/09/23 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
销售员岗位职责
2015/02/10 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏