总长DR
JavaScript 具有词法（也称为静态）作用域和闭包。这意味着您可以通过查看源代码来了解标识符的范围。
这四个范围是：
- 全局 - 一切可见
- 函数 - 在函数（及其子函数和块）内可见
- 块 - 在块（及其子块）内可见
- 模块 - 在模块内可见
除了全局和模块作用域的特殊情况之外，变量是使用var（函数作用域）、let（块作用域）和const（块作用域）声明的。大多数其他形式的标识符声明在严格模式下具有块作用域。
概述
范围是标识符有效的代码库区域。
词法环境是标识符名称和与其关联的值之间的映射。
作用域由词法环境的链接嵌套构成，嵌套中的每个级别对应于祖先执行上下文的词法环境。
这些链接的词汇环境形成了范围“链”。标识符解析是沿着这条链搜索匹配标识符的过程。
标识符解析仅发生在一个方向：向外。这样，外部词汇环境就无法“看到”内部词汇环境。
决定JavaScript 中标识符的范围有三个相关因素：
- 标识符是如何声明的
- 声明标识符的位置
- 无论您处于严格模式还是非严格模式
声明标识符的一些方法：
var，let和const- 功能参数
- catch 块参数
- 函数声明
- 命名函数表达式
- 全局对象上隐式定义的属性（即
var在非严格模式下丢失）
import声明eval
可以声明一些位置标识符：
- 全球背景
- 函数体
- 普通块
- 控制结构的顶部（例如循环、if、while 等）
- 控制结构体
- 模块
声明样式
变量
使用声明的标识符具有var 函数作用域，除非它们直接在全局上下文中声明，在这种情况下，它们将作为属性添加到全局对象上并具有全局作用域。它们在eval函数中的使用有单独的规则。
让和常量
使用let和声明的标识符const 具有块作用域，除非直接在全局上下文中声明它们，在这种情况下它们具有全局作用域。
注：let、const、var 均为吊装。这意味着它们定义的逻辑位置是其封闭范围（块或函数）的顶部。但是，在控制通过源代码中的声明点之前，无法读取或分配使用letand声明的变量。const过渡期被称为暂时死区。
function f() {
function g() {
console.log(x)
}
let x = 1
g()
}
f() // 1 because x is hoisted even though declared with `let`!
运行代码片段Hide results
展开片段
函数参数名称
函数参数名称的范围仅限于函数体。请注意，这有一点复杂。声明为默认参数的函数会关闭参数列表，而不是函数体。
函数声明
函数声明在严格模式下具有块作用域，在非严格模式下具有函数作用域。注意：非严格模式是一组复杂的紧急规则，基于不同浏览器的古怪历史实现。
命名函数表达式
命名函数表达式的范围仅限于其自身（例如，出于递归的目的）。
全局对象的隐式定义属性
在非严格模式下，全局对象上隐式定义的属性具有全局作用域，因为全局对象位于作用域链的顶部。在严格模式下，这些是不允许的。
评估
在eval字符串中，使用 using 声明的变量var将放置在当前范围内，或者，如果eval间接使用，则作为全局对象的属性。
例子
下面的代码将引发 ReferenceError，因为名称x、y、 和z在函数之外没有任何意义f。
function f() {
var x = 1
let y = 1
const z = 1
}
console.log(typeof x) // undefined (because var has function scope!)
console.log(typeof y) // undefined (because the body of the function is a block)
console.log(typeof z) // undefined (because the body of the function is a block)
运行代码片段Hide results
展开片段
y下面的代码将为and抛出一个 ReferenceError z，但对于 ，则不会x，因为 的可见性x不受块的约束。定义控制结构体（如if、for和while）的块的行为类似。
{
var x = 1
let y = 1
const z = 1
}
console.log(x) // 1
console.log(typeof y) // undefined because `y` has block scope
console.log(typeof z) // undefined because `z` has block scope
运行代码片段Hide results
展开片段
在下面，由于具有函数作用域，x因此在循环外部可见：var
for(var x = 0; x < 5; ++x) {}
console.log(x) // 5 (note this is outside the loop!)
运行代码片段Hide results
展开片段
...由于这种行为，您需要小心关闭使用varin 循环声明的变量。这里只声明了一个变量实例x，并且它在逻辑上位于循环之外。
下面的代码打印5, 五次，然后在循环外打印5第六次：console.log
for(var x = 0; x < 5; ++x) {
setTimeout(() => console.log(x)) // closes over the `x` which is logically positioned at the top of the enclosing scope, above the loop
}
console.log(x) // note: visible outside the loop
运行代码片段Hide results
展开片段
undefined由于x是块作用域，因此会打印以下内容。回调是一对一异步运行的。变量的新行为let意味着每个匿名函数都会对名为 的不同变量进行关闭x（与 不同var），因此会0打印整数4：
for(let x = 0; x < 5; ++x) {
setTimeout(() => console.log(x)) // `let` declarations are re-declared on a per-iteration basis, so the closures capture different variables
}
console.log(typeof x) // undefined
运行代码片段Hide results
展开片段
下面的代码不会抛出 a ReferenceError，因为 的可见性x不受块的约束；但是，它会打印，undefined因为变量尚未初始化（由于该if语句）。
if(false) {
var x = 1
}
console.log(x) // here, `x` has been declared, but not initialised
运行代码片段Hide results
展开片段
在循环顶部for使用声明的变量的let作用域为循环体：
for(let x = 0; x < 10; ++x) {}
console.log(typeof x) // undefined, because `x` is block-scoped
运行代码片段Hide results
展开片段
以下代码将抛出 a ReferenceError，因为 的可见性x受到块的限制：
if(false) {
let x = 1
}
console.log(typeof x) // undefined, because `x` is block-scoped
运行代码片段Hide results
展开片段
使用var,let或声明的变量const都限定在模块范围内：
// module1.js
var x = 0
export function f() {}
//module2.js
import f from 'module1.js'
console.log(x) // throws ReferenceError
以下将在全局对象上声明一个属性，因为var在全局上下文中声明的变量将作为属性添加到全局对象中：
var x = 1
console.log(window.hasOwnProperty('x')) // true
运行代码片段Hide results
展开片段
let并且const在全局上下文中不向全局对象添加属性，但仍然具有全局作用域：
let x = 1
console.log(window.hasOwnProperty('x')) // false
运行代码片段Hide results
展开片段
函数参数可以认为是在函数体中声明：
function f(x) {}
console.log(typeof x) // undefined, because `x` is scoped to the function
运行代码片段Hide results
展开片段
Catch 块参数的作用域为 catch 块主体：
try {} catch(e) {}
console.log(typeof e) // undefined, because `e` is scoped to the catch block
运行代码片段Hide results
展开片段
命名函数表达式的作用域仅限于表达式本身：
(function foo() { console.log(foo) })()
console.log(typeof foo) // undefined, because `foo` is scoped to its own expression
运行代码片段Hide results
展开片段
在非严格模式下，全局对象上隐式定义的属性具有全局作用域。在严格模式下，您会收到错误。
x = 1 // implicitly defined property on the global object (no "var"!)
console.log(x) // 1
console.log(window.hasOwnProperty('x')) // true
运行代码片段Hide results
展开片段
在非严格模式下，函数声明具有函数作用域。在严格模式下，它们具有块作用域。
'use strict'
{
function foo() {}
}
console.log(typeof foo) // undefined, because `foo` is block-scoped
运行代码片段Hide results
展开片段
它是如何工作的
范围定义为标识符有效的代码词汇区域。
在 JavaScript 中，每个函数对象都有一个隐藏引用，该引用是对其创建所在的执行上下文（堆栈帧）的词法环境[[Environment]]的引用。
当您调用函数时，[[Call]]会调用隐藏方法。此方法创建一个新的执行上下文，并在新的执行上下文和函数对象的词法环境之间建立链接。它通过将[[Environment]]函数对象上的值复制到新执行上下文的词法环境上的外部引用字段中来实现此目的。
请注意，新的执行上下文和函数对象的词法环境之间的这种链接称为闭包。
因此，在 JavaScript 中，作用域是通过外部引用以“链”形式链接在一起的词法环境来实现的。这个词法环境链称为作用域链，标识符解析是通过在链中搜索匹配的标识符来进行的。
了解更多。
