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();
},);
}
};
上一篇:iOS8定位问题


下一篇:CAD快捷键大全