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 相关文章推荐
Javascript学习笔记8 用JSON做原型
Jan 11 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 Javascript
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
打造计数器DIY三步曲(上)
2006/10/09 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
Javascript 二维数组
2009/11/26 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
vue2配置scss的方法步骤
2019/06/06 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
js数组的基本使用总结
2021/01/18 Javascript
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
2016年习主席讲话学习心得体会
2016/01/20 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android
Win11快速关闭所有广告推荐
2022/04/19 数码科技
Python开发五子棋小游戏
2022/04/28 Python
Hive常用日期格式转换语法
2022/06/25 数据库