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 ...
随机推荐
- java命令行参数
命令行参数就是main方法里面的参数String[] args他就是一个数组,args只是数据类型的一个名称,就是一个数组的变量,名称无所谓,类型没变就行了.这个就是程序的入口点.如图7.4所示: 图 ...
- java类的继承
继承就是在一个现有类型的基础上,通过增加新的方法或者重定义已有方法(重写)的方式,产生一个新的类型.继承是面向对 象的三个基本特征--封装.继承.多态的其中之一,我们在使用java时编写的每一个类都是 ...
- HDU 3639 Bone Collector II（01背包第K优解）
Bone Collector II Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- NOJ 1643 阶乘除法（YY+小技巧）
[1643] 阶乘除法 时间限制: 5000 ms 内存限制: 65535 K 问题描述 输入两个正整数 n, m,输出 n!/m!,其中阶乘定义为 n!= 1*2*3*...*n (n>=1) ...
- linux消息队列的使用及内核实现原理
mq_receive NAME mq_open - open a message queue SYNOPSIS #include <fcntl.h> /* For O_* constant ...
- AC之路开始了~
已经进行了半年ACM的学习啦~虽然实力很弱但是仍然快快乐乐的慢慢学习... 新建了我的博客~ 记录A题经验 感悟学习点滴~ 加油~
- Apache Spark源码走读之7 -- Standalone部署方式分析
欢迎转载,转载请注明出处,徽沪一郎. 楔子 在Spark源码走读系列之2中曾经提到Spark能以Standalone的方式来运行cluster,但没有对Application的提交与具体运行流程做详细 ...
- VSS 访问问题
局域网同一网段的2台电脑,防火墙都是关闭的 A能ping通B 但A在运行输入B的IP地址 不能访问 求解答 1.确认输入的地址格式没有写错,例如B的IP地址为:192.168.1.20.那么在A电脑的 ...
- LVS的DR模式配置
一.基本规划负载均衡调度器 192.168.1.104 默认网关 192.168.1.1 ip别名 192.168.1.233realserver1 192.168 ...
- Java中测试对象的等价性
Java中用于测试对象的等价性有三个操作符:== , != 和 Equals() 对于基本类型即int,boolean, byte 等等来说,==和 != 比较的是 基本类型的内容,这和c.c++是一 ...