js 高阶函数 闭包
摘自 https://www.cnblogs.com/bobodeboke/p/5594647.html
建议结合另外一篇关于闭包的文章一起阅读：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 = 0; 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 = 0; i < divs.length; i++) {
(function(i){
divs[i].onclick=function(){
alert(i);
}
})(i);
};
},false);
或者这种写法经过测试也是可行的：
var divs = document.getElementsByTagName('div');
for (var i = 0, 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 = 0; i < divs.length; i++) {
divs[i].onclick=function(){
(function(i){
alert(i);
})(i); //此时蹦出来的都是最后一个i值
}
};
},false);
也不要写成这种：
var divs = document.getElementsByTagName('div');
for (var i = 0, 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(1+a);
}
function fnb(a){
console.log(2+a);
}
var f=fna.before(fnb);
f(3);
2）函数柯里化（currying）
函数柯里化currying又称为部分求值，一个currying的函数会先接受一些参数，接收了这些参数以后，该函数并不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包中被保存，待函数真正需要求值的时候，之前传入的所有参数都会被一次性的用于求值。
下面是一个通用的函数currying的实现：
var currying=function(fn){
var args=[];
return function(){
if(arguments.length>=1){
[].push.apply(args,arguments);
//其实这里有没有返回值不是必须的
//return arguments.callee;
//return fn;
}else{
return fn.apply(this,args);
}
};
};
function cost(){
var money=0;
for(var i=0;i<arguments.length;i++){
money+=arguments[i];
}
console.log(money);
return money;
}
var cost=currying(cost);
cost(200);//未真正求值
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||1000);
};
};
var i=1;
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=0;i<Math.min(count||1,ary.length);i++){
var curData=ary.shift();
fn(curData);
}
};
timer=setInterval(function(){
if(ary.length<=0){
clearInterval(timer);
timer=null;
return;
}
operation();
},200);
}
};
另外一篇关于高阶函数的文章
https://www.cnblogs.com/goloving/p/8361705.html
js 高阶函数 闭包的更多相关文章
- JS高阶函数的理解（函数作为参数传递）
JS高阶函数的理解 高阶函数是指至少满足下列条件之一的函数. · 函数可以作为参数被传递 · 函数可以作为返回值输出 一个例子,我们想在页面中创建100个div节点,这是一种写法.我们发现并不是所有用 ...
- React.js高阶函数的定义与使用
/* 高阶函数的简单定义与使用 一: 先定义一个普通组件 二: 用function higherOrder(WrappendComponent) { return } 将组件包裹起来,并用export ...
- js高阶函数应用—函数防抖和节流
高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...
- js高阶函数
我是一个对js还不是很精通的选手: 关于高阶函数详细的解释 一个高阶函数需要满足的条件(任选其一即可) 1:函数可以作为参数被传递 2:函数可以作为返回值输出 吧函数作为参数传递,这代表我们可以抽离一 ...
- js高阶函数应用—函数柯里化和反柯里化
在Lambda演算(一套数理逻辑的形式系统,具体我也没深入研究过)中有个小技巧:假如一个函数只能收一个参数,那么这个函数怎么实现加法呢,因为高阶函数是可以当参数传递和返回值的,所以问题就简化为:写一个 ...
- Python高阶函数-闭包
高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回. 在这里我们首先回忆一下python代码运行的时候遇到函数是怎么做的. 从python解释器开始执行之后,就在内存中开辟了一个空间 每当 ...
- JS高阶函数与函数柯里化
高阶函数 满足下列条件之一的函数: 函数作为参数被传递(如回调函数): 函数可以作为返回值输出: 一些内置高阶函数的例子: Array.prototype.map map()方法通过调用对输入数组中的 ...
- 浅谈JS高阶函数
引入 我们都知道函数是被设计为执行特定任务的代码块,会在某代码调用它时被执行,获得返回值或者实现其他功能.函数有函数名和参数,而函数参数是当调用函数接收的真实的值. 今天要说的高阶函数的英文为High ...
- JS高阶函数的使用
1.何为高阶函数呢? JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数.简单来说,就是对其他 ...
随机推荐
- 第五节，python基本语法
1.类(Class) Python中的类的概念与其它语言类似,比较特殊的是protected和private在python中没有明确的限制,通常的惯例是用单下划线_表示protected,用双下划线开 ...
- 【ARTS】01_21_左耳听风-201900401~201900407
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...
- 【原创】大叔问题定位分享（7）Spark任务中Job进度卡住不动
Spark2.1.1 最近运行spark任务时会发现任务经常运行很久,具体job如下: Job Id ▾ Description Submitted Duration Stages: Succeed ...
- VS中展开和折叠代码，还有其他快捷操作
[转]VS中展开和折叠代码 VS2005代码编辑器的展开和折叠代码确实很方便和实用.以下是展开代码和折叠代码所用到的快捷键,很常用: Ctrl + M + O: 折叠所有方法 Ctrl + M + ...
- Vue项目中使用webpack配置了别名，引入的时候报错
chainWebpack(config) { config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('src/as ...
- win10安装mysql5.7.20解压版
mysql安装包可到官网下载,地址:https://dev.mysql.com/downloads/mysql 1.首先解压文件包,我这解压到E:\install_work\mysql目录下: 2.发 ...
- java实现http请求
String apiUrl = "https://api.seniverse.com/v3/weather/now.json?key=" + key + "&lo ...
- numpy有什么用【老鱼学numpy】
老鱼为了跟上时代潮流,也开始入门人工智能.机器学习了,瞬时觉得自己有点高大上了:). 从机器学习的实用系列出发,我们会以numpy => pandas => scikit-learn =& ...
- 第四章：4.0 python常用的模块
1.模块.包和相关语法 使用模块好处: 最大的好处是大大提高了代码的可维护性.其次,编写代码不必从零开始.当一个模块编写完毕,就可以被其他地方引用.我们在编写程序的时候,也经常引用其他模块,包括Pyt ...
- Service,测试
这里介绍一些symfony的一些其他内容 1.创建并使用自定义service 首先创建service目录,在下面自定义一个类,并设置测试方法,之后在resources目录下面的services.xml ...