译者按: 上一篇博客,我们通过实现一个计数器,了解了如何使用闭包(Closure),这篇博客将提供一些代码示例,帮助大家理解闭包。

原文: JavaScript Closures for Dummies

译者: Fundebug

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

闭包并不神奇

其实,只要你领会了闭包的关键概念,一切就非常简单了。作为JavaScript开发者,你应该可以理解以下代码:

Example 1

function sayHello(name)
{
 
var text = 'Hello ' + name;
 
var sayAlert = function() { console.log(text); }
 
sayAlert();
}
 
sayHello("Bob") // 输出"Hello Bob"

sayHello()函数中定义并调用了sayAlert()函数;sayAlert()作为内层函数,可以访问外层函数sayHello()中的text变量。理解这一点,你就可以继续阅读这篇博客了。

一个闭包示例

两句话总结闭包(注意,这个定义并不规范,但是有助于理解):

  • 闭包就是函数的局部变量,这些变量在函数return之后仍然可以访问
  • 闭包就是函数的内存堆栈,这个内存堆栈在函数return之后并没有被收回

Example 2

function sayHello2(name)
{
var text = 'Hello ' + name; // 局部变量
 
var sayAlert = function() { console.log(text); }
 
return sayAlert;
}
 
var say2 = sayHello2("Jane");
say2(); // 输出"Hello Jane"

调用sayHello2()函数返回了sayAlert,它是一个引用变量,指向一个函数。相信大多数JavaScript程序员能够理解什么是引用变量,而C程序员则可以把sayAlert以及say2理解为指向函数的指针。

C指针与JavaScript引用变量并无实质区分。在JavaScript中,不妨这样理解,指向函数的引用变量不仅指向函数本身,还隐含地指向了一个闭包。

代码中匿名函数function() { alert(text); }是在另一个函数,即sayHello2()中定义的。在JavaScript中,如果你在函数中定义了一个函数,则创建了闭包。

对于C语言,以及其他绝大多数语言:函数return之后,其局部变量将无法访问,因为内存中的堆栈会被销毁。

对于JavaScript,如果你在函数中定义函数的话,当外层函数return之后,其局部变量仍然可以访问。代码中已经证明了这一点:当sayHello2()函数return之后,我们调用了say2()函数,成功打印了text变量,而text变量正是sayHello2()函数的局部变量。

更多示例

如果只是从定义的角度去理解闭包,显然是非常困难。然而,如果通过代码示例去理解闭包,则简单很多。因此,强烈建议你认真地理解每一个示例,弄清楚它们是如何运行的,这样你会避免很多奇怪的BUG。

Example 3

Example 3中,say667()函数return后,num变量将仍然保留在内存中。并且,sayNumba函数中的num变量并非复制而是引用,因此它输出的是667而非666

function say667() {
 
var num = 666; // say667()函数return后,num变量将仍然保留在内存中
 
var sayAlert = function() { console.log(num); }
 
num++;
 
return sayAlert;
 
}
 
var sayNumba = say667();
 
sayNumba(); // 输出667

Example 4

Example 4中,3个全局函数gAlertNumber,gIncreaseNumber,gSetNumber指向了同一个闭包,因为它们是在同一次setupSomeGlobals()调用中声明的。它们所指向的闭包就是setupSomeGlobals()函数的局部变量,包括了num变量。也就是说,它们操作的是同一个num变量。

function setupSomeGlobals() {
 
var num = 666;
 
gAlertNumber = function() { console.log(num); }
 
gIncreaseNumber = function() { num++; }
 
gSetNumber = function(x) { num = x; }
 
}
 
setupSomeGlobals();
gAlertNumber(); // 输出666
 
gIncreaseNumber();
gAlertNumber(); // 输出667
 
gSetNumber(5);
gAlertNumber(); // 输出5

Example 5

Example 5的代码比较难,不少人都会犯同样的错误,因为它的执行结果很可能违背了你的直觉。

function buildList(list)
{
var result = [];
 
for (var i = 0; i < list.length; i++)
{
var item = 'item' + list[i];
result.push( function() { console.log(item + ' ' + list[i])} );
}
 
return result;
}
 
var fnlist = buildList([1,2,3]);
 
for (var j = 0; j < fnlist.length; j++)
{
fnlist[j](); // 连续输出3个"item3 undefined"
}

result.push( function() {alert(item + ‘ ‘ + list[i])}将指向匿名函数function() {alert(item + ‘ ‘ + list[i])}的引用变量加入了数组,其效果等价于:

pointer = function() {alert(item + ' ' + list[i])};
result.push(pointer);

代码执行后,连续输出了3个”item3 undefined”,明显与直觉不同。

调用buildList()函数之后,我们得到了一个数组,数组中有3个函数,而这3个函数指向了同一个闭包。而闭包中的item变量值为“item3”i变量值为3。如果理解了3个函数指向的是同一个闭包,则输出结果就不难理解了。

Example 6

Example 6中,alice变量在sayAlert函数之后定义,这并未影响代码执行。因为返回函数sayAlice2所指向的闭包会包含sayAlice()函数中的所有局部变量,这自然包括了alice变量,因此可以正常打印”Hello Alice”。

function sayAlice()
{
var sayAlert = function() { console.log(alice); }
 
var alice = 'Hello Alice';
 
return sayAlert;
}
 
var sayAlice2 = sayAlice();
 
sayAlice2(); // 输出"Hello Alice"

Example 7

Example 7可知,每次调用newClosure()都会创建独立的闭包,它们的局部变量numref的值并不相同。

function newClosure(someNum, someRef)
{
var anArray = [1,2,3];
var num = someNum;
var ref = someRef;
 
return function(x)
{
num += x;
 
anArray.push(num);
 
console.log('num: ' + num + "; " + 'anArray ' + anArray.toString() + "; " + 'ref.someVar ' + ref.someVar);
}
}
 
closure1 = newClosure(40, {someVar: "closure 1"});
closure2 = newClosure(1000, {someVar: "closure 2"});
 
closure1(5); // 打印"num: 45; anArray 1,2,3,45; ref.someVar closure 1"
closure2(-10); // 打印"num: 990; anArray 1,2,3,990; ref.someVar closure 2"

总结

严格来讲,我对闭包的解释并不准确。不过,将闭包简单地看做局部变量,理解起来会更加简单。

参考链接

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了7亿+错误事件,得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用!

版权声明:

转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/08/07/javascript-closure-examples/

通过示例学习JavaScript闭包的更多相关文章

  1. [转载]学习Javascript闭包(Closure)

    学习Javascript闭包(Closure)     源地址: http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures ...

  2. 学习JavaScript闭包

    作者: 阮一峰 日期: 2009年8月30日 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 下面就是我的学习笔记,对于Javascript初 ...

  3. [JS]学习Javascript闭包(Closure)

    转自:阮一峰 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 下面就是我的学习笔记,对于Javascript初学者应该是很有用的. 一.变量的 ...

  4. 学习Javascript闭包(Closure)及几个经典面试题理解

    今天遇到一个面试题,结果让我百思不得其解.后来在查阅了各种文档后,理清了来龙去脉.让我们先来看看这道题: function Foo( ){ var i = 0; return function( ){ ...

  5. 学习Javascript闭包(Closure)

    闭包作用 1.让变量驻留在内存中 2.函数外部可以读取函数内部的私有变量 <!DOCTYPE html> <html lang="en"> <head ...

  6. 学习Javascript闭包(Closure) by 阮一峰

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域 ...

  7. (译)学习JavaScript闭包

    原文地址:https://medium.freecodecamp.org/lets-learn-javascript-closures-66feb44f6a44   闭包是JavaScript中一个基 ...

  8. 深入学习javaScript闭包(闭包的原理,闭包的作用,闭包与内存管理)

    前言 虽然JavaScript是一门完整的面向对象的编程语言,但这门语言同时也拥有许多函数式语言的特性. 函数式语言的鼻祖是LISP,JavaScript在设计之初参考了LISP两大方言之一的Sche ...

  9. 【转】学习JavaScript闭包

    原文: http://www.cnblogs.com/Lau7/p/7942100.html#undefined ------------------------------------------- ...

随机推荐

  1. 我所理解的HTTP协议

    前言 对于HTTP协议,想必大家都不陌生,在工作中经常用到,特别是针对移动端和前端开发人员来说,要获取服务端数据,基本走的网络请求都是基于HTTP协议,特别是RESTFUL + JSON 这种搭配特别 ...

  2. python模块的导入的两种方式区别详解

    Python 有两种导入模块的方法.两种都有用,你应该知道什么时候使用哪一种方法.一种方法,import module,另一种是from module import,下面是 from module i ...

  3. 前端“黑话”polyfill

    前言 在Web前端开发这个日新月异的时代,总是需要阅读一些最新的英文技术博客来跟上技术的发展的潮流.而有时候会遇到一些比较高频的“黑话”,在社区里面可能已经是人人皆知的“共同语言”,而你接触的少就偏偏 ...

  4. Android JNI 学习(五):References Api

    1. NewGlobalRef(创建全局引用) jobjectNewGlobalRef(JNIEnv *env, jobject obj); 创建 obj 参数所引用对象的新全局引用.obj 参数既可 ...

  5. 微信小程序wx.request接口

    微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJE ...

  6. springbean的生命周期

    1.Spring对Bean进行实例化(相当于程序中的new Xx())2.Spring将值和Bean的引用注入进Bean对应的属性中3.如果Bean实现了BeanNameAware接口,Spring将 ...

  7. Ubantu linux中使用PyCharm之---破解PyCharm,实现永久免费试用

    打开 http://idea.lanyus.com/ 这个网址,可以直接复制到浏览器打开 获取注册码 K71U8DBPNE-eyJsaWNlbnNlSWQiOiJLNzFVOERCUE5FIiwibG ...

  8. LINUX capability概念及配置

    写的不错的一片博客,可以参考熟悉相关概念,主要将了linux系统的系统调用,以及用法这里就不重新造轮子了 https://www.cnblogs.com/iamfy/archive/2012/09/2 ...

  9. 【ABP框架系列学习】N层架构(3)

    目录 0.引言 1.DDD分层 2.ABP应用构架模型 客户端应用程序(Client Applications) 表现层(Presentation Layer) 分布式服务层(Distributed ...

  10. springBoot(3)---目录结构,文件上传

    目录结构,文件上传 一.目录结构 1.目录讲解 src/main/java:存放代码      src/main/resources                   static: 存放静态文件, ...