内联处理程序

前端代码编写者经常遇到的一个尚未描述的非常常见的问题是HTML中内联事件处理程序可见的范围，例如

<button onclick="foo()"></button>

on*属性可以引用的变量范围必须是：

全局（工作内联处理程序几乎总是引用全局变量）文档的属性（例如，作为独立变量的querySelector将指向document.querySelector；罕见）处理程序附加到的元素的属性（如上所述；罕见）

否则，当调用处理程序时，将得到ReferenceError。因此，例如，如果内联处理程序引用了在window.onload或$（function）｛中定义的函数，则引用将失败，因为内联处理程序只能引用全局范围内的变量，而函数不是全局的：

window.addEventListener（'DOMContentLoaded'，（）=>{函数foo（）{console.log（'运行'）；}});<button onclick=“foo（）”>单击</button>

文档的财产和处理程序附加到的元素的财产也可以作为内联处理程序中的独立变量引用，因为内联处理函数是在两个块中调用的，一个用于文档，另一个用于元素。这些处理程序中变量的作用域链非常不直观，并且一个工作的事件处理程序可能需要一个函数是全局的（并且应该避免不必要的全局污染）。

由于内联处理程序内部的作用域链非常奇怪，而且内联处理程序需要全局污染才能工作，并且内联处理程序在传递参数时有时需要丑陋的字符串转义，因此可能更容易避免它们。相反，使用Javascript（如addEventListener）而不是HTML标记附加事件处理程序。

函数foo（）{console.log（'运行'）；}document.querySelector（'.my button'）.addEventListener（'click'，foo）；<button class=“my button”>单击</button>

模块（<script type=“module”>）

另一方面，与在顶层运行的普通＜script＞标记不同，ES6模块内的代码在其自己的私有范围内运行。在普通＜script＞标记顶部定义的变量是全局的，因此您可以在其他＜script＞标签中引用它，如下所示：

<脚本>const foo=“foo”；</script><脚本>console.log（foo）；</script>

但是ES6模块的顶层不是全局的。在ES6模块顶部声明的变量仅在该模块内部可见，除非该变量被显式导出，或者除非它被分配给全局对象的属性。

<script type=“module”>const foo=“foo”；</script><脚本>//无法在此处访问foo，因为其他脚本是模块console.log（foo类型）；</script>

ES6模块的顶层与普通<script>中顶层IIFE内部的顶层类似。模块可以引用任何全局变量，除非模块为其明确设计，否则任何内容都不能引用模块内部的任何内容。

几乎只有两种类型的JavaScript作用域：

每个var声明的范围都与最直接的封闭函数相关联如果var声明没有封闭函数，则为全局范围

因此，除函数之外的任何块都不会创建新的作用域。这解释了for循环覆盖外部范围变量的原因：

var i = 10, v = 10;
for (var i = 0; i < 5; i++) { var v = 5; }
console.log(i, v);
// output 5 5

改用函数：

var i = 10, v = 10;
$.each([0, 1, 2, 3, 4], function(i) { var v = 5; });
console.log(i,v);
// output 10 10

在第一个示例中，没有块范围，因此最初声明的变量被覆盖。在第二个示例中，由于函数的原因，出现了一个新的作用域，因此最初声明的变量是SHADOWED，而不是重写。

就JavaScript范围而言，这几乎是您需要了解的全部内容，除了：

try/catch仅为异常变量本身引入新范围，其他变量没有新范围with子句显然是另一个例外，但不鼓励使用with子句(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with)

因此，您可以看到JavaScript作用域实际上非常简单，尽管并不总是直观的。需要注意的几点：

var声明被提到了范围的顶端。这意味着无论var声明发生在哪里，对于编译器来说，就像var本身发生在顶部一样同一范围内的多个var声明组合在一起

因此，此代码：

var i = 1;
function abc() {
  i = 2;
  var i = 3;
}
console.log(i);     // outputs 1

相当于：

var i = 1;
function abc() {
  var i;     // var declaration moved to the top of the scope
  i = 2;
  i = 3;     // the assignment stays where it is
}
console.log(i);

这似乎与直觉相悖，但从命令式语言设计者的角度来看，这是有道理的。

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

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

老式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变量被提升。这意味着声明总是位于范围的顶部。

我很喜欢接受的答案，但我想补充一点：

作用域收集并维护所有声明的标识符（变量）的查找列表，并对当前执行的代码如何访问这些标识符实施一组严格的规则。

作用域是一组按标识符名称查找变量的规则。

如果在直接作用域中找不到变量，引擎将继续查询下一个外部包含作用域，直到找到或到达最外部（即全局）作用域。是一组规则，用于确定在何处以及如何查找变量（标识符）。该查找可能用于分配变量，该变量是LHS（左侧）参考，也可能用于检索其值，该值是RHS（右侧）参考。LHS引用源于赋值操作。与作用域相关的赋值可以使用=运算符进行，也可以通过将参数传递给（赋值给）函数参数进行。JavaScript引擎在执行代码之前首先编译代码，在这样做的过程中，它会拆分像vara=2这样的语句；分为两个单独的步骤：第一步。首先，var a在该范围中声明它。这是在代码执行之前开始执行的。第二。稍后，a=2查找变量（LHS引用），如果找到，则将其赋值。LHS和RHS引用查找都从当前执行的作用域开始，如果需要的话（也就是说，它们找不到它们在那里寻找的对象），它们会在嵌套作用域中一次一个作用域（层）查找标识符，直到它们到达全局（顶层）并停止，然后要么找到，要么不找到。未完成的RHS引用导致引发ReferenceError。未完成的LHS引用将导致该名称的自动隐式创建的全局（如果不在严格模式下），或ReferenceError（如果在严格模式中）。作用域由一系列“气泡”组成，每个气泡充当容器或桶，其中声明了标识符（变量、函数）。这些气泡整齐地嵌套在彼此内部，这种嵌套是在作者时定义的。

我发现许多新接触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个嵌套函数，但目前不为全局变量着色。