【初窥javascript奥秘之闭包】叶大侠病都好了，求不踩了：）

前言

咳咳，叶大侠病了，昨天晚上回家时候在车上就不舒服，果然回来就挂了，本来还想今天接着上班撑下去的。但是昨天又看到一个IT巨子挂了，所以果断请了一个假！！！

但是早上7.00左右就迷迷糊糊的醒了，于是我在想我是不是该“身残志坚”一番。。。。

咳咳，以上玩笑，我们最近一起学习了很多CSS的东西，相信大家的CSS水平必定提高了吧？？？所以我们接下来一段时间来看看javascript吧，今天我们一起来看看闭包这个家伙！

本文参考：

http://www.cnblogs.com/TomXu/

http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html

http://www.cnblogs.com/frankfang/archive/2011/08/03/2125663.html

http://www.cnblogs.com/xiaotie/archive/2011/08/03/2126145.html

执行上下文（execution context）

又是上下文。。。无论是曾经学习.net时候的httpcontext，还是最近学习的block formatting context，都是上下文！

我们可以感觉到上下文的存在，就如感觉得到空气一样，我们却将它拿不出来，于是我们来看看执行上下文吧。

每次当控制器转到ecmascript可执行代码的时候，就会进入一个执行上下文。
活动的执行上下文组在逻辑上为一个堆栈，堆栈最底部一定是全局上下文（global context），顶部便是当前上下文

这个句话是很有玄机的哦，比如我们在一个函数环境中，我们首先用的是当前变量，若是没有就在父级函数中找，最后就在window中找。

PS：我们在写博客时候，中文没有问题，突然打一个字母上，你会发现整行都下移了1/2px，各位知道神马原因么？？？：）

eval在执行时候会产生一个调用上下文的东东（calling context），所以eval中定义的变量会影响函数环境中的变量。

作用域

闭包有作用域链有很多说不清道不明的关系，所以我们还是先看看作用域吧。

任何语言都会有作用域的概念，作用域便是变量与函数可访问范围，简称变量与函数的生命周期。
javascript中分为全局与局部两种，直白点window与function

 

var name = '叶小钗';
function func() {
    var id = '刀狂剑痴';
    function alertId() {
        alert(id);
    }
    alertId();
}
alert(name);//叶小钗
alert(id);//错误
func(); //刀狂剑痴
alertId();//错误

此处name属于window属性便是全局的（有些浏览器自带name属性小心陷阱！）

func也是全局的，但是func这个作用域链包含了全局的，所以他可以访问外部的，但是外部不能访问进来。

链子。。。

在js中什么都是对象，函数和其它对象一样拥有很多属性，其中一个比较特殊的属性是：

[[scope]]，scope翻译过来就是作用域，该属性包含了函数被创建的作用域中的对象的集合：

于是传说中的作用域链诞生了，他决定了哪些数据能被哪些函数访问。

当一个函数创建后，他的作用域链会被创建此函数的作用域中可访问的数据对象填充：

function add (a, b) {
    var sum = a + b;
    return sum;
}

在函数add创建时，他的作用域链中会填入一个全局对象，我们可以想象为window被压入了其[[scope]]

函数add的作用域在调用时会被用到，此时会创建一个“运行时上下文（execution context）”的内部对象，
他定义了函数执行时的环境，每个运行时上下文都有自己的作用域链，用于标识符解析，
当execution context创建时，而他的作用域链初始化为当前运行函数的[[scope]]所包含的对象。

所有相关的东东会按照其在函数中出现的顺序被复制到运行时上下文的作用域链中，他们共同组成了“活动对象（activation object）”，该对象就包含了函数的所有局部变量，参数，以及this，然后会排在我们作用域堆栈的顶端，我们可以最先获取，在运行时上下文结束（函数执行完毕）后，GC便会回收其空间。

在函数执行过程中，遇到一个变量便会经历一次标识符解析以决定从哪里获取以及存储数据。

这个过程首先从我们的“堆栈”顶端开始搜索，也就是活动对象的开始，若是有该变量便获取值，

若是没有则向下，知道window为止，没有就报错！

内存溢出

是想我们的浏览器内存若是搞满了，自然会浏览器崩溃，这是我们闭包之中需要考虑到的东西，因为他会导致我们一些东西无法GC。

闭包，神奇的魔法

闭包是神奇的魔法，因为他干了很多“坏事”，达到了出人意料的结果。

所谓闭包，便是function嵌套function，内部function可以访问外部的变量。
若是外部函数返回了内部函数，那么就闭了一个包

function a() {
    var name = '叶小钗';
    function alertName() {
        alert(name);
    }
    return alertName;
}

var func = a();
func();//叶小钗

这个家伙是个坏孩子，怎么说呢，坏孩子招人疼啊！

我们看第9行，按我们之前的理解a执行结束后，整个活动对象是不是该被销毁？是不是与a有关的东西都该GC呢？

确实是这样的，但是我们这里就产生了一个闭包，阻止了其销毁，因为他里面的变量被用到了。

这里的一个事实便是外部的func访问到了a内部的变量！

一个经典的例子：

function outer() {
    var o = {};
    for (var i = 0; i < 10; i++) {
        o[i] = function () {
            alert(i);
        }
    }
    return o;
}
var funcs = outer();
for (var k in funcs) {
    funcs[k]();
}
var s = '';

我们来看这个，大家应该都比较熟悉了，我们知道他全部会打印10。

这是因为我们将outer给予funcs时候，outer的任务就完成啦，他现在内部的i便是10，我们现在再来调用函数，所有的i自然是指向一个[[scope]]，所以变量i就是10！！！

要怎么解决大家也一目了然：

function outer() {
    var o = {};
    for (var i = 0; i < 10; i++) {
        o[i] = (function (i) {
            alert(i);
        })(i)
    }
    return o;
}
var funcs = outer();
for (var k in funcs) {
    funcs[k]();
}
var s = '';

相当于每次i是以一个副本的方式重新复制了一番，这个是可以达到我们的目的，但是有时候会对性能有一点影响，我们还是需要注意。

我们这里就不扯远了，在扯远的话我估计也露馅了。。。呵呵，最后我们来说一点应用吧。

闭包的应用

jquery时如何神奇的使用闭包的我现在还看不透，那是我1年后的任务，我这不关注他。

我这里说的应用时原来项目过程中遇到的，所以没有代码，我这边说下问题吧：

我们点击一个按钮，会向服务器发一个ajax请求，其中包含一些data，然后数据返回回来后我们又会用到开始传过去的一些data中的敏感信息，比如id。

这个时候一种比较笨的方法就是服务器给我们传回来，但是闭包出现后，我们便可以直接在函数中定义函数，而使用我们之前的data即可。

该例子有段时间了，大家看不清楚也没有关系啦。。。。

结语

叶大侠病了，求安慰，求按顶。。。。。