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

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

引用他的电子书：

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

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

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

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

JS中只有函数作用域。不阻止范围！你也可以看到什么在提升。

var global_variable = "global_variable";
var hoisting_variable = "global_hoist";

// Global variables printed
console.log("global_scope: - global_variable: " + global_variable);
console.log("global_scope: - hoisting_variable: " + hoisting_variable);

if (true) {
    // The variable block will be global, on true condition.
    var block = "block";
}
console.log("global_scope: - block: " + block);

function local_function() {
    var local_variable = "local_variable";
    console.log("local_scope: - local_variable: " + local_variable);
    console.log("local_scope: - global_variable: " + global_variable);
    console.log("local_scope: - block: " + block);
    // The hoisting_variable is undefined at the moment.
    console.log("local_scope: - hoisting_variable: " + hoisting_variable);

    var hoisting_variable = "local_hoist";
    // The hoisting_variable is now set as a local one.
    console.log("local_scope: - hoisting_variable: " + hoisting_variable);
}

local_function();

// No variable in a separate function is visible into the global scope.
console.log("global_scope: - local_variable: " + local_variable);

下面是一个示例：

<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内部的顶层类似。模块可以引用任何全局变量，除非模块为其明确设计，否则任何内容都不能引用模块内部的任何内容。

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