词汇作用域意味着在嵌套的函数组中，内部函数可以访问其父作用域的变量和其他资源。

这意味着孩子的函数在词汇上与父母的执行上下文绑定。

词汇范围有时也称为静态范围。

function grandfather() {
    var name = 'Hammad';
    // 'likes' is not accessible here
    function parent() {
        // 'name' is accessible here
        // 'likes' is not accessible here
        function child() {
            // Innermost level of the scope chain
            // 'name' is also accessible here
            var likes = 'Coding';
        }
    }
}

关于词法作用域，你会注意到它是向前的，这意味着可以通过其子级的执行上下文访问该名称。

但它不能向其父代反向工作，这意味着变量likes不能被其父代访问。

这还告诉我们，在不同的执行上下文中具有相同名称的变量从执行堆栈的顶部到底部获得优先级。

在最里面的函数（执行堆栈的最顶层上下文）中，名称与另一个变量类似的变量将具有更高的优先级。

来源

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

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

词汇（AKA静态）作用域是指仅基于变量在代码文本语料库中的位置来确定变量的作用域。变量始终引用其顶级环境。了解它与动态范围的关系是很好的。

词汇作用域意味着在嵌套的函数组中，内部函数可以访问其父作用域的变量和其他资源。

这意味着孩子的函数在词汇上与父母的执行上下文绑定。

词汇范围有时也称为静态范围。

function grandfather() {
    var name = 'Hammad';
    // 'likes' is not accessible here
    function parent() {
        // 'name' is accessible here
        // 'likes' is not accessible here
        function child() {
            // Innermost level of the scope chain
            // 'name' is also accessible here
            var likes = 'Coding';
        }
    }
}

关于词法作用域，你会注意到它是向前的，这意味着可以通过其子级的执行上下文访问该名称。

但它不能向其父代反向工作，这意味着变量likes不能被其父代访问。

这还告诉我们，在不同的执行上下文中具有相同名称的变量从执行堆栈的顶部到底部获得优先级。

在最里面的函数（执行堆栈的最顶层上下文）中，名称与另一个变量类似的变量将具有更高的优先级。

来源

我喜欢@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`
  }
//...

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