TLDR

JavaScript具有词法（也称为静态）作用域和闭包。这意味着您可以通过查看源代码来确定标识符的范围。

这四个范围是：

全局-所有内容都可见函数-在函数（及其子函数和块）中可见块-在块（及其子块）中可见模块-在模块内可见

在全局和模块作用域的特殊情况之外，变量使用var（函数作用域）、let（块作用域）和const（块范围）声明。大多数其他形式的标识符声明在严格模式下具有块范围。

概述

作用域是标识符有效的代码库区域。

词汇环境是标识符名称和与其关联的值之间的映射。

作用域由词法环境的链接嵌套构成，嵌套中的每一层都对应于祖先执行上下文的词法环境。

这些关联的词汇环境形成了一个范围“链”。标识符解析是沿着该链搜索匹配标识符的过程。

标识符解析只发生在一个方向：向外。这样，外部词汇环境就不能“看到”内部词汇环境。

决定JavaScript中标识符的范围有三个相关因素：

如何声明标识符声明标识符的位置无论您处于严格模式还是非严格模式

可以声明标识符的一些方式：

var、let和const功能参数Catch块参数函数声明命名函数表达式全局对象上隐式定义的财产（即，在非限定模式中缺少var）导入语句评估

可以声明一些位置标识符：

全球背景功能体普通砌块控制结构的顶部（例如，循环、if、while等）控制结构体模块

声明样式

var

除了直接在全局上下文中声明外，使用var声明的标识符具有函数范围，在这种情况下，它们被添加为全局对象上的财产，并具有全局范围。在eval函数中使用它们有单独的规则。

let和const

使用let和const声明的标识符具有块范围，除了直接在全局上下文中声明的标识符之外，在这种情况下，它们具有全局范围。

注：let、const和var均已吊装。这意味着其定义的逻辑位置是其封闭范围（块或函数）的顶部。然而，在控件通过源代码中的声明点之前，不能读取或分配使用let和const声明的变量。过渡期被称为时间死区。

函数f（）{函数g（）{console.log（x）}设x=1g（）}f（）//1，因为即使用“let”！

函数参数名称

函数参数名称的作用域是函数体。请注意，这有点复杂。声明为默认参数的函数关闭在参数列表上，而不是函数的主体上。

函数声明

函数声明在严格模式下具有块作用域，在非严格模式下有函数作用域。注意：非严格模式是一组复杂的突发规则，基于不同浏览器的古怪历史实现。

命名函数表达式

命名函数表达式的作用域仅限于自身（例如，用于递归）。

全局对象上隐式定义的财产

在非限定模式下，全局对象上隐式定义的财产具有全局范围，因为全局对象位于范围链的顶部。在严格模式下，这些是不允许的。

eval

在eval字符串中，使用var声明的变量将放在当前范围内，如果间接使用eval，则作为全局对象上的财产。

示例

下面将抛出ReferenceError，因为namesx、y和z在函数f之外没有意义。

函数f（）{变量x=1设y=1常量z=1}console.log（typeof x）//未定义（因为var具有函数范围！）console.log（typeof y）//未定义（因为函数的主体是一个块）console.log（typeof z）//未定义（因为函数的主体是一个块）

下面将为y和z抛出ReferenceError，但不会为x抛出，因为x的可见性不受块的约束。定义if、for和while等控制结构体的块的行为类似。

{变量x=1设y=1常量z=1}console.log（x）//1console.log（typeof y）//未定义，因为“y”具有块范围console.log（typeof z）//未定义，因为“z”具有块范围

在下文中，x在循环外可见，因为var具有函数范围：

对于（var x=0；x<5；++x）｛｝console.log（x）//5（注意这是在循环之外！）

…由于这种行为，您需要小心关闭在循环中使用var声明的变量。这里只声明了变量x的一个实例，它在逻辑上位于循环之外。

以下命令为循环外的console.log打印5次，然后第六次打印5次：

对于（var x=0；x<5；++x）{setTimeout（（）=>console.log（x））//在逻辑上位于封闭范围顶部的“x”上关闭，在循环上方}console.log（x）//注意：在循环外可见

以下打印未定义，因为x是块范围的。回调是一个接一个异步运行的。let变量的新行为意味着每个匿名函数都在一个名为x的不同变量上关闭（与var不同），因此会打印整数0到4

for（设x=0；x<5；++x）{setTimeout（（）=>console.log（x））//“let”声明是在每次迭代的基础上重新声明的，因此闭包捕获不同的变量}console.log（typeof x）//未定义

以下内容不会引发ReferenceError，因为x的可见性不受块的约束；但是，它将打印undefined，因为变量尚未初始化（因为if语句）。

if（false）{变量x=1}console.log（x）//此处，“x”已声明，但未初始化

在for循环顶部使用let声明的变量的作用域是循环的主体：

对于（设x=0；x<10；++x）{}console.log（typeof x）//未定义，因为“x”是块范围的

以下内容将引发ReferenceError，因为x的可见性受到块的约束：

if（false）{设x=1}console.log（typeof x）//未定义，因为“x”是块范围的

使用var、let或const声明的变量的作用域都是模块：

// module1.js

var x = 0
export function f() {}

//module2.js

import f from 'module1.js'

console.log(x) // throws ReferenceError

下面将在全局对象上声明一个属性，因为在全局上下文中使用var声明的变量将作为财产添加到全局对象中：

变量x=1console.log（window.hasOwnProperty（'x'））//true

全局上下文中的let和const不向全局对象添加财产，但仍具有全局范围：

设x=1console.log（window.hasOwnProperty（'x'））//false

可以考虑在函数体中声明函数参数：

函数f（x）{}console.log（typeof x）//未定义，因为“x”的作用域是函数

Catch块参数的作用域是Catch块体：

尝试{}捕获（e）{}console.log（typeof e）//未定义，因为“e”的作用域是catch块

命名函数表达式的作用域仅限于表达式本身：

（函数foo（）｛console.log（foo）｝）（）console.log（typeoffoo）//未定义，因为“foo”的作用域是它自己的表达式

在非限定模式下，全局对象上隐式定义的财产是全局范围的。在严格模式下，会出现错误。

x=1//隐式定义全局对象的属性（无“var”！）console.log（x）//1console.log（window.hasOwnProperty（'x'））//true

在非严格模式下，函数声明具有函数范围。在严格模式下，它们具有块范围。

'使用严格'{函数foo（）｛｝}console.log（foo类型）//未定义，因为“foo”是块范围的

发动机罩下的工作原理

作用域定义为标识符有效的代码词汇区域。

在JavaScript中，每个函数对象都有一个隐藏的[[Environment]]引用，该引用是对创建它的执行上下文（堆栈框架）的词法环境的引用。

调用函数时，将调用隐藏的[[Call]]方法。该方法创建新的执行上下文，并在新的执行环境和函数对象的词法环境之间建立链接。它通过将函数对象上的[[Environment]]值复制到新执行上下文的词法环境上的外部引用字段中来实现这一点。

注意，新的执行上下文和函数对象的词法环境之间的这种链接称为闭包。

因此，在JavaScript中，作用域是通过外部引用链接在一起的词汇环境实现的。这个词汇环境链称为作用域链，标识符解析是通过在链上搜索匹配的标识符来实现的。

了解更多信息。

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

下面是一个示例：

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

运行代码。希望这能提供一个关于范围界定的想法

Name = 'global data';
document.Name = 'current document data';
(function(window,document){
var Name = 'local data';
var myObj = {
    Name: 'object data',
    f: function(){
        alert(this.Name);
    }
};

myObj.newFun = function(){
    alert(this.Name);
}

function testFun(){
    alert("Window Scope : " + window.Name + 
          "\nLocal Scope : " + Name + 
          "\nObject Scope : " + this.Name + 
          "\nCurrent document Scope : " + document.Name
         );
}


testFun.call(myObj);
})(window,document);

Javascript使用作用域链为给定函数建立作用域。通常有一个全局范围，每个定义的函数都有自己的嵌套范围。在另一个函数中定义的任何函数都具有与外部函数链接的局部作用域。定义范围的始终是源代码中的位置。

作用域链中的元素基本上是一个带有指向其父作用域指针的Map。

解析变量时，javascript从最内部的范围开始并向外搜索。