解析 JavaScript 中的作用域及作用域链和词法作用域

前端

2023-10-28 11:34:19

作用域

作用域是一个独立的执行环境，它包含了变量、函数和其他资源。JavaScript 中有两种作用域：全局作用域和局部作用域。

全局作用域 是整个 JavaScript 程序都可以访问的作用域。它包含了所有在脚本中定义的全局变量和函数。
局部作用域 是函数或块中定义的变量和函数的作用域。它只在函数或块内部有效。

作用域链

作用域链是一个包含所有当前作用域及其父作用域的列表。当 JavaScript 引擎在执行代码时，它会沿着作用域链向上查找变量和函数。如果在当前作用域中找不到变量或函数，它就会在父作用域中查找，依此类推，直到找到该变量或函数为止。

词法作用域

词法作用域是指函数的作用域是由函数的定义位置决定的。这意味着函数的作用域在函数被定义时就已经确定了，并且不会受到函数被调用的位置的影响。

闭包

闭包是指能够访问其创建函数作用域中变量的函数。闭包非常重要，因为它允许函数在创建它的函数执行完成后仍然能够访问其作用域中的变量。

示例

为了更好地理解作用域、作用域链和词法作用域，我们来看一些示例：

// 全局变量
var globalVariable = "Global Variable";

// 局部变量
function localScope() {
  var localVariable = "Local Variable";
  console.log(globalVariable); // "Global Variable"
  console.log(localVariable); // "Local Variable"
}

localScope();

console.log(globalVariable); // "Global Variable"
console.log(localVariable); // ReferenceError: localVariable is not defined

在这个示例中，globalVariable 是一个全局变量，它可以在任何地方访问。localVariable 是一个局部变量，它只在 localScope() 函数内部有效。当我们调用 localScope() 函数时，localVariable 被创建并初始化为 "Local Variable"。然后，我们在函数中打印 globalVariable 和 localVariable 的值。函数执行完成后，localVariable 被销毁。当我们再次打印 localVariable 的值时，会抛出 ReferenceError 异常。

// 全局变量
var globalVariable = "Global Variable";

// 局部变量
function outerFunction() {
  var outerVariable = "Outer Variable";

  function innerFunction() {
    var innerVariable = "Inner Variable";
    console.log(globalVariable); // "Global Variable"
    console.log(outerVariable); // "Outer Variable"
    console.log(innerVariable); // "Inner Variable"
  }

  innerFunction();
}

outerFunction();

console.log(globalVariable); // "Global Variable"
console.log(outerVariable); // ReferenceError: outerVariable is not defined
console.log(innerVariable); // ReferenceError: innerVariable is not defined

在这个示例中，globalVariable 是一个全局变量，它可以在任何地方访问。outerVariable 是一个局部变量，它只在 outerFunction() 函数内部有效。innerVariable 是一个局部变量，它只在 innerFunction() 函数内部有效。当我们调用 outerFunction() 函数时，outerVariable 被创建并初始化为 "Outer Variable"。然后，我们在函数中调用 innerFunction() 函数，innerVariable 被创建并初始化为 "Inner Variable"。在 innerFunction() 函数中，我们打印 globalVariable、outerVariable 和 innerVariable 的值。函数执行完成后，innerVariable 被销毁。当我们再次打印 outerVariable 和 innerVariable 的值时，会抛出 ReferenceError 异常。