`

闭包,懂不懂由你,反正我是懂了

    博客分类:
  • js
阅读更多

闭包,懂不懂由你,反正我是懂了

越来越觉得国内没有教书育人的氛围,为了弄懂JS的闭包,我使出了我英语四级吃奶的劲去google上搜寻着有关闭包的解释,当我看到stackoverflow上这一篇解答,我脑中就出现了一句话:就是这货没跑了!

不才译文见下,见笑了。

Peter Mortensen问:

就像老Albert所说的,“如果你不能向一个六岁的孩子解释清楚,那么其实你自己根本就没弄懂。”好吧,我试着向一个27岁的朋友就是JS闭包(JavaScript closure)却彻底失败了。

你们会怎么把它解释给一个充满好奇心的六岁孩子听呢?

注:我看过StackOverflow上给出的示例,但根本没用。

Ali的回答:

当function里嵌套function时,内部的function可以访问外部function里的变量。

function foo(x) {
  var tmp = 3;
  function bar(y) {
    alert(x + y + (++tmp));
  }
  bar(10);
}
foo(2)

不管执行多少次,都会alert 16,因为bar能访问foo的参数x,也能访问foo的变量tmp。

但,这还不是闭包。当你return的是内部function时,就是一个闭包。内部function会close-over外部function的变量直到内部function结束。

function foo(x) {
  var tmp = 3;
  return function (y) {
    alert(x + y + (++tmp));
  }
}
var bar = foo(2); // bar 现在是一个闭包
bar(10);

上面的脚本最终也会alert 16,因为虽然bar不直接处于foo的内部作用域,但bar还是能访问x和tmp。

但是,由于tmp仍存在与bar闭包的内部,所以它还是会自加1,而且你每次调用bar时它都会自加1.

(考虑到六岁这个限制:我们其实可以建立不止一个闭包方法,比如return它们的数组,也可以把它们设置为全局变量。它们全都指向相同的x和相同的tmp,而不是各自有一份副本。)

注:现在来整点儿七岁的内容。

上面的x是一个字面值(值传递),和JS里其他的字面值一样,当调用foo时,实参x的值被复制了一份,复制的那一份作为了foo的参数x。

那么问题来了,JS里处理object时是用到引用传递的,那么,你调用foo时传递一个object,foo函数return的闭包也会引用最初那个object!

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 现在是一个引用了age的闭包
bar(10);

不出我们意料,每次运行bar(10),x.memb都会自加1。但需要注意的是x每次都指向同一个object变量——age,运行两次bar(10)后,age.memb会变成2.

这和HTML对象的内存泄漏有关,呃,不过貌似超出了答题的范围。

JohnMerlino 对Ali说:

这里有一个不用return关键字的闭包例子:

function closureExample(obj, text, timedelay) { 
    setTimeout(function() { 
        document.getElementById(objID).innerHTML = text; 
        }, timedelay); 
} 
closureExample(‘myDiv’, ‘Closure is created’, 500); 

深夜1:37 John Pick这样回答:

JS里的function能访问它们的:

1. 参数

2. 局部变量或函数

3. 外部变量(环境变量?),包括

3.1 全局变量,包括DOM

3.2 外部函数的变量或函数。

如果一个函数访问了它的外部变量,那么它就是一个闭包。

注意,外部函数不是必需的。通过访问外部变量,一个闭包可以维持(keep alive)这些变量。在内部函数和外部函数的例子中,外部函数可以创建局部变量,并且最终退出;但是,如果任何一个或多个内部函数在它退出后却没有退出,那么内部函数就维持了外部函数的局部数据。

一个典型的例子就是全局变量的使用。

mykhal这样回答:

Wikipedia对闭包的定义是这样的:

In computer science, a closure is a function together with a referencing environment for the nonlocal names (free variables) of that function.

从技术上来讲,在JS中,每个function都是闭包,因为它总是能访问在它外部定义的数据。

Since scope-defining construction in Javascript is a function, not a code block like in many other languages, what we usually mean by closure in Javascript is a fuction working with nonlocal variables defined in already executed surrounding function.

闭包经常用于创建含有隐藏数据的函数(但并不总是这样)。

var db = (function() {
  // 创建一个隐藏的object, 这个object持有一些数据
  // 从外部是不能访问这个object的
  var data = {};
  // 创建一个函数, 这个函数提供一些访问data的数据的方法
  return function(key, val) {
    if (val === undefined) { return data[key] } // get
    else { return data[key] = val } // set
  }
  // 我们可以调用这个匿名方法
  // 返回这个内部函数,它是一个闭包
})();

db('x');    // 返回 undefined
db('x', 1); // 设置data['x']为1
db('x');    // 返回 1
// 我们不可能访问data这个object本身
// 但是我们可以设置它的成员

看了这么多外国大牛的解答,不知道你懂还是不懂,反正我是懂了。

分享到:
评论
1 楼 myemptyname 2012-08-23  
好文章,不管你懂不懂,我是懂了

相关推荐

    JavaScript闭包 懂不懂由你反正我是懂了

    如果你不能向一个六岁的孩子解释清楚,那么其实你自己根本就没弄懂。好吧,我试着向一个27岁的朋友就是JS闭包(JavaScript closure)却彻底失败了

    2你不懂JS_作用域与闭包

    你不懂JS You Don’t Know JSYou Don’t Know JS You Don’t Know JS

    javascript,jquery闭包概念分析

    偶尔听人说javascript闭包,让我联想起以前学编译原理和数字逻辑里讲的闭包,以前上课讲的闭包很难懂,而且含有递归的意思在里面,现在不想再查看里面的闭包概念。

    javascript中的return和闭包函数浅析

    这跟闭包本身没什么大的关系,也不知道怎么取标题,随便凑了个数,望见谅!今天一个刚学js的朋友给了我一段代码问为什么方法不执行,代码如下: 代码如下:function makefunc(x) { return function (){ return x;...

    JS闭包经典实例详解

    告诉他之后,我想我自己要不也写一下,反正花不了多少时间,结果花了好久怎么写也不对………….. 后来看了看书上的,然后自己总结了下,觉得这次应该懂了。下次还不理解我就可以去跳楼了………… ————————...

    JavaScript中闭包的详解

    在 JavaScript 中,闭包是一个让人很难弄懂的概念。ECMAScript 中给闭包的定义是:闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量。 是不是看完这个定义感觉更加懵逼了?...

    Javascript 设计模式(二) 闭包

    本来应该是第二章,接口,但因为闭包实在不懂,所以先看看闭包

    js闭包

    要学会闭包函数一定要弄懂。 函数定义阶段 开辟一个 存储空间 把函数体内的代码一模一样的放在这个空间内(不解析变量) 把 存储空间 的地址给函数名 函数调用阶段 按照函数名的地址找到函数的 存储空间 形参赋值 预...

    JS中批量给元素绑定事件过程中的相关问题使用闭包解决

    使用闭包(如果你不懂闭包,请打开百度:www.baidu.com) 2.使用with关键字,with语法是with( obj ) { //使得可以在此直接访问obj的属性,而不用加obj.XXX } 代码示例: 代码如下: <!DOCTYPE html PUBLIC “-//W3C/...

    用最通俗易懂的代码帮助新手理解javascript闭包 推荐

    最近看了几篇有关javascript闭包的文章,包括最近正火的汤姆大叔系列,还有《javascript高级程序设计》中的文章,……我看不懂,里面有些代码是在大学教科书中看都没看过的,天书一般。幸好最近遇到两本好书《ppk on...

    【JavaScript源代码】怎样用Javascript实现函数柯里化与反柯里化.docx

     概念往往都是干涩且难懂的,让我们用人话来解释就是:如果我们不确定这个函数有多少个参数,我们可以先给它传入一个参数,然后通过JS闭包(如若不懂JS闭包,请先学习闭包知识点再来学习本篇博文https:

    javascript enlightenment

    一开始看起来可能会觉得有些无聊,觉得讲得太简单,但是越看越觉得有味道,越看越能体会到作者的用心之处,尤其是在讲述词法作用域以及闭包,绝对的深入浅出,完全没有看不懂之处。只能说,太!好!了!!!!!  ...

    恕我直言!你不是真的懂js中的作用域!

    如果对于作用域,词法作用域你还不是很清楚,那么你可就要好好读读这篇文章了,它可是理解闭包的关键! 作用域是什么? 理解作用域 为了便于理解,笔者使用对话的方式进行解释 引擎:负责js程序的编译以及执行过程 ...

    编译原理 东南大学 64讲 视频.txt

    从网上的评论来看,有人说学了一年半软件理论,就一门编译看不懂;有人甚至说它是大本软件课程里最难的一门;有人抱怨国内的编译教材没有一本容易懂的。 从笔者学习实践来看,第一次学了一个多月,理论部分一知半解,第二次...

    jQuery基础教程(第四版)

    《jQuery基础教程(第4版)》是由jQuery权威专家担纲撰写的佳作,不管是谁,只要稍有JavaScript经验就可以看懂。这本书的特点就是全面、深入,它不仅向读者解释了jQuery的底层原理,更讨论了高级开发技术,而且示例...

    javascript实现函数柯里化与反柯里化过程解析

    概念往往都是干涩且难懂的,让我们用人话来解释就是:如果我们不确定这个函数有多少个参数,我们可以先给它传入一个参数,然后通过JS闭包(如若不懂JS闭包,请先学习闭包知识点再来学习本篇博文...

    JavaScript中的this陷阱的最全收集并整理(没有之一)

    有句话这么说:如果你不能向一个6岁小孩解释清楚一个东西,那么你自己也不懂这个东西。这句话或许有点夸张,但是极其有道理。个人觉得,如果需要掌握一门语言,掌握它的API只是学了皮毛,理解这门语言的精髓才是重点...

    You-Dont-Know-JS:我从课堂上获得的YDKJ的个人副本

    你不懂JS(书籍系列) 这是一系列深入探讨JavaScript语言核心机制的书籍。 ...(更多即将推出!) 请随时提交PR以改进代码段,解释等,从而为内容的质量做出贡献。虽然错字修复受到欢迎,但它们可能会通过正常的...

Global site tag (gtag.js) - Google Analytics