伟大的爱因斯坦同志说过:“如果你无法向一个 6 岁小孩解释清楚某问题,那说明你自己都没整明白”。然而,当我向一个 27 岁的朋友解释什么是闭包时,却彻底失败了。
这原本是国外某哥们儿在 Stack Overflow 上对 JavaScript 闭包所提出的问题。不过既然此问题是在 Stack Overflow 提出的,当然也会有很多高手出来解答,其中有些回答确实是经典,如下面这个:
如果在一个外部函数中再定义一个内部函数,即函数嵌套函数,那么内部函数也可以访问外部函数中的变量:
function foo(x) { var tmp = 3; function bar(y) { alert(x + y + (++tmp)); } bar(10); } foo(2); // alert 16 foo(2); // alert 16 foo(2); // alert 16
此段代码可以正确执行,并返回结果:16,因为 bar 能访问外部函数的变量 tmp, 同时也能访问外部函数 foo 的参数 x。但以上示例不是闭包!
要实现闭包的话,需要将内部函数作为外部函数的返回值返回,内部函数在返回前,会将所有已访问过的外部函数中的变量在内存中锁定,也就是说,这些变量将常驻 bar 的内存中,不会被垃圾回收器回收,如下:
function foo(x) { var tmp = 3; return function (y) { alert(x + y + (++tmp)); } } var bar = foo(2); // bar 现在是个闭包了 bar(10); // alert 16 bar(10); // alert 17 bar(10); // alert 18
上述代码中,第一次执行 bar 时,仍会返回结果:16,因为 bar 仍然可以访问 x 及 tmp,尽管它已经不直接存在于 foo 的作用域内。那么既然 tmp 被锁定在 bar 的闭包里,那么每次执行 bar 的时候,tmp 都会自增一次,所以第二次和第三次执行 bar 时,分别返回 17 和 18。
此示例中,x 仅仅是个纯粹的数值,当 foo 被调用时,数值 x 就会作为参数被拷贝至 foo 内。
但是 JavaScript 处理对象的时候,使用的总是引用,如果用一个对象作为参数来调用 foo,那么 foo 中传入的实际上是原始对象的引用,所以这个原始对象也相当于被闭包了,如下:
function foo(x) { var tmp = 3; return function (y) { alert(x + y + tmp++); x.memb = x.memb ? x.memb + 1 : 1; alert(x.memb); } } var age = new Number(2); var bar = foo(age); // bar 现在是个闭包了 bar(10); // alert 15 1 bar(10); // alert 16 2 bar(10); // alert 17 3
和期望的一样,每次执行 bar(10) 时,不但 tmp 自增了,x.memb 也自增了,因为函数体内的 x 和函数体外的 age 引用的是同一个对象。
via http://stackoverflow.com/questions/111102/how-do-javascript-closures-work
补充:通过以上示例,应该能比较清楚的理解闭包了。如果觉得自己理解了,可以试着猜猜下面这段代码的执行结果:
function foo(x) { var tmp = 3; return function (y) { alert(x + y + tmp++); x.memb = x.memb ? x.memb + 1 : 1; alert(x.memb); } } var age = new Number(2); var bar1 = foo(age); // bar1 现在是个闭包了 bar1(10); // alert 15 1 bar1(10); // alert 16 2 bar1(10); // alert 17 3 var bar2 = foo(age); // bar2 现在也是个闭包了 bar2(10); // alert ? ? bar2(10); // alert ? ? bar2(10); // alert ? ? bar1(10); // alert ? ? bar1(10); // alert ? ? bar1(10); // alert ? ?
实际使用的时候,闭包可以创建出非常优雅的设计,允许对funarg上定义的多种计算方式进行定制。如下就是数组排序的例子,它接受一个排序条件函数作为参数:
[1, 2, 3].sort(function (a, b) { ... // 排序条件 });
同样的例子还有,数组的map方法是根据函数中定义的条件将原数组映射到一个新的数组中:
[1, 2, 3].map(function (element) { return element * 2; }); // [2, 4, 6]
使用函数式参数,可以很方便的实现一个搜索方法,并且可以支持无限制的搜索条件:
someCollection.find(function (element) { return element.someProperty == 'searchCondition'; });
还有应用函数,比如常见的forEach方法,将函数应用到每个数组元素:
[1, 2, 3].forEach(function (element) { if (element % 2 != 0) { alert(element); } }); // 1, 3
顺便提下,函数对象的 apply 和 call方法,在函数式编程中也可以用作应用函数。 这里,我们将它们看作是应用函数 —— 应用到参数中的函数(在apply中是参数列表,在call中是独立的参数):
(function () { alert([].join.call(arguments, ';')); // 1;2;3 }).apply(this, [1, 2, 3]);
闭包还有另外一个非常重要的应用 —— 延迟调用:
var a = 10; setTimeout(function () { alert(a); // 10, after one second }, 1000); 还有回调函数: //... var x = 10; // only for example xmlHttpRequestObject.onreadystatechange = function () { // 当数据就绪的时候,才会调用; // 这里,不论是在哪个上下文中创建 // 此时变量“x”的值已经存在了 alert(x); // 10 }; //...
还可以创建封装的作用域来隐藏辅助对象:
var foo = {}; // 初始化 (function (object) { var x = 10; object.getX = function _getX() { return x; }; })(foo); alert(foo.getX()); // 获得闭包 "x" – 10
本文向大家介绍javascript闭包的理解,包括了javascript闭包的理解的使用技巧和注意事项,需要的朋友参考一下 1、首先我们要知道变量作用域链 变量的作用域分两种:全局变量和局部变量。没有定义到任何函数中的变量为全局变量,在函数中定义的变量为局部变量,注意在函数内部定义变量时一定要使用var关键字,不带var关键字的变量为全局变量。 javascript中每一段代码都有与之关联的作用域
本文向大家介绍深入解析JavaScript的闭包机制,包括了深入解析JavaScript的闭包机制的使用技巧和注意事项,需要的朋友参考一下 JavaScript 变量可以是局部变量或全局变量。 私有变量可以用到闭包。 全局变量 函数可以访问是有函数内部定义的变量,如: 实例 函数也可以访问函数外部定义的变量,如: 实例 后面一个实例中, a 是一个 全局 变量。 在web页面中全局变量属于 win
本文向大家介绍Javascript的闭包详解,包括了Javascript的闭包详解的使用技巧和注意事项,需要的朋友参考一下 前言:还是一篇入门文章。Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性。本文将以例子入手来介绍Javascript闭包的语言特性,并结合一点 ECMAScript语言规范来使读
本文向大家介绍JavaScript闭包和回调详解,包括了JavaScript闭包和回调详解的使用技巧和注意事项,需要的朋友参考一下 一、闭包 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。 闭包有三个特性: 1.函数嵌套函数; 2.函数内部可以引用外部的参数和变量; 3.参数和变量不会被垃圾回收机制回收。 闭包是指有权访问另一个函数作用
本文向大家介绍JavaScript闭包详解,包括了JavaScript闭包详解的使用技巧和注意事项,需要的朋友参考一下 在上一篇文章我们对预解释作了概述,在写这篇博文前打算写几个经典案例,考虑到那些案例综合性比较强,也就循序渐进的有了这篇博文,这样对于学习和深入JavaScript也更加容易入手。 序 一同事去面试,面试官问了一道题:你写一个闭包我看下?于是同事火速写出如下代码: 然后面试官摇摇头
本文向大家介绍JavaScript 闭包机制详解及实例代码,包括了JavaScript 闭包机制详解及实例代码的使用技巧和注意事项,需要的朋友参考一下 首先要区分两个概念,一是匿名函数,一是闭包。 所谓匿名函数,就是创建函数没有给定函数名。经常出现的包括函数表达式,就是定义一个匿名函数,然后将函数赋值给某个变量,而此时这个变量就相当于该函数的函数名,例如: 还有一种常用匿名函数的情况是回调函数,如