How do JavaScript closures work?
Like the old Albert Einstein said:
Well, I tried to explain JavaScript closures to a 27-year-old friend and completely failed. How would you explain it to someone with a knowledge of the concepts which make up closures (for example, functions, variables and the like), but does not understand closures themselves? I have seen the Scheme example given on Stack Overflow, and it did not help.
|
|||||||||||||||||||||
|
JavaScript Closures for Dummies
Closures Are Not MagicThis page explains closures so that a programmer can understand them — using working JavaScript code. It is not for gurus or functional programmers. Closures are not hard to understand once the core concept is grokked. However, they are impossible to understand by reading any academic papers or academically oriented information about them! This article is intended for programmers with some programming experience in a mainstream language, and who can read the following JavaScript function:
An Example of a ClosureTwo one sentence summaries:
The following code returns a reference to a function:
Most JavaScript programmers will understand how a reference to a function is returned to a variable ( There is a critical difference between a C pointer to a function and a JavaScript reference to a function. In JavaScript, you can think of a function reference variable as having both a pointer to a function as well as a hidden pointer to a closure. The above code has a closure because the anonymous function In C, and most other common languages after a function returns, all the local variables are no longer accessible because the stack-frame is destroyed. In JavaScript, if you declare a function within another function, then the local variables can remain accessible after returning from the function you called. This is demonstrated above, because we call the function
Looking at the output of The magic is that in JavaScript a function reference also has a secret reference to the closure it was created in — similar to how delegates are a method pointer plus a secret reference to an object. More examplesFor some reason, closures seem really hard to understand when you read about them, but when you see some examples you can click to how they work (it took me a while). I recommend working through the examples carefully until you understand how they work. If you start using closures without fully understanding how they work, you would soon create some very weird bugs! Example 3This example shows that the local variables are not copied — they are kept by reference. It is kind of like keeping a stack-frame in memory when the outer function exits!
Example 4All three global functions have a common reference to the same closure because they are all declared within a single call to
The three functions have shared access to the same closure — the local variables of Note that in the above example, if you call Example 5This one is a real gotcha for many people, so you need to understand it. Be very careful if you are defining a function within a loop: the local variables from the closure do not act as you might first think.
The line
Note that when you run the example, Example 6This example shows that the closure contains any local variables that were declared inside the outer function before it exited. Note that the variable
Tricky: note also that the Example 7This final example shows that each call creates a separate closure for the local variables. There is nota single closure per function declaration. There is a closure for each call to a function.
SummaryIf everything seems completely unclear then the best thing to do is to play with the examples. Reading an explanation is much harder than understanding examples. My explanations of closures and stack-frames, etc. are not technically correct — they are gross simplifications intended to help understanding. Once the basic idea is grokked, you can pick up the details later. Final points:
Links
ThanksIf you have just learnt closures (here or elsewhere!), then I am interested in any feedback from you about any changes you might suggest that could make this article clearer. Send an email to morrisjohns.com (morris_closure @). Please note that I am not a guru on JavaScript — nor on closures. |
How do JavaScript closures work?的更多相关文章
- JavaScript——closures(待续)
问答原文:How do JavaScript closures work?
- JavaScript Closures 闭包
在一些编程语言中, 当我们执行完成function中的局部代码仅在函数执行期间可运行. 但是JS 事不一样的 闭包总结来说, 就是innerFunction 总是有使用outer function 的 ...
- 深入理解JavaScript系列(16):闭包(Closures)
介绍 本章我们将介绍在JavaScript里大家经常来讨论的话题 —— 闭包(closure).闭包其实大家都已经谈烂了.尽管如此,这里还是要试着从理论角度来讨论下闭包,看看ECMAScript中的闭 ...
- JavaScript:内存泄露、性能调优
1.在进行JS内存泄露检查之前,先要了解JS的内存管理: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Manageme ...
- JavaScript之闭包
JavaScript之闭包 在JavaScript中,闭包恐怕是很多人不能理解的一个概念了,甚至很多人也会把闭包和匿名函数混淆. 闭包是有权访问另一个函数作用域中的变量的函数.首先要明白的就是,闭包是 ...
- 理解和使用 JavaScript 中的回调函数
理解和使用 JavaScript 中的回调函数 标签: 回调函数指针js 2014-11-25 01:20 11506人阅读 评论(4) 收藏 举报 分类: JavaScript(4) 目录( ...
- [译]JavaScript规范-葵花宝典
[译]JavaScript规范 译自:https://github.com/airbnb/javascript 类型 原始值: 相当于传值 string number boolean null und ...
- JavaScript闭包的底层运行机制
转自:http://blog.leapoahead.com/2015/09/15/js-closure/ 我研究JavaScript闭包(closure)已经有一段时间了.我之前只是学会了如何使用它们 ...
- 什么是JavaScript闭包终极全解之一——基础概念
本文转自:http://www.cnblogs.com/richaaaard/p/4755021.html 什么是JavaScript闭包终极全解之一——基础概念 “闭包是JavaScript的一大谜 ...
随机推荐
- 理解 php 中& 引用
php中引用&的真正理解-变量引用.函数引用.对象引用 php的引用(就是在变量或者函数.对象等前面加上&符号) //最重要就是 删除引用的变量 ,只是引用的变量访问不了,但是内容并没 ...
- hdu_1429_胜利大逃亡(续)(BFS状压)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1429 题意:迷宫的加强版,迷宫里有钥匙和门,问在指定的时间下能否逃出 题解:用二进制位来记录是否有该门 ...
- 打印出最后执行的mysql 语句
db.php 文件中添加 public function getlastsql(){ return $this->sql; } 入口文件中添加,公共方法 function getlastsql( ...
- linux CTRL+Z
关于 linux 系统中使用ctrl+Z 的使用 (1) CTRL+Z停止进程并放入后台 (2) jobs 显示当前暂停的进程 (3) bg %N 使第N个任务在后台运行(%前有空格) ,N 为任务号 ...
- SVN和GIT的使用
一.SVN通用流程 1.从服务器仓库的项目上右键拷贝项目地址,然后来到你的电脑桌面上右键“SVN checkout...”,这样就跟服务器建立了关联 2.如果有创建新文件,则右键选择“Tortoise ...
- MVC动态生成表单
1*书写方式 一.using语句可以不写结束标记,自动加上 服务端 客户端 默认提交当前控制器和操作方法 二.开始与结束代码都写 服务端 客户端 三.一些常用的重载方法 (1)要提交的控制器,和操作方 ...
- 【单源最短路模板】 poj 2387
#include <cstdio> #include <iostream> #include <stdlib.h> #include <memory.h> ...
- Jenkins环境集成第一弹
1. 起因 策划经常过来让我打包给他们测试,过于频繁影响到了自己的进度,决定弄一个打包工具让他们自己打包,在网上搜索了一下貌似有几个比较成熟的工具,Travis,Jenkins等等. 在网上也搜索到了 ...
- ngnix配置文件
使用nginx最大的好处就是负载均衡. #设定负载均衡的服务器列表 upstream service{ server 10.4.29.174:7477; } server { ...
- FTP: Configuring server users..
4 points to create a user to uploade to ftproot.. this user must be an administrator, and be able to ...