Javascript中的暗物质：闭包概念杂谈

日期： 2012-12-06 来源：TechTarget中国 英文

　　诡异的闭包

　　Javascript中有一个特殊的特性——闭包，对于.NET程序员来说，比较熟悉的是面向对象的程序设计OOP, 而来自函数式语言的闭包则显得比较诡异，许多程序员对它敬而远之。

　　对于闭包我们还是要从函数式语言的特点说起。

　　不知道你有没有发现，在 javascript 中没有 public ，private 之类的关键字，也没有 class ，虽然也存在对象一说，但是对象的地位远远没有在 C# 中是一等公民，在 js 中，没有对象你也可以一样写程序。它只是一种数据的表示形式而已，可有也可无。

　　闭包何来？

　　如何在Javascript实现数据保护呢？闭包就是实现它的利器，这需要我们放下普通的对象，理解一下Javascript的工作原理。

　　在Javascript中，可以在函数中定义新的函数，这种嵌套函数还可以作为函数的返回值，被外部的变量所引用。在普通的程序设计语言中，比如 C 中，虽然也存在函数指针的概念，但是，所谓的函数指针仅仅是一段代码的地址而已，而Javascript中返回的函数引用，则不限于此。

　　在C语言中，在函数运行的时候，局部变量是保存在堆栈中的，函数执行完毕，系统所做的是弹出堆栈。

　　实际上，在Javascript中，函数每次执行的时候，注意是运行时，系统会同时创建一个此次函数运行的环境对象，而此次运行期间的局部变量则关联在这个环境对象上，在普通不返回函数 的普通函数中，函数执行完毕，则环境对象也一起释放。而如果函数返回了定义在外部函数中的嵌套函数，那么，这个环境对象将不会释放，也就是说，这个时候， 返回了一个看得见的函数对象，还附带了一个看不见的暗物质 – 外部函数的环境对象。

　　看得见的函数对象加上隐含的环境对象就是闭包。

　　这个环境对象只能通过这个函数隐式访问，我们并没有它的引用，也无法直接访问它。结果就是实现了信息的隐藏。

　　实现私有的数据

　　考虑下面的代码：

function outer() { 
    var name = “Alice”; 
    var inner = function () { 
        return name; 
    } 
    return inner; 
} 
var fn = outer(); 
alert(fn());

　　在这个例子中，看起来简单的 fn 函数背后，其实暗藏了在执行 outer 函数时期创建的环境对象，所以通过 fn 可以得到 Alice 这个名字，而且没有其他的渠道允许得到这个名字。

　　为什么数据搞乱了？

　　再看另外一个经典的例子。

<body> 
    <div> 
        <a href=”#”>Click Me!</a> 
        <a href=”#”>Click Me!</a> 
        <a href=”#”>Click Me!</a> 
    </div> 
    <script type =”text/javascript”> 
        function main(links) { 
            for (var i = 0; i < links.length; i++) { 
                links[i].onclick = function () { 
                    alert(i + 1); 
                } 
            } 
        }; 
        main(document.getElementsByTagName(“a”)); 
    </script> 
</body>

　　弹出的是多少呢？感觉有三次循环，应该弹出 1, 2, 3。运行一下，你会看到实际上是 4, 4, 4！

　　是不是非常诡异？

　　从闭包的角度来说，则非常简单，main 函数执行了几次呢?只有一次，在执行的时候创建了一个闭包对象，其中引用了定义在 main 中的局部变量 i，在循环体中，实际上创建了三个内部函数，它们引用的都是同一个环境对象。这些函数注册到链接的 onclick 事件上，其实也就是已经传出了函数 main，所以，main 的环境对象也就悄悄地成为了暗物质，而循环完成之后 i 已经最终被赋予了 3 这个值，三个函数访问的是同一个环境对象中的 i, 所以，在点击链接的时候看到 4 这个结果也就正常了。

　　解铃还需系铃人

　　如果希望得到的是 1， 2， 3 这个结果又该怎么办呢？

　　我们可以定义一个内部函数，让它执行三次，这个将会创建三个对应的环境对象，我们可以使得这三个环境对象包含不同的值。

function main(links) { 
    var inner = function (elem, i) { 
        elem.onclick = function () { 
            alert(i + 1); 
        }; 
    }; 
    for (var i = 0; i < links.length; i++) { 
        var elem = links[i]; 
        inner(elem, i); 
    } 
};

　　由于 inner 函数执行了三次，所以将会创建三个不同的环境对象，每个环境对象中的 i 都是不同的值。这样注册到 onclick 中的函数就可以访问到不同的值了。

　　闭包的概念

　　这里，我们可以看一下闭包的概念了。来自 Wiki 的说明是这样的

　　在计算机科学中，闭包(Closure)是词法闭包(Lexical Closure)的简称，是引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在，即使已经离开了创造它的环境也不例外。所以，有另一种说法认为闭包是由函数和与其相关的引用环境组合而成的实体。

我们一直都在努力坚持原创.......请不要一声不吭，就悄悄拿走。

我原创，你原创，我们的内容世界才会更加精彩！

【所有原创内容版权均属TechTarget，欢迎大家转发分享。但未经授权，严禁任何媒体（平面媒体、网络媒体、自媒体等）以及微信公众号复制、转载、摘编或以其他方式进行使用。】

微信公众号

TechTarget微信公众号二维码

TechTarget

官方微博

TechTarget中国官方微博二维码

TechTarget中国

相关推荐

  • AWS MEAN堆栈+JavaScript=快速搭建应用

    开发人员在构建Web应用时有许多选择。市面上有无数的框架和语言可选，而像AWS这样的云平台可以方便地部署和扩展应用程序。

  • JDK 8u40更新：新增功能抢先看

    俗话说长江后浪推前浪，一代新人换旧人，Java更新版本交替，也是这样一个道理。甲骨文又给Java添加了哪些新功能。

  • 移动浏览器到云：JavaScript地位正在扩张

    不难发现人们非常喜欢在前端开发中使用JavaScript。但是，令我们惊讶的是后端开发也如此青睐JavaScript，促进了基于云和基于数据中心的托管应用的发展。

  • 移动HTML5挑战何在？

    当HTML5出现时，许多开发者和应用架构师视之为创建平台独立应用、简化你的设备支持以及当新的移动设备OS版本发布时减少应用相关问题的机会。