聊一聊JavaScript作用域和作用域链

下面是详细讲解“聊一聊JavaScript作用域和作用域链”的完整攻略。

JavaScript中的作用域

JavaScript中的作用域是指变量的适用范围，也就是变量能够被访问的区域。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

全局作用域

全局作用域是指在所有函数外部定义的变量，它的作用域范围是整个JavaScript程序。在全局作用域中定义的变量可以被任何函数和代码块访问。

下面是一个在全局作用域中定义变量的例子：

var globalVar = "I am a global variable!";

function printGlobalVar() {
  console.log(globalVar);
}

printGlobalVar(); // 输出 "I am a global variable!"

上面的代码中，globalVar是在全局作用域中定义的变量，并且可以被printGlobalVar函数访问和使用。

局部作用域

局部作用域是指在函数内部定义的变量，它的作用域范围只限于该函数内部。在局部作用域中定义的变量不能被函数外部的代码访问。

下面是一个在局部作用域中定义变量的例子：

function printLocalVar() {
  var localVar = "I am a local variable!";
  console.log(localVar);
}

printLocalVar(); // 输出 "I am a local variable!"
console.log(localVar); // 报错，无法访问局部变量 localVar

上面的代码中，localVar是在printLocalVar函数内部定义的局部变量，只能在该函数内部访问和使用，无法在函数外部的代码块中访问。

JavaScript中的作用域链

作用域链是指JavaScript中变量的查找顺序，也就是在访问一个变量时，JavaScript引擎会从当前作用域开始查找，直到找到该变量为止。如果在当前作用域中没有找到该变量，JavaScript引擎会沿着作用域链向上查找，直到找到全局作用域为止。

下面是一个示例，演示了作用域链的查找顺序：

var globalVar = "I am a global variable!";

function foo() {
  var localVar = "I am a local variable!";

  function bar() {
    console.log(localVar); // 输出 "I am a local variable!"
    console.log(globalVar); // 输出 "I am a global variable!"
  }

  bar();
}

foo();

上面的代码中，bar函数被定义在foo函数内部，因此它的作用域链中包含foo函数的作用域和全局作用域。在调用bar函数时，当访问localVar变量时，JavaScript引擎会首先查找当前作用域（也就是bar函数的作用域）是否有该变量，由于该变量是在foo函数内部定义的，所以bar函数的作用域中并没有该变量，因此JavaScript引擎会沿着作用域链向上查找，直到在foo函数的作用域中找到该变量为止。

作用域的注意事项

在实际开发中，应当注意以下几点：

• 变量的作用域范围应当尽量小，以避免变量污染和冲突。
• 如果在函数内部使用var关键字定义变量，该变量会被提升到函数作用域的顶部，因此在函数内部可以在定义变量前使用该变量。
• 如果在函数内部没有使用var关键字定义变量，JavaScript引擎会将该变量视为全局变量，会在全局作用域中定义该变量。
• 在使用闭包时，要注意变量的作用域和生命周期，以避免出现不必要的错误和问题。

示例1

下面是一个使用闭包和作用域链的示例，演示了如何将一个计数器封装到一个函数中：

function createCounter() {
  var count = 0;

  return function() {
    count++;
    console.log(count);
  }
}

var counter = createCounter();
counter(); // 输出1
counter(); // 输出2
counter(); // 输出3

上面的代码中，createCounter函数返回了一个函数，该函数可以用来实现一个计数器。在createCounter函数内部，定义了一个变量count，该变量只能在返回的函数中被访问，因此实现了计数器的封装。

示例2

下面是一个在for循环中使用闭包的示例，演示了如何避免由于变量作用域问题导致的意外结果：

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

上面的代码中，希望通过setTimeout函数来延迟输出变量i的值。然而实际上由于变量作用域的问题，输出的结果是5个5。这是因为setTimeout函数的回调函数是在循环结束后才被调用的，此时变量i已经被累加到了5。

为了避免这种情况，可以在循环中使用一个立即执行函数来创建一个新的作用域，以确保每个回调函数都能够访问到正确的变量值：

for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j);
    }, 1000);
  })(i);
}

上面的代码中，使用一个立即执行函数来创建了一个新的作用域，将变量i的值传递给了这个函数中的参数j，从而确保每个回调函数都能够访问到正确的变量值。