摘自  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 高阶函数 闭包的更多相关文章

  1. JS高阶函数的理解（函数作为参数传递）

    JS高阶函数的理解 高阶函数是指至少满足下列条件之一的函数. · 函数可以作为参数被传递 · 函数可以作为返回值输出 一个例子,我们想在页面中创建100个div节点,这是一种写法.我们发现并不是所有用 ...

  2. React.js高阶函数的定义与使用

    /* 高阶函数的简单定义与使用 一: 先定义一个普通组件 二: 用function higherOrder(WrappendComponent) { return } 将组件包裹起来,并用export ...

  3. js高阶函数应用—函数防抖和节流

    高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...

  4. js高阶函数

    我是一个对js还不是很精通的选手: 关于高阶函数详细的解释 一个高阶函数需要满足的条件(任选其一即可) 1:函数可以作为参数被传递 2:函数可以作为返回值输出 吧函数作为参数传递,这代表我们可以抽离一 ...

  5. js高阶函数应用—函数柯里化和反柯里化

    在Lambda演算(一套数理逻辑的形式系统,具体我也没深入研究过)中有个小技巧:假如一个函数只能收一个参数,那么这个函数怎么实现加法呢,因为高阶函数是可以当参数传递和返回值的,所以问题就简化为:写一个 ...

  6. Python高阶函数-闭包

    高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回. 在这里我们首先回忆一下python代码运行的时候遇到函数是怎么做的. 从python解释器开始执行之后,就在内存中开辟了一个空间 每当 ...

  7. JS高阶函数与函数柯里化

    高阶函数 满足下列条件之一的函数: 函数作为参数被传递(如回调函数): 函数可以作为返回值输出: 一些内置高阶函数的例子: Array.prototype.map map()方法通过调用对输入数组中的 ...

  8. 浅谈JS高阶函数

    引入 我们都知道函数是被设计为执行特定任务的代码块,会在某代码调用它时被执行,获得返回值或者实现其他功能.函数有函数名和参数,而函数参数是当调用函数接收的真实的值. 今天要说的高阶函数的英文为High ...

  9. JS高阶函数的使用

    1.何为高阶函数呢? JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数.简单来说,就是对其他 ...

随机推荐

  1. JAVA进阶7

    间歇性混吃等死,持续性踌躇满志系列-------------第7天 1.Map接口的常用方法 import java.util.HashMap; import java.util.Map; publi ...

  2. MySql流程控制结构

    序号 结构名称 说明 1 顺序结构 程序从上往下依次执行 2 分支结构 程序从两条或多条路径中选择一条去执行 3 循环结构 程序在满足一定条件的基础上,重复执行一段代码 ⒈顺序结构 你啥都不干默认就是 ...

  3. PLSQL安装、PLSQL汉化、激活

    前言 新版PLSQL连接Oracle时,不需要Oracle客户端为32位了,安装完Oracle后也不需要在单独安装客户端. 一.准备工作 1.点击下载PLSQL,本次安装的PLSQL版本为12.0.7 ...

  4. 一篇文让你看懂NB-IoT、LoRa、eMTC、Sigfox及ZigBee的应用场景【转】

    转自:https://blog.csdn.net/nicholas_dlut/article/details/81051269

  5. Python基础【第一篇】

     一.Python简介 Python的创始人(Guido von Rossum 荷兰人),Guido希望有一种语言既能像C一样方便地调用操作系统的功能接口,也能像shell脚本一样,轻松地实现编程,A ...

  6. 【原创】大叔问题定位分享（17）spark查orc格式数据偶尔报错NullPointerException

    spark查orc格式的数据有时会报这个错 Caused by: java.lang.NullPointerException at org.apache.hadoop.hive.ql.io.orc. ...

  7. tensorboard基础使用

    github上的tensorboard项目:https://github.com/tensorflow/tensorboard/blob/master/README.md 目录 基础介绍 基本使用 几 ...

  8. oAuth2授权协议 & 微信授权登陆和绑定 & 多环境共用一个微信开发平台回调设置

    OAuth2(open Auth)开放授权协议 授权码模式流程: 1.浏览器(客户端)点击一个比如使用微信登陆按钮 2.会跳到认证服务器页面,让用户选择是否授权 3.如果用户点击授权,那么会跳转到开始 ...

  9. 【python】__import__

    函数定义 __import__(name, globals={}, locals={}, fromlist=[], level=-1) -> module Import a module. Be ...

  10. ssm实现图片上传

    在使用ssm完成前后端对接时,总免不了前台传过来的文件问题,而html中的<input>框直接使用时,往往会获取不到路径,今天在完成图片上传后的来做个总结 首先,前台页面 <!DOC ...