Javascript闭包与函数柯里化浅析


Posted in Javascript onJune 22, 2016

闭包和柯里化都是JavaScript经常用到而且比较高级的技巧,所有的函数式编程语言都支持这两个概念,因此,我们想要充分发挥出JavaScript中的函数式编程特征,就需要深入的了解这两个概念,闭包事实上更是柯里化所不可缺少的基础。

一、柯里化的概念

在计算机科学中,柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。这个技术由Christopher Strachey以逻辑学家 Haskell Curry 命名的,尽管它是 Moses Schnfinkel 和 Gottlob Frege 发明的。在直觉上,柯里化声称“如果你固定某些参数,你将得到接受余下参数的一个函数”。所以对于有两个变量的函数yx,如果固定了y = 2,则得到有一个变量的函数2x。

柯里化就是预先将函数的某些参数传入,得到一个简单的函数。但是预先传入的参数被保存在闭包中,因此会有一些奇特的特性。比如:

var adder = function(num){
  return function(y){
     return num + y;
  }
}
var inc = adder(1);
var dec = adder(-1)

这里的inc/dec两个变量事实上是两个新的函数,可以通过括号来调用,比如下例中的用法:

//inc, dec现在是两个新的函数,作用是将传入的参数值(+/-)1
print(inc(99));//100
print(dec(101));//100
print(adder(100)(2));//102
print(adder(2)(100));//102

二、柯里化的应用

根据柯里化的特性,我们可以写出更有意思的代码,比如在前端开发中经常会遇到这样的情况,当请求从服务端返回后,我们需要更新一些特定的页面元素,也就是局部刷新的概念。使用局部刷新非常简单,但是代码很容易写成一团乱麻。而如果使用柯里化,则可以很大程度上美化我们的代码,使之更容易维护。我们来看一个例子:

//update会返回一个函数,这个函数可以设置id属性为item的web元素的内容
function update(item){
  return function(text){
     $("div#"+item).html(text);
  }
}
//Ajax请求,当成功是调用参数callback
function refresh(url, callback){
  var params = {
     type : "echo",
     data : ""
  };
  $.ajax({
     type:"post",
     url:url,
     cache:false,
     async:true,
     dataType:"json",
     data:params,
     //当异步请求成功时调用
     success: function(data, status){
        callback(data);
     },
     //当请求出现错误时调用
     error: function(err){
        alert("error : "+err);
     }
  });
}
refresh("action.do?target=news", update("newsPanel"));
refresh("action.do?target=articles", update("articlePanel"));
refresh("action.do?target=pictures", update("picturePanel"));
其中,update函数即为柯里化的一个实例,它会返回一个函数,即:
update("newsPanel") = function(text){
  $("div#newsPanel").html(text);
}

由于update(“newsPanel”)的返回值为一个函数,需要的参数为一个字符串,因此在refresh的Ajax调用中,当success时,会给callback传入服务器端返回的数据信息,从而实现newsPanel面板的刷新,其他的文章面板articlePanel,图片面板picturePanel的刷新均采取这种方式,这样,代码的可读性,可维护性均得到了提高。

以上就是本文的全部内容,了解更多JavaScript的语法,大家可以查看:《JavaScript 参考教程》、《JavaScript代码风格指南》,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
微信小程序实现选项卡滑动切换
Oct 22 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 #Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 #Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 #Javascript
Javascript实现图片不间断滚动的代码
Jun 22 #Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 #Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 #Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 #Javascript
You might like
也谈截取首页新闻 - 范例
2006/10/09 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
php给图片加文字水印
2015/07/31 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
Python中正则表达式的详细教程
2015/04/30 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
室内设计专业毕业生求职信
2014/05/02 职场文书
小学教师培训方案
2014/06/09 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
库房管理员岗位职责
2015/02/12 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
pytest配置文件pytest.ini的详细使用
2021/04/17 Python