[译]其实闭包并不高深莫测
其实闭包并不高深莫测
标签: JavaScript closure translate
本文由 伯乐在线 - 刘健超-J.c 翻译,Namco 校稿。未经许可,禁止转载!
英文出处:Igor Šarčević
几年前,我还是一名高中生时,我的一个朋友向我讲述了闭包的概念。虽然我当时一点也不明白他想表达的内容,但他在向我讲述时却表现得非常高大上。对于当时的我来说,闭包看来是一个深不可测的魔法。即使 Google 后也不能解除我的疑惑。而所有我能查阅的科技文章,都为高中生所难以理解。
现在的我回想起高中编程时光,我都会不禁一笑。这是一篇试图用一些简单项目去解释闭包的文章,这会帮助我的学弟学妹们能轻易地驾驭强大的闭包。
计数事件
我们将从一个简单的问题开始。如果将闭包引入到该程序中,将能轻易解决这个问题。
我们为计数事件创建一个机制。该机制将有助于我们跟踪代码的执行,甚至去调试一些问题。例如,我会以下面的方式调用计数器:
increment(); // Number of events: 1
increment(); // Number of events: 2
increment(); // Number of events: 3
正如你所看到的上述案例,我们希望代码会在我们每次执行 increment()
函数时,会显示一条信息“Number of events: x”。下面以简单的方式实现该函数:
var counter = 0;function increment() {counter = counter + 1;console.log("Number of events: " + counter);
}
多个计数器
上述代码非常简单明确。然而,当我们引入第二个计数器时,就会很快遇到问题。当然,我们能实现两个单独的计数器机制,如下面的代码,但很明显有需要改进的地方:
var counter1 = 0;function incrementCounter1() {counter1 = counter1 + 1;console.log("Number of events: " + counter1);
}var counter2 = 0;function incrementCounter2() {counter2 = counter2 + 1;console.log("Number of events: " + counter2);
}incrementCounter1(); // Number of events: 1
incrementCounter2(); // Number of events: 1
incrementCounter1(); // Number of events: 2
上述代码出现了不必要的重复。明显地,这种解决办法并不适用于超过二或三个记数器的情况。我们需要想出更好的解决方案。
引入我们第一个闭包
在保持与上述例子相似的情况下,我们以某种方式引入新的计数器,该计数器捆绑了一个能自增的函数,而且没有大量重复的代码。下面尝试使用闭包:
function createCounter() {var counter = 0;function increment() {counter = counter + 1;console.log("Number of events: " + counter);}return increment;
}
让我们看看这是如何工作的。我们将创建两个计数器,并让它们跟踪两个独立的事件:
var counter1 = createCounter();
var counter2 = createCounter();counter1(); // Number of events: 1
counter1(); // Number of events: 2counter2(); // Number of events: 1counter1(); // Number of events: 3
啊,这看起来有点复杂…然而,这实际上是非常简单的。我们只需将实现逻辑分成几个易于理解的块。下面就看看我们实现了什么:
- 首先,创建了一个名为
counter
的局部变量。 - 然后,创建了一个名为
increment
的局部函数,它能增加counter
变量值。如果你从未接触过将函数作为数据来处理的函数式编程,这也许对你非常陌生。然而,这是非常常见的,而且只需要一些练习就能适应这一概念。
你应该注意到这一点,createCounter()
的实现与我们原先的计数器实现几乎一致。唯一不同的是它被包装或封装在一个函数体内。因此,这些构造器都被称为闭包。
现在是棘手的部分:
- 在
createCounter()
的最后一步返回了局部函数increment
。请注意,这并不是返回调用函数的运行结果,而是函数本身。
这就意味着,当我们在这个代码段下面创建新的计数器时,实际上是生成新函数。
// fancyNewCounter is a function in this scope
// fancyNewCounter 是当前作用域的一个函数var fancyNewCounter = createCounter();
这就是闭包生命周期的力量所在。每个生成的函数,都会保持在 createCounter()
所创建的 counter
变量的引用。在某种意义上,被返回的函数记住了它所被创建时的环境。
在这里需要提醒大家注意的是,内部变量 counter
都是独立存在于每个作用域!例如,如果我们创建两个计数器,那么它们都会在闭包体内会分配一个新的 counter
变量。我们观察以下代码:
每个计数器都会从 1 算起:
var counter1 = createCounter();
counter1(); // Number of events: 1
counter1(); // Number of events: 2var counter2 = createCounter();
counter2(); // Number of events: 1
第二个计数器并不会干扰第一个计数器的值:
counter1(); // Number of events: 3
为我们的计数器命名
信息“Number of events: x” 是没问题的,但如果能描述每个计数事件的类型,那么这将会更好。如以下例子,我们为计数器添加名字:
var catCounter = createCounter("cats");
var dogCounter = createCounter("dogs");catCounter(); // Number of cats: 1
catCounter(); // Number of cats: 2
dogCounter(); // Number of dogs: 1
我们仅需通过为闭包传递参数就能达到这种目的。
function createCounter(counterName) {var counter = 0;function increment() {counter = counter + 1;console.log("Number of " + counterName + ": " + counter);}return increment;
}
非常棒!请注意上述 createCounter()
函数的一个有趣行为。返回函数不仅记住了局部变量 counter
,而且记住了传递进来的参数。
改善公用接口
我所说的公用接口是指,我们如何使用计数器。这并不单纯指,当被创建的计数器被调用时会增加值。
var dogCounter = createCounter("dogs");dogCounter.increment(); // Number of dogs: 1
让我们创建这样的一个实现:
function createCounter(counterName) {var counter = 0;function increment() {counter = counter + 1;console.log("Number of " + counterName + ": " + counter);};return { increment : increment };
}
在上述代码段,我们简单地返回一个对象,该对象包含了该闭包的所有功能。在某种意义下,我们能定义闭包能返回的一系列信息。
增加一个减量
现在,我们能非常简单地为我们的计数器引入减量(decrement)。
function createCounter(counterName) {var counter = 0;function increment() {counter = counter + 1;console.log("Number of " + counterName + ": " + counter);};function decrement() {counter = counter - 1;console.log("Number of " + counterName + ": " + counter);};return {increment : increment,decrement : decrement};
}var dogsCounter = createCounter("dogs");dogsCounter.increment(); // Number of dogs: 1
dogsCounter.increment(); // Number of dogs: 2
dogsCounter.decrement(); // Number of dogs: 1
隐藏计数器行为
上述代码有两处冗余的代码行。没错,就是 console.log
。如果能创建一个专门用于显示计数器值的函数将会更好。让我们调用 display
函数。
function createCounter(counterName) {var counter = 0;function display() {console.log("Number of " + counterName + ": " + counter);}function increment() {counter = counter + 1;display();};function decrement() {counter = counter - 1;display();};return {increment : increment,decrement : decrement};
}var dogsCounter = createCounter("dogs");dogsCounter.increment(); // Number of dogs: 1
dogsCounter.increment(); // Number of dogs: 2
dogsCounter.decrement(); // Number of dogs: 1
尽管 display()
与increment()
、decrement()
函数看似大同小异,但由于我们没有在返回对象里包含它,意味着以下代码将会调用失败:
var dogsCounter = createCounter("dogs");dogsCounter.display(); // ERROR !!!
我们让 display()
函数对外部来说是不可见的。它仅在 createCounter()
内可用。
抽象数据类型
正如你所见,我们通过闭包能非常简单地引入抽象数据类型。例如,让我们通过闭包实现一个 堆栈)。
function createStack() {var elements = [];return {push: function(el) { elements.unshift(el); },pop: function() { return elements.shift(); }};
}var stack = createStack();stack.push(3);
stack.push(4);
stack.pop(); // 4
注意:在 JavaScript 中,闭包并不是堆栈数据类型的最佳实现方式。用 Prototype 实现会对内存更友好(译者注:在当前对象实例找不会相应属性或方法时,会到相应实例共同引用的 Prototype 属性寻找相应属性或方法(如果在当前Prototype属性找不到时,会沿着当前原型链向上查找),而Prototype 上的属性或方法是公用的,而不像实例的属性或方法那样,各自单独创建属性或方法,从而节省更多的内存)。
闭包与面向对象编程
如果你具有 面向对象编程 的经历,那么你应该会注意到上述构造器看来非常像类、对象、实例值和私有/公有方法。
闭包与类相似,都会将一些能操作内部数据的函数联系在一起。因此,你能在任何地方像使用对象一样使用闭包。
结语
闭包是编程语言一个很棒的属性。当我们想在 JavaScript 创建“真正的”隐藏域,或者需要创建简单的构造器时,闭包这个属性是非常好用的。不过对于一般的类来说,闭包可能还是有点太重了。
感谢您的阅读。 如果你觉得这篇文章对您有帮助或者觉得我翻译得不错,那给我个 star 吧。
[译]其实闭包并不高深莫测相关推荐
- [译]JS闭包:For循环中的setTimeout
译者:嘴里起了个泡 原文地址: wsvincent.com/javascript-- 这篇文章详细介绍了JS在执行for循环里面的 setTimeout() 语句的时候发什么了什么.这是面试中经常会被 ...
- OOD教学(Java8)-导航
[内容简介]通过若干典型的实例,介绍面向对象设计的基本原理和设计模式.通过解决问题而"获得"设计模式,以掌握设计模式的本质.揭示设计模式之间的内在联系,以期解决学习设计模式的知易行 ...
- [译]Javascript中的闭包(closures)
本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...
- 【译】理解JavaScript闭包——新手指南
闭包是JavaScript中一个基本的概念,每个JavaScript开发者都应该知道和理解的.然而,很多新手JavaScript开发者对这个概念还是很困惑的. 正确理解闭包可以帮助你写出更好.更高效. ...
- javascript函数作用域与闭包
8.8. 函数作用域与闭包 如第四章所述,JavaScript函数的函数体在局部作用域中执行,局部作用域不同于全局作用域.本章将解释这些内容和相关的作用域问题,包括闭包.[*] [*] ...
- [译] 12步轻松搞定python装饰器 - 简书
[译] 12步轻松搞定python装饰器 - 简书 呵呵!作为一名教python的老师,我发现学生们基本上一开始很难搞定python的装饰器,也许因为装饰器确实很难懂.搞定装饰器需要你了解一些函数式编 ...
- 举例详细说明javascript作用域、闭包原理以及性能问题(转)
转自:http://www.cnblogs.com/mrsunny/archive/2011/11/03/2233978.html 这可能是每一个jser都曾经为之头疼的却又非常经典的问题,关系到内存 ...
- [译] 探究 Swift 中的 Futures Promises
本文讲的是[译] 探究 Swift 中的 Futures & Promises, 原文地址:Under the hood of Futures & Promises in Swift ...
- onclick=两个函数_[译]React函数组件和类组件的差异
[译]React函数组件和类组件的差异 原文: https://overreacted.io/how-are-function-components-different-from-classes/ 在 ...
最新文章
- hdu 1754 I Hate It(线段树之 单点更新+区间最值)
- [cpyhon源代码]dict对象原理学习
- 一个SAP Marketing Cloud和Kyma的集成
- 2020年工业互联网行业研究报告(国盛证券)
- wireshark协议插件开发--官方文档中文翻译
- Java学习---JDK的安装和配置
- ajax加载时间长,如何最好地处理需要很长时间才能完成的ajax请求?
- vc6 往mdb写入信息_HBase运维 | 一张表写入异常引起的HBase Replication 队列堆积
- 控制层解析post请求中json数据的时候,有些属性值为空
- file标签选择文件change事件失效处理方法
- java保护性拷贝(effective java)
- linux网络子系统分析
- window sserver 2008 r2安装教程
- 计算机图形学的未来前景,计算机图形学的发展前景
- 汽车电工及电子技术基础【3】
- 怎么制作QQ背景音乐链接
- MySQL MGR 安装
- 目标检测:EfficientDet(官方开源版)训练自己的数据
- 陕科大c语言题库,C语言考试题库
- Bugku CTF 眼见为实(MISC)
热门文章
- RHEL6.2上使用 libvirt创建和管理KVM虚拟机
- javascript:查找“跳号”号码
- 教你如何获得win7候选发布版序列号及下载
- Coinbase 现“市场核弹级”漏洞,颁发25万美元奖励
- 谷歌开源Allstar 项目,保护GitHub 仓库安全
- 中台之上(一):重视业务架构,不要让“业务的归业务、技术的归技术”
- 业务初期野蛮生长阶段,微服务化比较麻烦
- 《FPGA全程进阶---实战演练》第十一章 VGA五彩缤纷
- 归并排序——java
- Linux系统启动过程分析 -转