一、作用域：变量访问的规则边界

1.1 作用域的本质与分类

作用域（Scope）是JavaScript中定义变量可访问范围的规则系统，它决定了代码中标识符（变量、函数名）的可见性和生命周期。JavaScript采用词法作用域（Lexical Scoping），即作用域在函数定义时确定，而非执行时。

全局作用域：在代码最外层定义的变量，任何位置均可访问。
函数作用域：通过function声明的变量，仅在函数内部有效。
块级作用域（ES6+）：由let/const声明的变量，仅在代码块（如if、for）内有效。

示例：

let globalVar = "I'm global"; // 全局作用域
function demo() {
  var functionVar = "I'm in function"; // 函数作用域
  if (true) {
    let blockVar = "I'm in block"; // 块级作用域
    console.log(blockVar); // 正常输出
  }
  console.log(functionVar); // 正常输出
  // console.log(blockVar); // 报错：blockVar未定义
}
demo();
console.log(globalVar); // 正常输出
// console.log(functionVar); // 报错：functionVar未定义

1.2 变量提升与暂时性死区

变量提升：var声明的变量会提升到作用域顶部（初始值为undefined），而let/const不会提升，但会在编译阶段注册。
暂时性死区（TDZ）：在块级作用域中，let/const变量从代码块开头到声明处之间的区域不可访问。

面试题：

console.log(a); // undefined
var a = 1;
console.log(b); // 报错：Cannot access 'b' before initialization
let b = 2;

二、作用域链：变量查找的路径

2.1 作用域链的构成

当访问一个变量时，JavaScript引擎会沿着作用域链（Scope Chain）逐级向上查找，从当前作用域开始，到外层作用域，直至全局作用域。若未找到，则报错ReferenceError。

示例：

let outerVar = "Outer";
function outer() {
  let middleVar = "Middle";
  function inner() {
    let innerVar = "Inner";
    console.log(outerVar); // 查找路径：inner → outer → 全局
    console.log(middleVar); // 查找路径：inner → outer
    console.log(innerVar); // 直接访问
  }
  inner();
}
outer();

2.2 闭包与作用域链的延伸

闭包（Closure）是指函数能够访问并记住其定义时的作用域，即使该函数在其定义的作用域之外执行。闭包通过延长作用域链的生命周期，实现了数据的私有化。

示例：

function createCounter() {
  let count = 0; // 私有变量
  return function() {
    count++; // 通过闭包访问外部变量
    return count;
  };
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

三、闭包：从原理到实战

3.1 闭包的核心特性

记忆性：闭包会保留对外部变量的引用，即使外部函数已执行完毕。
私有化：通过闭包可以实现模块模式，封装私有变量。
潜在问题：不当使用闭包可能导致内存泄漏（如循环中创建闭包）。

3.2 闭包的常见应用场景

场景1：模块化开发

const module = (function() {
  let privateVar = "Secret";
  function privateMethod() {
    console.log(privateVar);
  }
  return {
    publicMethod: function() {
      privateMethod();
    }
  };
})();
module.publicMethod(); // 输出 "Secret"
// module.privateMethod(); // 报错：未暴露

场景2：事件回调与异步操作

function setupClickHandlers() {
  for (var i = 0; i < 3; i++) {
    (function(index) {
      document.getElementById(`btn-${index}`).onclick = function() {
        console.log(index); // 正确输出0,1,2
      };
    })(i);
  }
}
// 或使用let简化：
for (let i = 0; i < 3; i++) {
  document.getElementById(`btn-${i}`).onclick = function() {
    console.log(i); // 直接使用块级作用域
  };
}

3.3 闭包的优化与陷阱

内存管理：及时释放不再需要的闭包引用，避免内存泄漏。
循环中的闭包：优先使用let或IIFE（立即执行函数）解决循环变量问题。

面试题：

// 问题代码：输出3个3
for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 3,3,3
  }, 100);
}
// 解决方案1：使用IIFE
for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j); // 0,1,2
    }, 100);
  })(i);
}
// 解决方案2：使用let
for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 0,1,2
  }, 100);
}

四、面试高频题解析

4.1 基础概念题

题目：解释var、let、const的区别。
答案要点：

var：函数作用域，变量提升，可重复声明。
let：块级作用域，暂时性死区，不可重复声明。
const：块级作用域，必须初始化，不可重新赋值（对象属性可修改）。

4.2 作用域链题

题目：以下代码输出什么？

let a = 1;
function foo() {
  console.log(a); // ?
  let a = 2;
}
foo();

答案：报错ReferenceError（TDZ导致访问未初始化的a）。

4.3 闭包应用题

题目：实现一个函数，每次调用返回递增的数字。
答案：

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

五、总结与建议

理解词法作用域：明确变量查找的静态规则。
合理使用闭包：优先用于模块化、私有化等场景，避免滥用。
注意内存管理：及时释放无用闭包，防止内存泄漏。
掌握ES6特性：优先使用let/const和块级作用域简化代码。

通过深入理解作用域、作用域链和闭包，开发者能够编写出更高效、可维护的代码，并在面试中脱颖而出。

深入解析作用域、链与闭包：面试核心与实战指南