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扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
Angular简单验证功能示例
Dec 22 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
vue里使用create, mounted调用方法
Apr 26 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
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
chrome原生方法之数组
2011/11/30 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
在Python中进行自动化单元测试的教程
2015/04/15 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
zookeeper python接口实例详解
2018/01/18 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
详解python运行三种方式
2019/05/13 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
新闻编辑求职信
2014/04/09 职场文书
应聘销售主管的求职信
2014/04/26 职场文书
个人年终总结结尾
2015/03/06 职场文书
交通事故被告代理词
2015/05/23 职场文书
楚门的世界观后感
2015/06/03 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书