——这篇文章有点意思，可以扩展你对作用域和闭包的认识。

本文内容

背景
作用域
闭包
- 臭名昭著的循环问题
- 自调用函数（匿名函数）
其他

我认为，尝试向别人解释 JavaScript 作用域和闭包是很纠结的事情。

背景

有很多文章和博客都在试图解释的作用域（scope）和关闭（closure），但总体来说，我认为大多数都不是很清楚。此外，一些人想当然地认为，之前，每个人都已经大概用15种其他语言开发，而我的经验是，很多这样编写 JavaScript 代码的人都具有 HTML 和 CSS 背景，而不是 C 和 Java。

因此，本文的目标是，让每个人掌握什么是作用域和闭包，他们如何工作，特别是你如何可以从中受益。在阅读本文前，你需要理解变量和函数这些基本概念。

作用域（Scope）

作用域是指变量和函数可访问性在哪里，以及执行环境是什么。最基本的是，一个变量或函数可以定义在全局或局部作用域。变量具有所谓的函数作用域，函数跟变量具有相同的作用域。

全局（Global）作用域

当是全局的时候，意味着，在你的代码中，可以从任何地方访问。如下代码所示：

        var monkey = "Gorilla";

        function greetVisitor() {

            return alert("Hello dear blog reader!");

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

如果该代码执行在 Web 浏览器中，那么，函数的作用域是 window，因此，对运行在 Web 浏览器窗口中所有东西，该函数都是可用的。

局部（Local）作用域

与全局作用域相反，局部作用域只是在你某部分的代码中定义并访问，如一个函数。代码如下所示：

        function talkDirty() {

            var saying = "Oh, you little VB lover, you";

            return alert(saying);

        alert(saying); // Throws an error

上面代码，变量 saying 只在 talkDirty 函数内可用。而在外边，更本没有定义。注意：如果声明 saying 前边没有 var 关键字，那么该变量将自动变成一个全局变量。

这也意味着，如果你有嵌套（nested）函数，那么，这个嵌套函数将可以访问包含其函数内的变量和函数：

        function saveName(firstName) {

            function capitalizeName() {

                return firstName.toUpperCase();

            var capitalized = capitalizeName();

            return capitalized;

        alert(saveName("Robert")); // Returns "ROBERT"

正如上面看到的，嵌套函数 capitalizeName 不需要任何参数传递，就可以完全访问它外边的 saveName 函数的参数 firstName。清楚起见，让我们看下面的例子：

        function siblings() {

            var siblings = ["John", "Liza", "Peter"];

            function siblingCount() {

                var siblingsLength = siblings.length;

                return siblingsLength;

            function joinSiblingNames() {

                return "I have " + siblingCount() + " siblings:\n\n" + siblings.join("\n");

            return joinSiblingNames();

        alert(siblings()); // Outputs "I have 3 siblings: John Liza Peter"

上面代码，那两个嵌套函数都可以访问包含其函数内的 siblings 数组，并且，每个嵌套函数都可以同等地访问另一个嵌套函数（在这种情况下，joinSiblingNames 可以访问 siblingCount）。但是， siblingCount 函数中的变量 siblingsLength 只在它所在的函数可用，也就是作用域。

闭包（Closures）

现在，当你希望获得更好地掌握作用域是什么时，让我们向组合添加闭包。闭包是表达式，通常是函数，再一个某个上下文环境内进行变量设置。或者，为了尝试并使其更容易，涉及局部变量的内部函数创建闭包。例如：

        function add(x) {

            return function (y) {

                return x + y;

};

        var add5 = add(5);

        var no8 = add5(3);

        alert(no8); // Returns 8

发生了什么？

当 add 函数被调用时，它返回了一个函数。
这个返回的函数关闭上下文环境，记住参数 x 在那个时候是什么（例如，上面代码的 5）。
当调用 add 函数的返回结果被分配给变量 add5 时，add5 函数总是知道 x 是什么，当 add5 被初始化创建时。
add5 变量引用一个函数，它总是把传给它的参数加 5。
这意味着，当用 3 调用 add5 时，它应该返回 3 加 5，等于 8。

因此，在 JavaScript 世界里，事实上，add5 函数实际像如下所示：

        function add5(y) {

            return 5 + y;

臭名昭著的循环问题

有多少次你创建一个循环，想以某种方式分配 i 的值，例如：给一个元素，有没有发现它只是返回的最后一个 i 的值？

错误的引用

让我们看下错误的代码，它创建五个链接元素，每个元素的文本值为 i，并且每个元素的单击事件为弹出内容为 i 的 alert。把这五个元素追加到 document body：

        function addLinks() {

            for (var i = 0, link; i < 5; i++) {

                link = document.createElement("a");

                link.innerHTML = "Link " + i;

                link.onclick = function () {

                    alert(i);

};

                document.body.appendChild(link);

        window.onload = addLinks;

每个元素都获得了正确的文本，例如“Link 0”、“Link 1”等等，但是你单击的每个链接，alert 中的值都是 5，这显然不对，为什么？原因在于，变量 i 以 1 递增，可 onclick 事件没有被执行，仅仅是应用到了元素，i 再增加 1。

因此，循环继续直到等于 5，这是 i 的最后一个值，此时，函数 addLinks 退出。之后，当 onclick 事件实际被触发时，只得到 i 的最后一个值。

正确的引用

你所需要做的就是创建一个闭包，这样，当你把 i 值应用到元素的 onclick 事件时，就会在触发那个时刻得到 i 的准确值。如下所示：

        function addLinks() {

            for (var i = 0, link; i < 5; i++) {

                link = document.createElement("a");

                link.innerHTML = "Link " + i;

                link.onclick = function (num) {

                    return function () {

                        alert(num);

};

                } (i);

                document.body.appendChild(link);

        window.onload = addLinks;

上面代码就没有问题了。单击第一个创建的链接元素，alter 为 0；第二个为 1 等等。该解决方案是，应用到 onclick 事件的内部函数创建了一个闭包，在那里引用参数 num，也就是 i 的值。

自调用函数（Self-Invoking Functions）

自调用函数是那些自动执行的函数（匿名函数），并且创建它们自己的闭包，如下代码所示：

        (function () {

            var dog = "German Shepherd";

            alert(dog);

        })();

        alert(dog); // Returns undefined

dog 变量只在其作用域内可用。它可以解决我们上面的循环问题，而且这也是 Yahoo JavaScript Module Pattern 的基础。

Yahoo JavaScript Module Pattern

Yahoo JavaScript 模块模式的要点是，它使用了一个自调用函数来创建一个封闭，因此，使具有私有和公共的属性和方法成为可能。一个简单的例子，如下所示：

        var person = function () {

            // Private

            var name = "Robert";

            return {

                getName: function () {

                    return name;

},

                setName: function (newName) {

                    name = newName;

};

        } ();

        alert(person.name); // Undefined

        alert(person.getName()); // "Robert"

        person.setName("Robert Nyman");

        alert(person.getName()); // "Robert Nyman"

这个代码就很优雅了。现在，你可以自己决定公开什么，隐藏什么了。变量 name 就是对外部隐藏的（在外部引用为 undefined），但可以通过 getName 和 setName 函数访问，因为，它们创建了闭包，在里边引用了 name 变量。

其他

下载 Demo

JavaScript 作用域和闭包——另一个角度：扩展你对作用域和闭包的认识【翻译+整理】的更多相关文章

javascript回调函数，闭包作用域，call，apply函数解决this的作用域问题
在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实 ...
JavaScript中函数作为另一个函数的参数的时候它存在于哪个作用域
一直对函数作为参数被传递进另外一个函数理解的不是很清除.先看下这段代码吧: function test(fn){ var bar = 1; fn(); } var bar = 99; test(fun ...
JavaScript 上下文环境和作用域，以及 call、apply 和 bind【转载+翻译+整理】
--看到这篇文章,翻译国外的,虽说写得有点矫情,但总体来看,还是相当不错的- 本文内容我在哪儿?你又是谁 ? this? 用 apply 和 call 掌控上下文环境 bind 之美本文将说明上下 ...
python基础----函数的定义和调用、return语句、变量作用域、传参、函数嵌套、函数对象、闭包、递归函数
1.函数的定义: 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也可 ...
ASP.NET MVC WebApi 返回数据类型序列化控制（json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面，各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目
ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...
我的第一个chrome扩展（1）——读样例，实现时钟
学习chrome扩展开发: 与网页类似,需要的知识:html,javascript chrome扩展程序的构成: manifest.json:对扩展程序的整体描述文件 { "manifest ...
运用JavaScript构建你的第一个Metro式应用程序（onWindows 8）（二）
原文 http://blog.csdn.net/zhangxin09/article/details/6793330 先前的学习中,我们已经了解了 Metro式的 JavaScript 应用程序大致如 ...
如何用原生js开发一个Chrome扩展程序
原文地址:How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单,只需要使用原生的js就可以完成 ...
《JavaScript 高级程序设计》第四章：变量、作用域和内存问题
目录变量的引用执行环境及作用域作用域链延长块级作用域垃圾回收机制变量的引用当一个变量保存了基本数据类型时,此时对于变量的操作(赋值,运算)就是操作这个基本数据的本身,就算是赋值操作,赋值 ...

随机推荐

latex编写论文
写给像我这样需要使用latex编写论文的小菜鸟,给出demo和注释,高级部分自己参透(默认你已经搭好环境). 1.搭论文架子 demo1 \documentclass[10pt,a4paper]{ar ...
C#交换两个变量值的多种写法
在学习.Net/C#或者任何一门面向对象语言的初期,大家都写过交换两个变量值,通常是通过临时变量来实现.本篇使用多种方式实现两个变量值的交换. 假设int x =1; int y = 2;现在交换两个 ...
在ASP.NET MVC中实现一种不同于平常的三级联动、级联方式, 可用于城市、车型选择等多层级联场景
三级或多级联动的场景经常会碰到,比如省.市.区,比如品牌.车系.车型,比如类别的多级联动......我们首先想到的是用三个select来展示,这是最通常的做法.但在另外一些场景中,比如确定搜索条件的时 ...
JavaScript进阶系列04,函数参数个数不确定情况下的解决方案
本篇主要体验函数参数个数不确定情况下的一个解决方案.先来看一段使用函数作为参数进行计算的实例. var calculate = function(x, y, fn) { return fn(x, y) ...
Delphi数学运算当中四舍五入的问题
在最近版本的Delphi Pascal 编译器中,Round 函数是以 CPU 的 FPU (浮点部件) 处理器为基础的.这种处理器采用了所谓的 "银行家舍入法",即对中间值 (如 ...
Android：intent的基础
只有一个活动的应用也太简单了吧?没错,你的追求应该更高一点.不管你想创建多少个活动,方法都和上一节中介绍的是一样的.唯一的问题在于,你在启动器中点击应用的图标只会进入到该应用的主活动,那么怎样才能 ...
win10系统更新不了，总出现错误0xc8000442
来自 win10系统更新不了,总出现错误0xc8000442,SHIZHI333的回答. 首先卸载制有第三方防护软件管管家类软件,再试试下面的方法:清理一下更新临时文件,具体操作如下: 1.右键点击开 ...
WebApp分析建模的工具
最近Web工程课在学习分析建模工具的内容.这周作业就写我对WebApp建模工具的认识.Web建模工具有很多,但是专门为分析开发的却相对很少.下面介绍在进行分析时可以用的四类工具. UML工具.使用统一 ...
Linux学习17-gitlab访问慢502问题优化
前言浏览器访问gitlab的web页面,发现非常慢,并且很容易出现502问题.其中一个原因就是8080端口被tomcat占用,前面一篇已经更换了端口,但还是很慢. 后来搜了下,原因是gitlab占用 ...
【C++】STL常用容器总结之五：双端队列deque
6.双端队列deque 所谓的deque是”double ended queue”的缩写,双端队列不论在尾部或头部插入元素,都十分迅速.而在中间插入元素则会比较费时,因为必须移动中间其他的元素.双端队 ...

JavaScript 作用域和闭包——另一个角度：扩展你对作用域和闭包的认识【翻译+整理】