全球范围：

全球变量就像全球明星（成龙、纳尔逊·曼德拉）。您可以从应用程序的任何部分访问它们（获取或设置值）。全球功能就像全球活动（新年、圣诞节）。您可以从应用程序的任何部分执行（调用）它们。

//global variable
var a = 2;

//global function
function b(){
   console.log(a);  //access global variable
}

本地范围：

如果你在美国，你可能会认识金·卡戴珊（Kim Kardashian），她是臭名昭著的名人（她以某种方式制作了小报）。但美国以外的人不会认出她。她是当地的明星，与她的领地息息相关。

局部变量就像局部恒星。您只能在范围内访问它们（获取或设置值）。本地函数就像本地事件一样，只能在该范围内执行（庆祝）。如果您想从作用域之外访问它们，将出现引用错误

function b(){
   var d = 21; //local variable
   console.log(d);

   function dog(){  console.log(a); }
     dog(); //execute local function
}

 console.log(d); //ReferenceError: dddddd is not defined    

---

查看本文以深入了解范围

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

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);

在EcmaScript5中，主要有两个作用域，局部作用域和全局作用域，但在EcmaScript6中，我们主要有三个作用域：局部作用域、全局作用域和一个称为块作用域的新作用域。

块范围示例如下：-

for ( let i = 0; i < 10; i++)
{
 statement1...
statement2...// inside this scope we can access the value of i, if we want to access the value of i outside for loop it will give undefined.
}

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中，作用域是通过外部引用链接在一起的词汇环境实现的。这个词汇环境链称为作用域链，标识符解析是通过在链上搜索匹配的标识符来实现的。

了解更多信息。

ECMAScript 6引入了let和const关键字。这些关键字可以用来代替var关键字。与var关键字相反，let和const关键字支持在块语句中声明局部范围。

var x = 10
let y = 10
const z = 10
{
  x = 20
  let y = 20
  const z = 20
  {
    x = 30
    // x is in the global scope because of the 'var' keyword
    let y = 30
    // y is in the local scope because of the 'let' keyword
    const z = 30
    // z is in the local scope because of the 'const' keyword
    console.log(x) // 30
    console.log(y) // 30
    console.log(z) // 30
  }
  console.log(x) // 30
  console.log(y) // 20
  console.log(z) // 20
}

console.log(x) // 30
console.log(y) // 10
console.log(z) // 10