词法作用域意味着函数从定义它们的作用域解析自由变量，而不是从它们被调用的作用域。

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

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

我喜欢@Arak这样的人提供的功能齐全、语言不可知的答案。由于这个问题被标记为JavaScript，所以我想插入一些与该语言非常相关的注释。

在JavaScript中，我们的作用域选择如下：

按原样（无范围调整）词法var_this=this；函数callback（）｛console.log（_this）；｝绑定回调.bind（this）

我认为值得注意的是，JavaScript并没有真正的动态范围。bind调整this关键字，这很接近，但在技术上并不相同。

下面是一个示例，演示了这两种方法。每次决定如何确定回调的范围时，都要这样做，因此这适用于承诺、事件处理程序等。

词汇

以下是JavaScript中回调的词法范围：

var downloadManager = {
  initialize: function() {
    var _this = this; // Set up `_this` for lexical access
    $('.downloadLink').on('click', function () {
      _this.startDownload();
    });
  },
  startDownload: function(){
    this.thinking = true;
    // Request the file from the server and bind more callbacks for when it returns success or failure
  }
  //...
};

跳跃

作用域的另一种方法是使用Function.prototype.bind：

var downloadManager = {
  initialize: function() {
    $('.downloadLink').on('click', function () {
      this.startDownload();
    }.bind(this)); // Create a function object bound to `this`
  }
//...

据我所知，这些方法在行为上是等效的。

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

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

这是一个古老的问题，但这是我对它的看法。

词法（静态）范围是指源代码中变量的范围。

在JavaScript这样的语言中，函数可以被传递、附加和重新附加到其他对象，您可能会想到，这个范围将取决于当时调用该函数的人，但事实并非如此。以这种方式更改作用域将是动态作用域，而JavaScript不会这样做，除非可能使用此对象引用。

要说明这一点：

var a=“苹果”；函数doit（）{var a=“ardvark”；返回函数（）{警报（a）；}}var test=doit（）；测试（）；

在示例中，变量a是全局定义的，但在doit（）函数中隐藏。此函数返回另一个函数，如您所见，该函数依赖于自身范围之外的变量。

如果您运行这个，您会发现使用的值是aardwark，而不是apple，虽然它在test（）函数的范围内，但不在原始函数的词法范围内。也就是说，使用的范围是源代码中显示的范围，而不是实际使用函数的范围。

这一事实可能会产生令人讨厌的后果。例如，您可能会决定更容易单独组织函数，然后在时间到来时使用它们，例如在事件处理程序中：

var a=“苹果”，b=“香蕉”；函数init（）{var a=“ardvark”，b=“andicoot”；document.querySelector（'button#a'）.onclick=函数（事件）{警报（a）；}document.querySelector（'button#b'）.onclick=doB；}函数doB（事件）{警报（b）；}init（）；<button id=“a”>a</button><button id=“b”>b</button>

此代码示例分别执行其中一项。您可以看到，由于词法作用域，按钮A使用内部变量，而按钮B不使用。您可能最终嵌套的函数比您想要的更多。

顺便说一句，在这两个示例中，您还将注意到，即使包含函数函数已经运行，内部词汇范围内的变量仍然存在。这称为闭包，指的是嵌套函数对外部变量的访问，即使外部函数已经完成。JavaScript需要足够聪明，以确定这些变量是否不再需要，如果不需要，可以垃圾收集它们。