内联处理程序

前端代码编写者经常遇到的一个尚未描述的非常常见的问题是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内部的顶层类似。模块可以引用任何全局变量，除非模块为其明确设计，否则任何内容都不能引用模块内部的任何内容。

1） 有一个全局作用域、一个函数作用域以及with和catch作用域。一般来说，变量的作用域没有“块”级别的作用域——with和catch语句为其块添加名称。

2） 作用域一直由函数嵌套到全局作用域。

3） 通过原型链解决财产问题。with语句将对象属性名称带入with块定义的词法范围。

编辑：ECMAAScript 6（Harmony）被指定为支持let，我知道chrome允许一个“和谐”标志，所以也许它确实支持它。。

这将是对块级范围的支持，但必须使用关键字才能实现。

编辑：根据本杰明在评论中指出的with和catch语句，我编辑了帖子，并添加了更多内容。with和catch语句都将变量引入到各自的块中，这是一个块范围。这些变量是传递给它们的对象的财产的别名。

 //chrome (v8)

 var a = { 'test1':'test1val' }
 test1   // error not defined
 with (a) { var test1 = 'replaced' }
 test1   // undefined
 a       // a.test1 = 'replaced'

编辑：澄清示例：

test1的作用域为with块，但别名为a.test1Vartest1'在上层词法上下文（函数或全局）中创建一个新的变量test1，除非它是一个属性——它就是这样。

诶呀小心使用'with'——就像var是noop一样，如果变量已经在函数中定义，那么它也是从对象导入的名称的noop！对已经定义的名称稍加注意会使其更加安全。因此，我个人永远不会使用。

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

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

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

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

在JavaScript中，有两种类型的作用域：

本地范围全局范围

Below函数有一个局部范围变量carName。这个变量不能从函数外部访问。

function myFunction() {
    var carName = "Volvo";
    alert(carName);
    // code here can use carName
}

Below Class有一个全局范围变量carName。这个变量可以从类中的任何地方访问。

class {

    var carName = " Volvo";

    // code here can use carName

    function myFunction() {
        alert(carName);
        // code here can use carName 
    }
}

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

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

几乎只有两种类型的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);

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