一、作用域：变量与函数的可见性规则

1.1 作用域的本质

作用域（Scope）是JavaScript引擎对变量和函数可访问范围的静态划分机制，其核心作用是确定变量在代码中的可见性。与动态作用域语言不同，JavaScript采用词法作用域（Lexical Scoping），即作用域在函数定义时确定，而非调用时。

let globalVar = '全局';
function outer() {
  let outerVar = '外部';
  function inner() {
    console.log(outerVar); // 可访问外部变量
    console.log(globalVar); // 可访问全局变量
  }
  inner();
}
outer();

1.2 作用域类型详解

• 全局作用域：脚本顶层定义的变量，可通过window对象（浏览器）或global对象（Node.js）访问
• 函数作用域：每个函数创建时生成独立作用域，包含其参数和局部变量
• 块级作用域（ES6+）：通过let/const在{}内创建，解决变量提升问题

// 块级作用域示例
if (true) {
  let blockVar = '块级';
  console.log(blockVar); // 正常访问
}
console.log(blockVar); // ReferenceError

1.3 变量提升的真相

函数作用域内，var声明的变量会经历提升（Hoisting），即声明被提前到作用域顶部，但赋值保留在原位。

console.log(hoistedVar); // undefined
var hoistedVar = '已提升';
// 等价于：
var hoistedVar;
console.log(hoistedVar);
hoistedVar = '已提升';

二、作用域链：变量查找的层级机制

2.1 作用域链的构成

当访问变量时，引擎会沿作用域链（Scope Chain）逐级向上查找：

1. 当前函数作用域
2. 包含函数作用域（如有）
3. 全局作用域

function level1() {
  let l1Var = 'L1';
  function level2() {
    let l2Var = 'L2';
    function level3() {
      console.log(l1Var); // 跨两级访问
      console.log(l2Var); // 访问同级
    }
    level3();
  }
  level2();
}
level1();

2.2 闭包与作用域链的关系

闭包（Closure）的本质是函数保留对其创建时作用域链的引用，即使外部函数已执行完毕。

function createCounter() {
  let count = 0;
  return function() {
    return ++count; // 闭包保留对count的引用
  };
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

2.3 性能优化建议

• 避免在循环中创建闭包（可能导致意外共享）
• 及时释放不再需要的闭包引用（防止内存泄漏）

// 错误示例：循环中的闭包问题
for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 全部输出3
  }, 100);
}
// 解决方案：使用IIFE或let块级作用域
for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 正确输出0,1,2
  }, 100);
}

三、闭包：超越作用域的编程范式

3.1 闭包的核心特性

闭包是指能够访问自由变量的函数，其中自由变量指不属于该函数作用域的变量。闭包实现了：

• 数据封装（私有变量）
• 状态保持（函数记忆）
• 函数工厂模式

// 私有变量实现
function createPerson(name) {
  let _name = name;
  return {
    getName: function() { return _name; },
    setName: function(newName) { _name = newName; }
  };
}
const person = createPerson('Alice');
console.log(person.getName()); // Alice
person.setName('Bob');
console.log(person.getName()); // Bob

3.2 闭包的常见应用场景

1. 模块模式：封装私有变量和方法
2. 事件处理：保留回调函数所需状态
3. 函数柯里化：参数预加载
4. 防抖节流：控制函数执行频率

// 防抖函数实现
function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

3.3 闭包陷阱与解决方案

• 内存泄漏：闭包保留对大对象的引用

  function heavyClosure() {
    const largeData = new Array(1e6).fill('*');
    return function() {
      console.log(largeData.length); // 长期持有引用
    };
  }
  // 解决方案：手动解除引用
  const closure = heavyClosure();
  closure = null; // 释放引用

• 循环中的闭包问题：使用let或IIFE解决

四、面试题精讲

4.1 基础概念题

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

var scope = 'global';
function checkScope() {
  var scope = 'local';
  function nested() {
    var scope = 'nested';
    console.log(scope);
  }
  nested();
  console.log(scope);
}
checkScope();
console.log(scope);

答案：

1. nested()输出'nested'（访问自身作用域）
2. checkScope()中第二个console.log输出'local'（访问函数作用域）
3. 全局console.log输出'global'（访问全局作用域）

4.2 闭包应用题

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

function createSequence() {
  // 你的实现
}
const seq = createSequence();
console.log(seq()); // 1
console.log(seq()); // 2

答案：

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

4.3 性能优化题

题目：以下代码存在什么问题？如何优化？

function setupButtons() {
  const buttons = document.querySelectorAll('button');
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
      console.log('Button ' + i + ' clicked');
    });
  }
}

答案：

• 问题：所有回调共享同一个i变量，最终都输出'Button ' + buttons.length + ' clicked'

• 优化方案：

  // 方案1：使用let
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
      console.log('Button ' + i + ' clicked');
    });
  }
  // 方案2：使用IIFE
  for (var i = 0; i < buttons.length; i++) {
    (function(index) {
      buttons[i].addEventListener('click', function() {
        console.log('Button ' + index + ' clicked');
      });
    })(i);
  }

五、最佳实践总结

1. 作用域管理：

   • 优先使用const/let避免变量提升问题
   • 最小化全局变量污染

2. 闭包使用原则：

   • 明确闭包需要保留的变量范围
   • 及时释放不再需要的闭包引用

3. 调试技巧：

   • 使用开发者工具的Scope面板查看作用域链
   • 通过console.trace()追踪变量访问路径

4. ES6+增强：

   • 利用块级作用域简化代码结构
   • 使用模块系统（import/export）替代传统闭包封装

理解这些核心机制不仅能通过技术面试，更能在实际开发中编写出高效、可维护的JavaScript代码。建议开发者通过实际项目练习，深化对作用域链动态构建过程的理解。