前端开发工程师必备系列-理解神奇的JS闭包

对于JavaScript新手来说,闭包(Closures)是一个很神奇的东西。这篇讲解将通过一个非常浅显的代码示例来解释闭包

计数器

我们的目标是实现一个计数器,它的效果如下:

可知,每次执行increment()都会输出"Number of events: N",且N每次都会加1

这个计数器最直观的实现方式如下:

多个计数器

以上的代码非常简单。但是,当我们需要第二个计数器时,就会遇到问题了。当然,我们可以实现两个重复的计数器:

显然,以上的代码非常冗余,有待优化。当我们需要更多计数器时,使用这种方法将不太现实。这时,就需要神奇的闭包了。

使用闭包实现计数器

需要多个计数器,同时希望去除冗余代码的话,就可以使用闭包了:

在代码中,我们创建了两个独立的计数器counter1counter2,分别进行计数,互不干挠。代码看着有点奇怪,我们不妨拆分起来分析。

首先,我们来看看createCounter

创建了一个局部变量counter

创建了一个局部函数increment(),它可以对counter变量进行加1操作。

将局部函数increment()返回。注意,返回的是函数本身,而不是函数调用的结果。

看起来,createCounter()函数与我们最初定义的计数器非常相似。唯一的不同点在于:createCounter()将计数器封装在一个函数内,于是我们将它称作闭包

难以理解的一点在于,当我们使用createCounter()函数创建计数器时,实际上创建了一个新的函数:

闭包的神奇之处在于。每次使用createCounter()函数创建计数器increment时,都会创建一个对应的counter变量。并且,返回的increment函数会始终记住counter变量

更重要的是,这个counter变量是相互独立的。比如,当我们创建2个计数器时,每个计数器都会创建一个新的counter变量:

为计数器命名

多个计数器的输出信息都是“Number of events: N”,这样容易混淆。如果可以为每个计数器命名,则更加方便:

通过给createCounter传递一个新的counterName参数,可以很容易地做到这一点:

这样,createCounter()函数返回的计数器将同时记住两个局部变量:counterNamecounter

优化计数器调用方式

按照之前的实现方式,我们通过调用createCounter()函数可以返回一个计数器,直接调用返回的计数器就可以加1,这样做并不直观。如果可以如下调用将更好:

实现代码:

可看出,以上的代码返回了一个对象,这个对象包含了一个increment方法。

添加decrement方法

现在,我们可以给计数器添加一个decrement()方法

添加私有方法

前面的代码有两行重复的代码,即console.log语句。因此,我们可以创建一个display()方法用于打印counter的值:

看起来,display()函数与increment()函数以及decrement()函数差不多,但是其实它们很不一样。我们并没有将display()函数添加到返回的对象中,这就意味着以下代码会出错:

这时,display()相当于一个私有方法,我们只能在createCounter()函数内使用它。

闭包与面向对象编程

如果你接触过面向对象编程(OOP),则应该不难发现本文中所涉及的内容与OOP中的对象对象属性共有方法私有方法等概念非常相似。

闭包,与OOP相似,就是把数据和操作数据的方法绑定起来。因此,在需要OOP的时候,就可以使用闭包来实现。

总结

闭包(Closure)是JavaScript一个非常棒的特性。掌握它,我们可以从容应对一些常见的编程需求。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,384评论 19 139
  • 闭包 在本文章中** 闭包是指那些能够访问独立(自由)变量的函数 (变量在本地使用,但定义在一个封闭的作用域中)。...
    __Seve阅读 3,584评论 0 0
  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 9,688评论 0 13
  • 2017-03-22星期三"育心丽谦时间管理100天挑战营” 第64天 A、今日行动清单 1、【早起汇报 】: 4...
    嘉雁38677阅读 937评论 1 2
  • 岁月未老人己老, 堂前花落知多少。 月下庭院深幽静, 邂逅梅花枝头俏。 品茶吟诗悟人生, 笑看瑞雪空中飘。 秋去冬...
    清风明月冯耀杰阅读 2,325评论 1 3