javascript设计模式学习之三—闭包和高阶函数
建议结合自己另外一篇关于闭包的文章一起阅读：http://www.cnblogs.com/bobodeboke/p/6127650.html
一、闭包
闭包某种程度上就是函数的内部函数，可以引用外部函数的局部变量。当外部函数退出后，如果内部函数依旧能被访问到，那么内部函数所引用的外部函数的局部变量就也没有消失，该局部变量的生存周期就被延续。
一个经典的例子如下：
<script>
//this丢失现象
document.addEventListener('DOMContentLoaded',function(){
var divs=document.getElementsByTagName('div');
console.log(divs);
for (var i = ; i < divs.length; i++) {
divs[i].onclick=function(){
alert(i);
}
};
},false); </script>
</head>
<body>
<div id="div1">testDiv</div>
<div id="div2">div2</div>
</body>
上面的代码中，因为div节点的Onclick事件是异步触发的，当事件被触发的时候，for循环早已结束，此时变量i的值已经是循环结束时候的2；如果想要达到想要的效果，需要采用闭包的形式，具体如下：
var divs=document.getElementsByTagName('div');
//console.log(divs);
for (var i = ; i < divs.length; i++) {
(function(i){
divs[i].onclick=function(){
alert(i);
}
})(i);
};
},false);
或者这种写法经过测试也是可行的：
var divs = document.getElementsByTagName('div');
for (var i = , len = divs.length; i < len; i++) {
divs[i].onclick = (function(i) {
return function() {
alert(i);
};
})(i);
}
注意不要写成下面这样，这和第一种并没有本质区别：
var divs=document.getElementsByTagName('div');
//console.log(divs);
for (var i = ; i < divs.length; i++) {
divs[i].onclick=function(){
(function(i){
alert(i);
})(i); //此时蹦出来的都是最后一个i值
}
};
},false);
也不要写成这种：
var divs = document.getElementsByTagName('div');
for (var i = , len = divs.length; i < len; i++) {
divs[i].onclick = (function(i) {
return function(i) {
alert(i);// 此时弹出来的是[object MouseEvent]
};
})(i);
}
二、高阶函数
高阶函数是至满足下列条件之一的函数：
1）函数可以作为参数被传递（如回调函数等）；
2）函数可以作为返回值输出；
高阶函数还应用于以下场景：
1）高阶函数实现AOP
（AOP面向切面编程，其主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来，这些无关模块通常包括日志统计，安全控制，异常处理等,然后再将这些支撑模块“动态织入”到另一个函数中去），在java中通常是适用反射和动态代理模式来实现AOP，而js中可以很方便的利用高阶函数实现AOP编程。 下例实际上就是针对函数的装饰者模式；
Function.prototype.before=function(beforeFn){
//假设调用的时候一般是fna.before(fnb);则这里的this是fna
var self=this;
//console.log(this);
//这里的this是装饰之后的函数调用的上下文，例子上f(3)调用时，没有显式的上下文，因此此时是window
//arguments即真正调用的时候传入的参数，此时beforeFn与self传入的是同一个参数，在例子中就是3
return function(){
//console.log(this);
//console.log(arguments);
beforeFn.apply(this,arguments);
return self.apply(this,arguments);
}
};
Function.prototype.after=function(afterFn){
var self=this;
return function(){
var ret=self.apply(this,arguments);
afterFn.apply(this,arguments);
return ret;
};
};
function fna(a){
console.log(+a);
}
function fnb(a){
console.log(+a);
}
var f=fna.before(fnb);
f();
2）函数柯里化（currying）
函数柯里化currying又称为部分求值，一个currying的函数会先接受一些参数，接收了这些参数以后，该函数并不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包中被保存，待函数真正需要求值的时候，之前传入的所有参数都会被一次性的用于求值。
下面是一个通用的函数currying的实现：
var currying=function(fn){
var args=[];
return function(){
if(arguments.length>=){
[].push.apply(args,arguments);
//其实这里有没有返回值不是必须的
//return arguments.callee;
//return fn;
}else{
return fn.apply(this,args);
}
};
};
function cost(){
var money=;
for(var i=;i<arguments.length;i++){
money+=arguments[i];
}
console.log(money);
return money;
}
var cost=currying(cost);
cost();//未真正求值
cost();//进行真正求值
3）函数节流
针对一些被频繁调用的函数，如onresize,mousemove等，它们共同的特征是函数被触发的频率太高，事实上可能并不需要以这么高的频率调用，下面的代码可以对此类函数指定触发的间隔。
var throttle=function(fn,interval){
var timer,
firstTime=true;
return function(){
if(firstTime){
//第一次的时候，不延迟执行
fn.apply(this,arguments);
return firstTime=false;
}
if(timer){
return false;
}
//延时一段时间之后执行
timer=setTimeout(function(){
//清除定时器
clearTimeout(timer);
timer=null;
fn.apply(this,arguments);
},interval||);
};
};
var i=;
window.onresize=throttle(function(){
console.log(i++);
});
4)分时函数
页面短时间内进行大量DOM操作会造成页面卡主的情况，比如需要循环在页面上新增1000个DOM节点，一种解决方案是下面的timeChunk函数，让原本1s钟创建1000个节点的操作，改为每200ms创建8个节点。
timeChunk接收三个参数，第一个参数是创建节点需要的数据，第二个参数是封装创建逻辑的函数，第三个参数表示每一批创建的节点数量。
var timeChunk=function(ary,fn,count){
var timer;
return function(){
var operation=function(){
for(var i=;i<Math.min(count||,ary.length);i++){
var curData=ary.shift();
fn(curData);
}
};
timer=setInterval(function(){
if(ary.length<=){
clearInterval(timer);
timer=null;
return;
}
operation();
},);
}
};
javascript设计模式学习之三—闭包和高阶函数的更多相关文章
- Javascript 闭包与高阶函数 ( 一 )
上个月,淡丶无欲 让我写一期关于 闭包 的随笔,其实惭愧,我对闭包也是略知一二 ,不能给出一个很好的解释,担心自己讲不出个所以然来. 所以带着学习的目的来写一写,如有错误,忘不吝赐教 . 为什么要有闭 ...
- Javascript 闭包与高阶函数 ( 二 )
在上一篇 Javascript 闭包与高阶函数 ( 一 )中介绍了两个闭包的作用. 两位大佬留言指点,下来我会再研究闭包的实现原理和Javascript 函数式编程 . 今天接到头条 HR 的邮件,真 ...
- JavaScript之闭包与高阶函数（一）
JavaScript虽是一门面向对象的编程语言,但同时也有许多函数式编程的特性,如Lambda表达式,闭包,高阶函数等. 函数式编程是种编程范式,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 ...
- JavaScript ES6函数式编程（一）：闭包与高阶函数
函数式编程的历史 函数的第一原则是要小,第二原则则是要更小 -- ROBERT C. MARTIN 解释一下上面那句话,就是我们常说的一个函数只做一件事,比如:将字符串首字母和尾字母都改成大写,我们此 ...
- [Node.js] 闭包和高阶函数
原文地址:http://www.moye.me/2014/12/29/closure_higher-order-function/ 引子 最近发现一个问题:一部分写JS的人,其实对于函数式编程的概念并 ...
- Python 进程线程协程 GIL 闭包 与高阶函数（五）
Python 进程线程协程 GIL 闭包 与高阶函数(五) 1 GIL线程全局锁 线程全局锁(Global Interpreter Lock),即Python为了保证线程安全而采取的独立线程运行的 ...
- 《JavaScript设计模式与开发实践》——第3章 闭包和高阶函数
闭包 变量的作用域和生存周期密切相关 高阶函数 函数可以作为参数被传递 函数可以作为返回值输出
- 理解运用JS的闭包、高阶函数、柯里化
JS的闭包,是一个谈论得比较多的话题了,不过细细想来,有些人还是理不清闭包的概念定义以及相关的特性. 这里就整理一些,做个总结. 一.闭包 1. 闭包的概念 闭包与执行上下文.环境.作用域息息相关 执 ...
- JS的闭包、高阶函数、柯里化
本文原链接:https://cloud.tencent.com/developer/article/1326958 https://cloud.tencent.com/developer/articl ...
随机推荐
- 【转载 来自sdnlab】 开放网络没那么简单
链接:开放网络没那么简单 本文是云杉网络工程师张攀对当前开源网络技术现状的一些思考和探索. 开放网元.释放数据的价值 从2012年开始至今,网络行业明显是O字辈的天下.所有我接触过了解过的组织和项目, ...
- linux 防火墙设置
防火墙的基本操作命令: 查询防火墙状态:[root@localhost ~]# service iptables status<回车> 停止防火墙:[root@localhost ~]# ...
- Smart ECM数据发布假数据测试工作。
1. ScriptBom.java//文件方法供接口调用 代码: public String setBomEcnHistoryDataByXML(String strView){//传入arg文件名 ...
- 如何查询MySql日志
如何查询MySql日志 分类: mysql2012-02-23 19:14 26756人阅读 评论(2) 收藏 举报 mysqlcommandprintingserversocketoutput 今天 ...
- Yii源码阅读笔记（十三）
Model类,集中整个应用的数据和业务逻辑: namespace yii\base; use Yii; use ArrayAccess; use ArrayObject; use ArrayItera ...
- 基于s5pv210的uboot总结
1.启动过程特征总结 (1)第一阶段为汇编阶段.第二阶段为C阶段 (2)第一阶段在SRAM中.第二阶段在DRAM中 (3)第一阶段注重SoC内部.第二阶段注重SoC外部Board内部 2.uboot的 ...
- Ruby--正则
1. 只取数字(用的是字符串替换) gsub(/[^0-9]/, “”)
- Converting from Decimal Notation to Binary Notation for Fractions
COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION Therefore, the conver ...
- Paging
COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION Both unequal fixed-si ...
- 关于Java中File的renameTo函数
先看Java编程实战经典中的一道习题: 编写程序,程序运行时输入目录名称,并把该目录下的所有文件名后缀修改成.txt. 按照题意,我在d盘新建了文件夹test,并在该文件夹下新建了一个文件file.d ...