in JavaScript

闭包和高阶函数

引子

最近发现一个问题:一部分写JS的人,其实对于函数式编程的概念并不是太了解。如下的代码片断,常常让他们觉得不可思议:

上述片断来自开源项目node-oauth2-server,这个authCodeGrant原型函数涉及到JS编程中经常用到的两个概念:闭包 和 高阶函数(check变量在这个函数中被闭包,authCodeGrant能返回函数,因此是一个高阶函数。

闭包

闭包就是引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在,即使已经离开了创造它的环境也不例外。

如何来理解这个自由变量呢?

自由变量是指在函数中使用的,但既不是函数参数也不是函数的局部变量的变量

什么样的变量是自由变量呢?如下片断中的freeVar对inner()来说就是个自由变量:

自由变量在闭包生成之前,并不是函数的一部分。在函数被调用时,闭包才会形成,函数将这个自由变量纳入自己的作用域,也就是说,自由变量从此与定义它的容器无关,以函数被调用那一刻为时间点,成为函数Context中的成员。

来看一个困惑前端的示例,循环添加事件:

上述片断的结果是:每个Button弹出的都是6。因为没有形成有效的闭包,因为闭包是有延迟求值特性的,所以在函数得到执行时,i === 6。

如果我们将它改成这样,i 做为外层函数的参数而被内层函数闭包,结果也是我们想要的:

Why? 因为这个clickEvent(i) 高阶函数,它将 i 作为自由变量(注意:i 并不是内函数的参数,也不是内函数的一部分)传递,在 click 时闭包已经形成并被传递。

闭包的作用域

虽然自由变量从闭包时起 “将和这个函数一同存在,即使已经离开了创造它的环境也不例外”,但我们必须搞清楚,闭包产生时的作用域,看个例子:

为什么在wrapper内部的echo()调用,会输出全局scope?因为:echo定义的位置,只能闭包到全局的scope,它的外层作用域就是全局空间,即便是延迟求值也如此。

把这段代码稍加改造,就能看得更清楚:

闭包的自由变量来自何处,和它的外层作用域(被定义的位置)也是有关系的。

高阶函数

上述循环事件片断中的 clickEvent(i) 即为一个高阶函数。

高阶函数满足:要么接受一个或多个函数作为输入;要么输出一个函数

为什么会用到高阶函数?粗糙的说,就是为了闭包。

接受函数作为输入的高阶函数

这种高阶函数可作为一种模式的构造器,比如:我有快速排序/堆排序/希尔排序 等若干个排序函数,那么我只需要提供一个高阶函数,就能生成基于这若干种排序函数的排序器:

当然,其实这个高阶函数也输出了函数

输出函数的高阶函数

和上例一样,高阶函数输出一个函数也很好理解:先闭包自由变量,根据它在将来调用时产生不一样的输出。

比如,我需要一个函数,既可以算平方,也可以算立方,最好什么方都能算,这时我就需要一个如下片断的高阶函数:

小结

通过闭包和高阶函数的组合运用,我们可以提炼出这样一种编程模式:通过分离>=2次的参数传递,以最少的代码实现动态的算法生成器。

打赏作者
您的支持将激励我继续创作!

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

Leave a Reply for my Cancel Reply

Write a Comment

Comment

  1. 做为一个老程序员,在学函数式编程时,遇到了点转不过弯的情况。
    非常感谢莫邪,从此文开始学习闭包和高阶函数的知识。

    对于有个地方,跟莫邪探讨一下:

    第1条记录
    第2条记录
    第3条记录
    第4条记录
    第5条记录
    第6条记录

    var buttonst_obj = document.getElementsByTagName(“button”);
    for (var i = 0, len = buttonst_obj.length; i < len; i++) {
    buttonst_obj[i].onclick = function() {
    alert(i);
    };
    }

    在点击按钮的视乎,应该就形成了闭包,只是仅仅形成了一个闭包的实例?内存中只有一个i,与匿名函数的代码段形成的闭包。

    能够访问i变量的应该只有for循环,以及匿名函数里的代码。
    由于闭包是运行期的概念,在真正执行点击之后,匿名函数真正绑定引用的i这个变量,所以变成 i = 6 了。

    var buttonst_obj = document.getElementsByTagName(“button”);
    for (var i = 0, len = buttonst_obj.length; i < len; i++) {
    buttonst_obj[i].onclick = clickEvent(i);
    }
    function clickEvent(i){
    return function () {
    console.log(i);
    }
    }

    这个例子里,clickEvent函数的return那段代码与clickEvent函数被调用时,所产生的栈桢上的变量i形成了闭包。
    所以,应该形成了 buttonst_obj.length 6 个闭包的实例。

    是不是可以这样理解?

    • 需要闭包的场景:
      因为循环中有异步函数(事件),在这个包裹循环量i的函数(事件)被触发时,其实循环已经结束,所以这个函数(事件)包裹的i总是最后一次的值。

      闭包传递的变量:既不是函数参数也不是函数的局部变量,这样在循环时它的值就被锁定在了异步函数的栈桢上。