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

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

假设我们有以下代码。

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

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

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

作用域是可访问变量/绑定的上下文。词法范围是指封闭词法块的局部范围，而不是全局范围。

在简单的语言中，词法作用域是在作用域外部定义的变量，或者更高的作用域在作用域内部自动可用，这意味着您不需要在那里传递它。

例子：

let str="JavaScript";

const myFun = () => {
    console.log(str);
}

myFun();

//输出：JavaScript

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

如果您想了解更多详细信息，请查看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

围绕词汇和动态作用域的对话中有一个重要的部分是缺失的：作用域变量的生存期或何时可以访问变量的简单解释。

动态范围界定与“全局”范围界定在我们传统的思考方式中只是非常松散地对应（我之所以将两者进行比较，是因为已经提到了这一点——我并不特别喜欢链接文章的解释）；我们最好不要在全局变量和动态变量之间进行比较，尽管根据链接文章的说法，“……[它]作为全局范围变量的替代品很有用。”

那么，用简单的英语来说，这两种范围界定机制之间的重要区别是什么？

在上面的答案中，词汇范围定义得很好：词汇范围变量在定义它的函数的本地级别是可用的，或者是可访问的。

然而，由于它不是OP的重点，动态范围界定并没有得到太多的关注，它得到的关注意味着它可能需要更多的关注（这不是对其他答案的批评，而是“哦，那个答案让我们希望有更多的关注”）。所以，这里还有一点：

动态作用域意味着在函数调用的生命周期内，或在函数执行时，较大的程序可以访问变量。实际上，维基百科在解释两者之间的差异方面做得很好。为了避免混淆，下面是描述动态范围的文本：

…[I]n动态作用域（或动态作用域），如果变量名的作用域是则其范围是函数正在执行：当函数运行时，变量name存在，并绑定到其变量，但在函数之后返回，变量名不存在。

本主题与内置绑定函数密切相关，并在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"