词汇范围是指从执行堆栈中的当前位置可见的标识符（例如，变量、函数等）的词汇。

- global execution context
    - foo
    - bar
    - function1 execution context
        - foo2
        - bar2
        - function2 execution context
            - foo3
            - bar3

foo和bar总是在可用标识符的词典中，因为它们是全局的。

当执行function1时，它可以访问foo2、bar2、foo和bar的词典。

当执行function2时，它可以访问foo3、bar3、foo2、bar2、foo和bar的词典。

全局和/或外部函数无法访问内部函数标识符的原因是，该函数的执行尚未发生，因此，其标识符均未分配给内存。此外，一旦内部上下文执行，它就会从执行堆栈中删除，这意味着它的所有标识符都已被垃圾收集，不再可用。

最后，这就是为什么嵌套的执行上下文总是可以访问它的祖先执行上下文，因此它可以访问更大的标识符词典。

See:

https://tylermcginnis.com/ultimate-guide-to-execution-contexts-hoisting-scopes-and-closures-in-javascript/https://developer.mozilla.org/en-US/docs/Glossary/Identifier

特别感谢@robr3rd帮助简化上述定义。

词汇范围意味着函数在其定义的上下文中查找变量，而不是在其周围的范围中查找变量。

如果您想了解更多详细信息，请查看Lisp中词法作用域的工作原理。Kyle Cronin在Common Lisp的动态和词汇变量中选择的答案比这里的答案更清楚。

巧合的是，我只是在Lisp类中了解到这一点，而且它恰好也适用于JavaScript。

我在Chrome控制台中运行了这段代码。

// JavaScript               Equivalent Lisp
var x = 5;                //(setf x 5)
console.debug(x);         //(print x)
function print_x(){       //(defun print-x ()
    console.debug(x);     //    (print x)
}                         //)
(function(){              //(let
    var x = 10;           //    ((x 10))
    console.debug(x);     //    (print x)
    print_x();            //    (print-x)
})();                     //)

输出：

5
10
5

在这个问题上，我们可以从另一个角度出发，后退一步，看看范围界定在更大的解释框架（运行程序）中的作用。换句话说，假设您正在为一种语言构建一个解释器（或编译器），并负责计算输出，给定一个程序和一些输入。

解释包括跟踪三件事：

状态-即堆和堆栈上的变量和引用内存位置。对该状态的操作，即程序中的每一行代码给定操作运行的环境，即状态在操作上的投影。

解释器从程序中的第一行代码开始，计算其环境，在该环境中运行该行，并捕获其对程序状态的影响。然后，它遵循程序的控制流执行下一行代码，并重复该过程直到程序结束。

为任何操作计算环境的方式都是通过编程语言定义的一组正式规则。术语“绑定”经常用于描述程序的整体状态到环境中的值的映射。注意，我们所说的“总体状态”不是指全局状态，而是指在执行过程中的任何一点上每个可到达定义的总和）。

这是定义范围问题的框架。现在进入下一部分我们的选择。

作为解释器的实现者，您可以通过使环境尽可能接近程序的状态来简化任务。因此，无论前一行是赋值、函数调用、从函数返回还是控制结构（如while循环），一行代码的环境都将简单地由前一行代码环境定义，并将该操作的效果应用于该行代码。

这就是动态作用域的要点，其中任何代码运行的环境都绑定到由其执行上下文定义的程序状态。

或者，你可以想象一个程序员使用你的语言，简化他或她的跟踪变量取值的任务。关于过去执行的全部结果的推理涉及太多的路径和太多的复杂性。词法作用域通过将当前环境限制在当前块、函数或其他作用域单元及其父级（即包围当前时钟的块或调用当前函数的函数）中定义的状态部分来帮助实现这一点。

换句话说，使用词法作用域，任何代码所看到的环境都绑定到与语言中明确定义的作用域（如块或函数）相关联的状态。

JavaScript中的词法作用域意味着在函数外部定义的变量可以在变量声明之后定义的另一个函数内部访问。但事实并非相反；在函数内部定义的变量在该函数外部无法访问。

这个概念在JavaScript中的闭包中大量使用。

假设我们有以下代码。

var x = 2;
var add = function() {
    var y = 1;
    return x + y;
};

现在，当您调用add（）-->时，这将打印3。

因此，add（）函数正在访问在方法函数add之前定义的全局变量x。这是由于JavaScript中的词法作用域而调用的。

本主题与内置绑定函数密切相关，并在ECMAScript 6 Arrow函数中介绍。这真的很烦人，因为对于我们想要使用的每一个新的“类”（实际上是函数）方法，我们都必须绑定它才能访问作用域。

默认情况下，JavaScript不会在函数上设置this的范围（它不会设置this的上下文）。默认情况下，您必须明确说出您想要的上下文。

箭头函数自动获得所谓的词法范围（可以访问包含块中变量的定义）。当使用箭头函数时，它会自动将其绑定到最初定义箭头函数的位置，并且该箭头函数的上下文是其包含块。

通过以下最简单的示例，了解它在实践中的工作原理。

在箭头函数之前（默认情况下没有词法范围）：

const programming = {
  language: "JavaScript",
  getLanguage: function() {
    return this.language;
  }
}

const globalScope = programming.getLanguage;
console.log(globalScope()); // Output: undefined

const localScope = programming.getLanguage.bind(programming);
console.log(localScope()); // Output: "JavaScript"

使用箭头函数（默认为词法范围）：

const programming = {
  language: "JavaScript",
  getLanguage: function() {
    return this.language;
  }
}

const arrowFunction = () => {
    console.log(programming.getLanguage());
}

arrowFunction(); // Output: "JavaScript"

我通常通过举例学习，这里有一点小意思：

const lives = 0;

function catCircus () {
    this.lives = 1;
    const lives = 2;

    const cat1 = {
        lives: 5,
        jumps: () => {
            console.log(this.lives);
        }
    };
    cat1.jumps(); // 1
    console.log(cat1); // { lives: 5, jumps: [Function: jumps] }

    const cat2 = {
        lives: 5,
        jumps: () => {
            console.log(lives);
        }
    };
    cat2.jumps(); // 2
    console.log(cat2); // { lives: 5, jumps: [Function: jumps] }

    const cat3 = {
        lives: 5,
        jumps: () => {
            const lives = 3;
            console.log(lives);
        }
    };
    cat3.jumps(); // 3
    console.log(cat3); // { lives: 5, jumps: [Function: jumps] }

    const cat4 = {
        lives: 5,
        jumps: function () {
            console.log(lives);
        }
    };
    cat4.jumps(); // 2
    console.log(cat4); // { lives: 5, jumps: [Function: jumps] }

    const cat5 = {
        lives: 5,
        jumps: function () {
            var lives = 4;
            console.log(lives);
        }
    };
    cat5.jumps(); // 4
    console.log(cat5); // { lives: 5, jumps: [Function: jumps] }

    const cat6 = {
        lives: 5,
        jumps: function () {
            console.log(this.lives);
        }
    };
    cat6.jumps(); // 5
    console.log(cat6); // { lives: 5, jumps: [Function: jumps] }

    const cat7 = {
        lives: 5,
        jumps: function thrownOutOfWindow () {
            console.log(this.lives);
        }
    };
    cat7.jumps(); // 5
    console.log(cat7); // { lives: 5, jumps: [Function: thrownOutOfWindow] }
}

catCircus();