建议结合自己另外一篇关于闭包的文章一起阅读：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 ...
随机推荐
-
IOS数据存储之文件沙盒存储
前言: 之前学习了数据存储的NSUserDefaults,归档和解档,对于项目开发中如果要存储一些文件,比如图片,音频,视频等文件的时候就需要用到文件存储了.文件沙盒存储主要存储非机密数据,大的数据. ...
-
angularJs之http后台访问数据
AngularJS XMLHttpRequest $http 是AngularJS中的一个核心服务,用于读取远程服务器的数据. 读取JSON 文件 以下是存储在web服务器上的JSON 文件: h ...
-
request,session,application
JSP 的3个内置对象request,session,application,其实都有一个作用域,这些对象内部有一个Map成员用于存放数据,比如session对象的setAttribute(key,v ...
-
自己动手写RTP服务器——关于RTP协议
转自:http://blog.csdn.net/baby313/article/details/7353605 本文会带领着你一步步动手实现一个简单的RTP传输服务器,旨在了解RTP流媒体传输协议以及 ...
-
iOS开发 判断字符串是不是网址
- (BOOL)isUrlString { NSString *emailRegex = @"[a-zA-z]+://.*"; NSPredicate *emailTest = [ ...
-
Oracle中用一张表的字段更新另一张表的字段
今天在做项目的过程中,发现开发库中某张表的某字段有许多值是空的,而测试库中该字段的值则是有的. 那么,有什么办法能将测试库中该字段的值更新到开发库中呢? SQL Server中这是比较容易解决的,而O ...
-
我来讲讲在c#中怎么进行xml文件操作吧，主要是讲解增删改查！
我把我写的四种方法代码贴上来吧,照着写没啥问题. 注: <bookstore> <book> <Id>1</Id> <tate>2010-1 ...
-
零基础学习iOS开发
零基础学习iOS开发不管你是否涉足过IT领域,只要你对iOS开发感兴趣,都可以阅读此专题. [零基础学习iOS开发][02-C语言]11-函数的声明和定义 摘要: 在上一讲中,简单介绍了函数的定义和使 ...
-
java读写锁源码分析(ReentrantReadWriteLock)
读锁的调用,最终委派给其内部类 Sync extends AbstractQueuedSynchronizer /** * 获取读锁,如果写锁不是由其他线程持有,则获取并立即返回: * 如果写锁被其他 ...
-
Web API2 使用EF Code Migrations to Seed DB
console Enable-Migrations 运行这个命令,添加一个文件夹Migrations,Configuration.cs在这文件夹中 打开 Configuration.cs file. ...