我发现许多新接触JavaScript的人很难理解继承在默认情况下在语言中是可用的，而函数作用域是迄今为止唯一的作用域。我为去年年底我写的一个名为JSprety的美化者提供了一个扩展。功能为代码中的函数范围着色，并始终将颜色与该范围中声明的所有变量相关联。当在不同的范围中使用来自一个范围的颜色的变量时，可以直观地演示闭包。

尝试以下功能：

http://prettydiff.com/jspretty.xhtml?c=white&jsscope

观看演示：

http://prettydiff.com/jspretty.xhtml?c=white&jsscope&s=http://prettydiff.com/lib/markup_beauty.js

在以下位置查看代码：

http://prettydiff.com/lib/jspretty.jshttps://github.com/austincheney/Pretty-Diff/blob/master/lib/jspretty.js

目前，该功能支持深度为16个嵌套函数，但目前不为全局变量着色。

全局声明的变量具有全局范围。在函数中声明的变量的作用域是该函数，并隐藏同名的全局变量。

（我相信真正的JavaScript程序员可以在其他答案中指出许多微妙之处。特别是我在这个页面上看到了这到底意味着什么。不过，希望这个更为介绍性的链接足以让你开始。）

Javascript使用作用域链为给定函数建立作用域。通常有一个全局范围，每个定义的函数都有自己的嵌套范围。在另一个函数中定义的任何函数都具有与外部函数链接的局部作用域。定义范围的始终是源代码中的位置。

作用域链中的元素基本上是一个带有指向其父作用域指针的Map。

解析变量时，javascript从最内部的范围开始并向外搜索。

最初由Brendan Eich设计的JavaScript中的作用域概念来自HyperCard脚本语言HyperTalk。

在这种语言中，显示类似于一堆索引卡。有一张主卡被称为背景。它是透明的，可以看作是底牌。此基础卡上的任何内容都与放在其上面的卡共享。放在上面的每张卡都有自己的内容，这些内容优先于前一张卡，但如果需要，仍然可以访问前一张卡片。

这正是JavaScript作用域系统的设计方式。它只是有不同的名字。JavaScript中的卡片称为Execution ContextsCMA。这些上下文中的每一个都包含三个主要部分。变量环境、词汇环境和此绑定。回到卡片参考，词汇环境包含堆栈中较低的先前卡片的所有内容。当前上下文位于堆栈的顶部，其中声明的任何内容都将存储在变量环境中。在命名冲突的情况下，变量环境将优先。

此绑定将指向包含对象。有时，作用域或执行上下文在包含对象不变的情况下发生变化，例如在声明的函数中，包含对象可能是窗口或构造函数。

这些执行上下文是在任何时候传输控制时创建的。当代码开始执行时，控制权被转移，这主要是通过函数执行完成的。

这就是技术解释。在实践中，记住在JavaScript中

范围在技术上是“执行上下文”上下文形成存储变量的环境堆栈堆栈的顶部优先（底部是全局上下文）每个函数都创建一个执行上下文（但不总是一个新的此绑定）

将此应用于前面的一个示例（5。“闭包”），可以遵循执行上下文的堆栈。在本例中，堆栈中有三个上下文。它们由外部上下文、var six调用的立即调用函数中的上下文以及var six立即调用函数内部返回函数的上下文定义。

i） 外部上下文。它的可变环境为a=1ii）IIFE上下文，它有一个a=1的词法环境，但一个a=6的变量环境在堆栈中优先iii）返回的函数上下文，它具有a=6的词法环境，这是调用时警报中引用的值。

试试这个奇怪的例子。在下面的示例中，如果a是一个初始化为0的数字，您将看到0，然后是1。除了a是一个对象，javascript将向f1传递a的指针，而不是它的副本。结果是两次都得到相同的警报。

var a = new Date();
function f1(b)
{
    b.setDate(b.getDate()+1);
    alert(b.getDate());
}
f1(a);
alert(a.getDate());

老式JavaScript

传统上，JavaScript实际上只有两种类型的作用域：

全局范围：从应用程序开始，变量在整个应用程序中都是已知的（*）函数作用域：变量在声明它们的函数中是已知的，从函数开始（*）

我不会详细说明这一点，因为已经有许多其他答案可以解释这一差异。

---

现代JavaScript

最新的JavaScript规范现在还允许第三个范围：

块作用域：标识符从其声明的作用域的顶部开始“已知”，但在其声明的行之后才能分配或取消引用（读取）。这一过渡时期被称为“时间死区”

---

如何创建块范围变量？

传统上，您可以这样创建变量：

var myVariable = "Some text";

块范围变量的创建方式如下：

let myVariable = "Some text";

---

那么，功能范围和块范围之间的区别是什么？

要了解功能范围和块范围之间的区别，请考虑以下代码：

// i IS NOT known here
// j IS NOT known here
// k IS known here, but undefined
// l IS NOT known here

function loop(arr) {
    // i IS known here, but undefined
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here

    for( var i = 0; i < arr.length; i++ ) {
        // i IS known here, and has a value
        // j IS NOT known here
        // k IS known here, but has a value only the second time loop is called
        // l IS NOT known here
    };

    // i IS known here, and has a value
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here

    for( let j = 0; j < arr.length; j++ ) {
        // i IS known here, and has a value
        // j IS known here, and has a value
        // k IS known here, but has a value only the second time loop is called
        // l IS NOT known here
    };

    // i IS known here, and has a value
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here
}

loop([1,2,3,4]);

for( var k = 0; k < arr.length; k++ ) {
    // i IS NOT known here
    // j IS NOT known here
    // k IS known here, and has a value
    // l IS NOT known here
};

for( let l = 0; l < arr.length; l++ ) {
    // i IS NOT known here
    // j IS NOT known here
    // k IS known here, and has a value
    // l IS known here, and has a value
};

loop([1,2,3,4]);

// i IS NOT known here
// j IS NOT known here
// k IS known here, and has a value
// l IS NOT known here

在这里，我们可以看到变量j只在first for循环中知道，而在前后都不知道。然而，我们的变量i在整个函数中是已知的。

此外，考虑到块范围的变量在声明之前是未知的，因为它们没有被提升。也不允许在同一块内重新声明同一块范围内的变量。这使得块作用域变量比全局或函数作用域变量更不容易出错，这些变量被提升，在多个声明的情况下不会产生任何错误。

---

现在使用块范围变量安全吗？

今天使用它是否安全取决于您的环境：

如果您正在编写服务器端JavaScript代码（Node.js），则可以安全地使用let语句。如果您正在编写客户端JavaScript代码并使用基于浏览器的转译器（如Traceur或babel standalone），则可以安全地使用let语句，但是您的代码在性能方面可能不是最佳的。如果您正在编写客户端JavaScript代码并使用基于节点的转译器（如traceur shell脚本或Babel），则可以安全地使用let语句。而且，由于您的浏览器将只知道转译的代码，因此性能缺陷应该受到限制。如果您正在编写客户端JavaScript代码，而不使用转译器，则需要考虑浏览器支持。以下是一些根本不支持let的浏览器：Internet explorer 10及以下Firefox 43及以下Safari 9及以下Android浏览器4及以下版本Opera 27及以下Chome 40及以下Opera Mini和黑莓浏览器的任何版本

---

如何跟踪浏览器支持

有关阅读此答案时哪些浏览器支持let语句的最新概述，请参阅“我可以使用”页面。

---

（*）全局和函数范围的变量可以在声明之前初始化和使用，因为JavaScript变量被提升。这意味着声明总是位于范围的顶部。