我的上篇博客标题不对,造成一些误解。我认为博客的宗旨不是背教科书,而是分享研发心得。我的上篇标题因该改成“JavaScript 闭包的一个议题:它对outer scope 的影响”,因为我没有严格地去分析闭包的定义,而是分析了实现闭包的其中一个语义问题。

讲清楚闭包是件麻烦事,我也没有看到什么关于JavaScript的权威性著作(比如像C++语言有 Bjarne StroustrupC++ programming language)。所以除了苦读JavaScript语言国际标准Standard ECMA-262 specification,我无法推荐一个论述“闭包”的最好的教材。

网友“穆己”的“scope chaining”的确是比较接近实质,但也不全面。我只好抛砖引玉,再做一次企图。

闭包的含义包含了下列三个主要概念:

Lexical Scope and Scope Chain

Lexical Scope的概念并不是Javacript发明,但是它作为JavaScript函数的组成部分,是一个在“传统”函数概念上的附加值。

传统函数(C, C++, Java, C#等)的lexical scope 和runtime scope 是一样的。JavaScript 的lexical scope指的是函数定义时的“环境”,而不是函数运行时的环境。

对于一个特定函数来说,其”自由变量”是这个函数闭包中需要俘获的主要内容。自由变量(本函数没有定义的变量)的lexical capture(俘获)顺序是 (也就是scope chaining 的顺序):

A, 母函数的local 变量

B. 母函数的input argument

C.在母函数的母函数中重复A,B,直到最顶层(GLOBAL scope)

在下面 的 myObj  的定义中:

var x = 1000;                               // line 0

function myObj(x, y) {                // Line1

 

            this.func1 = function() { // Line2

                        x++;

                        y --;

            }

            this.get1 = function ()

            {

                        return x;

            }

            this.get2 = function ()

            {

                        return y;

            }

            var x = 0;                // Line 3

}

myObj.prototype.AddTwo = function(z)

{

            return this.get1() + this.get2() + z;

}

var m1 = new myObj(10, 20);      // Line 4

var m2 = new myObj(30, 70);      // Line 5

console.log('m1.x: ' + m1.get1());  // Line 6

console.log('m1.y: ' + m1.get2());  // Line 7

console.log('m2.x: ' + m2.get1());  // Line 8

console.log('m2.y: ' + m2.get2());  // Line 9

对于上面的例子,如果不是lexical scope, line 6 ~ line 9 打印的应该是10, 20, 30, 70。

但是因为lexical  scope俘获顺序,x 是0(见line 3), 所以打印的是:0, 20, 0, 70。

注释掉line3,根据俘获顺序,打印的就成了10, 20, 30, 70。

myObj(x, y)改成myObj(z, y)打印的就成了1000, 20, 1000, 70。其中 1000是从global里(Line 0)俘获的。

Lexical 俘获是在parsing stage进行的

上面的俘获顺序必须在函数的parsing阶段进行。函数的数据结构中在parsing后已经包含了所有“俘获变量的reference”,运行阶段不会改变了。这就是为什么上面的line 3定义的可以优先于input 参数x的原因。若是执行时capture, line 3 是在函数的定义之后,该capture的因该说是input 参数x了。

C,C++等编译语言是直接翻译成native 函数的,所有的函数运行信息都靠stack frame来动态获取。唯一和闭包有所接近的概念是“全程变量(global variable)”. 这些global变量在编译时也都转换成内存地址,运行时可以“就地解决”,无需一个独立的闭包。这些函数不是object,不需动态生成,所以无需一个“静态`”的闭包。

JavaScript之所以需要一个独立的闭包,本人认为是因为所有的JavaScript都是object,可以“动态生成”,但是定义(第一道parsing)却是静态的,这个“静态”的部分需要闭包,动态的部分和传统函数一样,靠runtime context 支撑。

这种“实现上的复杂性”,是为了闭包所带来的,处理异步事件时的方便付出的代价。

Lexical 俘获是reference不是value

这是我的上篇博客想要强调的地方。如果上面的myObj执行时,如果俘获的是x的值,那么这三个函数func1get1get2就不会有任何联系了。

 

因为俘获的是x的reference,  所以上面三个函数所看到的x是同一个变量。

这一点很重要,因为JavaScript中的local 变量并不是都是heap中的。起码 GOOGLE  V2 就不是。但是上面line 3 的x必须在heap中“出生和生活”,否则func1get1get2就会在已经毁灭了的stack 变量x上工作,使得上面的程序变得毫无意义了。

也就是说,闭包的runtime代价是将所被闭包的变量从stack中转到heap中。

总结

我认为,只有弄懂了闭包的上诉三个概念,才可以在闭包的应用上立于不败之地。

2014-8-26 于西雅图

JavaScript的“闭包”到底是什么(2)的更多相关文章

  1. JavaScript的“闭包”到底是什么

    在JavaScripot函数闭包的定义中,一般都有一个outer 函数,一个inner函数.那么“闭包”到底是指outer函数呢,还是指inner函数? 从官方定义来看,并不清楚:A closure  ...

  2. 彻底搞懂JavaScript的闭包、防抖跟节流

    最近出去面试了一下,收获颇多!!! 以前的我,追求实际,比较追求实用价值,然而最近面试,传说中的面试造火箭,工作拧螺丝,竟然被我遇到了.虽然很多知识点在实际工作中并不经常用到,但人家就是靠这个来筛选人 ...

  3. 深入理解JavaScript的闭包特性如何给循环中的对象添加事件

    初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...

  4. JavaScript作用域闭包简述

    JavaScript作用域闭包简述 作用域 技术一般水平有限,有什么错的地方,望大家指正. 作用域就是变量起作用的范围.作用域包括全局作用域,函数作用域以块级作用域,ES6中的let和const可以形 ...

  5. JavaScript的闭包原理

    什么是js(JavaScript)的闭包原理,有什么作用? 一.定义 官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 个人的理解是 ...

  6. Js(javaScript)的闭包原理

    问题?什么是js(javaScript)的闭包原理,有什么作用? 一.定义 官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.  小编 ...

  7. 深入理解javascript的闭包

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

  8. 如何给循环中的对象添加事件--深入理解JavaScript的闭包特性

    初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...

  9. javascript,jquery(闭包概念)(转)

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

随机推荐

  1. Struts2的声明式异常处理

    在struts2应用程序中你还在使用try catch语句来捕获异常么?如果是这样的,那你OUT啦!struts2支持声明式异常处理,可以再Action中直接抛出异常而交给struts2来 处理,当然 ...

  2. Effective C++学习笔记:初始化列表中成员列出的顺序和它们在类中声明的顺序相同

    类成员的默认初始化顺序是按照声明顺序进行, 如果使用初始化列表初始化成员变量, 则必须按照成员变量的声明顺序进行; 否则, 在变量之间交替赋值时, 会产生, 未初始化的变量去赋值其他变量; 同时GCC ...

  3. C++学习之容器的摸索

    初学容器,容易犯错的地方 1.vector,list和deque都是顺序容器.其中vector和deque都可以通过下标访问,而list不能 2. 容器的begin和end操作 c.begin()返回 ...

  4. Pearls DP

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 6647   Accepted: 3241 Description In Pe ...

  5. Luogu 考前模拟Round. 1

    A.情书 题目:http://www.luogu.org/problem/show?pid=2264 赛中:sb题,直接暴力匹配就行了,注意一下读入和最后一句话的分句 赛后:卧槽 怎么只有40 B.小 ...

  6. 「Poetize4」玉蟾宫

    描述 Description 这片土地被分成N*M个格子,每个格子里写着'R'或者'F',R代表这块土地被赐予了rainbow,F代表这块土地被赐予了freda.现在freda要在这里卖萌...它要找 ...

  7. CF 85D Sum of Medians (五颗线段树)

    http://codeforces.com/problemset/problem/85/D 题意: 给你N(0<N<1e5)次操作,每次操作有3种方式, 1.向集合里加一个数a(0< ...

  8. 图论(网络流,分数规划):COGS 2047. [ZOJ2676]网络战争

    2047. [ZOJ2676]网络战争 ★★★   输入文件:networkwar.in   输出文件:networkwar.out   评测插件 时间限制:5 s   内存限制:32 MB [题目描 ...

  9. loadView,viewDidLoad等几种方法的调用总结

    viewDidLoad 此方法只有当view从nib文件初始化的时候才被调用.viewDidLoad用于初始化,加载时用到的. loadView 此方法在控制器的view为nil的时候被调用.虽然经常 ...

  10. 小菜学习Lucene.Net(更新3.0.3版本使用)

    花了两天的时间研究了下Lucene.Net 发现确实挺好玩.... 最新版本是3.0.3 (最后更新时间2012-10) 可惜3.0.3版本的Lucene.net无法和盘古分词 (最新版为2.3.1. ...