在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 
    }
}

最初由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的词法环境，这是调用时警报中引用的值。

为了补充其他答案，范围是所有声明的标识符（变量）的查找列表，并强制执行一组严格的规则，以确定当前执行的代码如何访问这些标识符。该查找可能用于分配变量，该变量是LHS（左侧）引用，也可能用于检索其值，该值是RHS（右侧）引用。这些查找是JavaScript引擎在编译和执行代码时在内部执行的操作。

因此，从这个角度来看，我认为我在凯尔·辛普森（Kyle Simpson）的《范围与关闭》（Scopes and Closures）电子书中找到的一张图片会有所帮助：

引用他的电子书：

该构建表示程序的嵌套范围规则集。第一个建筑物的楼层代表您当前执行的范围，无论你在哪里。建筑的顶层是全球范围。通过查看当前楼层来解析LHS和RHS参考，如果你找不到，就乘电梯到下一层，看那里，然后看下一个，以此类推。一旦你到达顶层（全球范围），你要么找到你想要的，要么不要。但你必须停止不管。

值得一提的是，“范围查找一旦找到第一个匹配项就停止”。

“作用域级别”的概念解释了如果在嵌套函数中查找“This”，为什么可以使用新创建的作用域来更改“This”。这里有一个链接，介绍了所有这些细节，您想了解的关于javascript范围的一切

ES5及更早版本：

Javascript中的变量最初（在ES6之前）是函数范围的。词汇范围这一术语意味着您可以通过“查看”代码来查看变量的范围。

用var关键字声明的每个变量都在函数的作用域内。但是，如果在该函数中声明了其他函数，则这些函数将可以访问外部函数的变量。这称为作用域链。其工作方式如下：

当一个函数试图解析一个变量值时，它首先查看自己的范围。这是函数体，即花括号{}之间的所有内容（除了在此范围内的其他函数内的变量）。如果它在函数体中找不到变量，它将爬上链，查看函数中定义函数的变量范围。这就是词法作用域的含义，我们可以在代码中看到这个函数的定义，因此可以通过查看代码来确定作用域链。

例子：

//全局范围var foo=“全局”；var bar=“全局”；var foobar=“全局”；函数outerFunc（）{//outerFunc范围var foo='outerFunc'；var foobar='outerFunc'；innerFunc（）；函数innerFunc（）{//innerFunc范围var foo='innerFunc'；console.log（foo）；console.log（bar）；console.log（foobar）；}}outerFunc（）；

当我们试图将变量foo、bar和foobar记录到控制台时，会发生以下情况：

我们尝试将foo记录到控制台，foo可以在函数innerFunc本身中找到。因此，foo的值被解析为字符串innerFunc。我们试图将bar记录到控制台，但在函数innerFunc本身中找不到bar。因此，我们需要攀登范围链。我们首先查看定义了函数innerFunc的外部函数。这是outerFunc函数。在outerFunc的作用域中，我们可以找到变量栏，其中包含字符串“outerFun”。在innerFunc中找不到foobar。因此，我们需要将作用域链升级到innerFunc作用域。在这里也找不到它，我们爬到了另一个层次的全局范围（即最外面的范围）。我们在这里找到了保存字符串“global”的变量foobar。如果在攀爬范围链之后没有找到变量，JS引擎将抛出referenceError。

ES6（ES 2015）及以上版本：

词汇范围和范围的概念仍然适用于ES6。然而，引入了一种声明变量的新方法。具体如下：

let：创建块范围变量const：创建一个必须初始化且不能重新分配的块范围变量

var和let/cont之间最大的区别是var是函数范围的，而let/cont是块范围的。下面是一个例子来说明这一点：

let letVar=“全局”；var varVar=“全局”；函数foo（）{if（真）{//用let声明的这个变量的作用域是if块，块作用域设letVar=5；//用let声明的这个变量的作用域是函数块，函数作用域var varVar=10；}console.log（letVar）；console.log（varVar）；}foo（）；

在上面的示例中，letVar记录全局值，因为用let声明的变量是块范围的。它们不再存在于各自的块之外，因此无法在if块之外访问变量。

下面是一个示例：

<script>

var globalVariable = 7; //==window.globalVariable

function aGlobal( param ) { //==window.aGlobal(); 
                            //param is only accessible in this function
  var scopedToFunction = {
    //can't be accessed outside of this function

    nested : 3 //accessible by: scopedToFunction.nested
  };

  anotherGlobal = {
    //global because there's no `var`
  }; 

}

</script>

您将需要调查闭包，以及如何使用它们创建私有成员。

内联处理程序

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