前端开发技能进阶：JS之作用域和闭包1-3

前言

在JavaScript中，作用域是一个非常重要的概念，它决定了变量和函数的可访问范围。在本文中，我们将详细介绍JS中的作用域，包括词法作用域和动态作用域，作用域链，以及执行上下文。同时还会介绍闭包的概念及用法。

词法作用域和动态作用域

在JavaScript中，有两种主要的作用域：词法作用域和动态作用域。

词法作用域

词法作用域是指变量在函数定义时就已经确定了它的作用域。也就是说，变量的作用域是由函数的代码结构决定的，与函数的调用方式无关。

例如，以下代码中，变量x的作用域是函数foo()的内部：

function foo() {
  var x = 10;
}

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

动态作用域

动态作用域是指变量的作用域是由函数的调用方式决定的。也就是说，变量的作用域取决于函数被调用的地方。

在JavaScript中，没有动态作用域。

作用域链

作用域链是指从当前执行环境一直向上到全局环境的变量作用域链。当一个变量在当前作用域中找不到时，就会沿着作用域链向上查找，直到找到该变量为止。

例如，以下代码中，变量x的作用域是函数foo()的内部，但由于foo()函数是在全局环境中调用的，因此变量x可以在全局环境中找到：

var x = 10;

function foo() {
  console.log(x); // 10
}

foo();

执行上下文

执行上下文是指一个代码执行的环境。它包括了当前执行的代码、作用域链、变量对象和this对象。

当一个函数被调用时，就会创建一个新的执行上下文。这个执行上下文的作用域链是基于函数的定义位置决定的。

例如，以下代码中，函数foo()的执行上下文的作用域链是[foo(), global]：

function foo() {
  var x = 10;

  function bar() {
    console.log(x); // 10
  }

  bar();
}

foo();

闭包

闭包是指能够访问其他函数作用域中变量的函数。

闭包在JavaScript中非常常见，因为它允许函数访问其定义范围之外的变量。

例如，以下代码中，函数foo()返回了一个闭包函数：

function foo() {
  var x = 10;

  return function() {
    console.log(x); // 10
  };
}

var bar = foo();

bar();

闭包可以用来实现许多高级的编程技术，例如模块化、延迟执行和事件处理。

总结

在本文中，我们详细介绍了JS中的作用域，包括词法作用域和动态作用域，作用域链，以及执行上下文。同时还介绍了闭包的概念及用法。希望本文能帮助读者更好地理解JS中的作用域。