前端大牛深扒JavaScript作用域与闭包，技术小白秒懂！

JavaScript的作用域及其应用之深究

引言

在JavaScript的浩瀚世界中，作用域和闭包的概念是至关重要的基石，掌握它们对于理解和编写复杂的代码至关重要。然而，这些概念往往令新手感到困惑，本文将通过几个直观的示例和面试题，深入剖析JavaScript作用域及其与闭包的微妙关系。

揭开作用域链的面纱

想象一下一个层次分明的大厦，JavaScript中的作用域链与此类似。它是一系列嵌套的作用域，每个作用域都有自己的变量和函数。当执行代码时，JavaScript会逐层向上搜索作用域链，直到找到所引用的变量或函数为止。

function outer() {
  let outerVar = "Outer";
  function inner() {
    let innerVar = "Inner";
    console.log(outerVar); // "Outer"
    console.log(innerVar); // "Inner"
  }
  inner();
}

outer();

在这个示例中，outer()函数创建了其自身的变量outerVar，而嵌套的inner()函数创建了innerVar。当执行inner()时，JavaScript首先在inner()作用域内查找outerVar，但未找到。然后，它沿着作用域链向上搜索，在outer()作用域中找到outerVar，并将其值打印出来。

闭包的奇妙作用

闭包是JavaScript中的一大亮点，它允许函数访问其创建时的作用域，即使函数已超出该作用域。这通过在函数周围创建一个私有作用域来实现，该私有作用域包含该函数创建时可用的所有变量和函数。

function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

在这个示例中，createCounter()函数创建了一个函数，该函数闭包了其创建时的作用域，其中包含变量count。虽然counter()函数已超出createCounter()作用域，但它仍能访问count并递增其值。

理解面试题

为了加深对作用域和闭包的理解，让我们来探讨两个常见的面试题：

1. 变量提升

console.log(foo); // undefined
var foo = 10;

虽然foo变量在声明之前被使用，但JavaScript会自动提升var声明，使其在作用域链顶端可用。因此，console.log(foo)将打印undefined。

2. 闭包与词法作用域

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

因为i是通过var声明的，它具有全局作用域。因此，setTimeout()回调中的i引用的是外部作用域中的变量。由于i在循环中会递增，因此每个回调都会打印3。

总结

JavaScript的作用域和闭包是强大的概念，理解它们对于编写复杂且健壮的代码至关重要。通过探索作用域链、闭包的工作原理和解决面试题，我们可以加强对这些概念的掌握，并为未来的JavaScript之旅奠定坚实的基础。