《前端面试题：JavaScript 闭包深度解析》

JavaScript 闭包深度解析：从原理到高级应用

一、闭包的本质与核心概念

闭包（Closure）是 JavaScript 中最强大且最常被误解的概念之一。理解闭包不仅是掌握 JavaScript 的关键，也是区分初级和高级开发者的重要标志。

1. 什么是闭包？

闭包是指那些能够访问自由变量的函数。自由变量是指在函数中使用的，但既不是函数参数也不是函数局部变量的变量。

简单来说：闭包 = 函数 + 函数能够访问的自由变量

function outer() {
  const outerVar = 'I am outside!';
  
  function inner() {
    console.log(outerVar); // 访问外部函数作用域中的变量
  }
  
  return inner;
}

const myInner = outer();
myInner(); // 输出: "I am outside!"

在这个例子中：

1. inner 函数可以访问 outerVar（自由变量）
2. 即使 outer 函数已经执行完毕，inner 函数仍然可以访问 outerVar

2. 闭包的形成条件

1. 嵌套函数：一个函数（outer）内部定义了另一个函数（inner）
2. 内部函数引用外部变量：inner 函数引用了 outer 函数作用域中的变量
3. 内部函数被导出：inner 函数被返回或在外部被使用

二、闭包的核心原理：词法作用域

要理解闭包，必须掌握 JavaScript 的作用域机制：

1. 词法作用域（Lexical Scoping）

JavaScript 采用词法作用域，函数的作用域在函数定义时就已确定，而不是在函数调用时确定。

let globalVar = 'global';

function outer() {
  let outerVar = 'outer';
  
  function inner() {
    let innerVar = 'inner';
    console.log(globalVar, outerVar, innerVar);
  }
  
  return inner;
}

const innerFunc = outer();
innerFunc(); // 输出: "global outer inner"

2. 作用域链（Scope Chain）

当函数被创建时，它会保存一个对其外部作用域的引用链。当访问变量时，JavaScript 引擎会沿着这条链查找：

1. 当前函数作用域
2. 外部函数作用域
3. 全局作用域

function createCounter() {
  let count = 0; // 被闭包"捕获"的变量
  
  return function() {
    count++; // 访问外部作用域的变量
    return count;
  };
}

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

三、闭包的实际应用场景

1. 数据封装（私有变量）

function createBankAccount(initialBalance) {
  let balance = initialBalance; // 私有变量
  
  return {
    deposit: function(amount) {
      balance += amount;
      return balance;
    },
    withdraw: function(amount) {
      if (amount > balance) {
        throw new Error('Insufficient funds');
      }
      balance -= amount;
      return balance;
    },
    getBalance: function() {
      return balance;
    }
  };
}

const account = createBankAccount(1000);
console.log(account.getBalance()); // 1000
account.deposit(500);
console.log(account.getBalance()); // 1500
account.withdraw(200);
console.log(account.getBalance()); // 1300

2. 函数工厂

function createMultiplier(multiplier) {
  return function(x) {
    return x * multiplier;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

3. 模块模式

const calculator = (function() {
  let memory = 0;
  
  return {
    add: function(a, b) {
      const result = a + b;
      memory = result;
      return result;
    },
    subtract: function(a, b) {
      const result = a - b;
      memory = result;
      return result;
    },
    getMemory: function() {
      return memory;
    }
  };
})();

console.log(calculator.add(5, 3)); // 8
console.log(calculator.getMemory()); // 8
console.log(calculator.subtract(10, 4)); // 6
console.log(calculator.getMemory()); // 6

4. 回调函数和事件处理

function setupButton(buttonId) {
  const button = document.getElementById(buttonId);
  let clickCount = 0;
  
  button.addEventListener('click', function() {
    clickCount++;
    console.log(`Button ${buttonId} clicked ${clickCount} times`);
  });
}

setupButton('btn1');
setupButton('btn2');

四、闭包与内存管理

1. 内存泄漏风险

// 问题示例
function createHeavyObject() {
  const heavyArray = new Array(1000000).fill('*');
  
  return function() {
    console.log('Heavy object is kept in memory!');
  };
}

const heavyFunc = createHeavyObject();
// heavyArray 会一直存在内存中，直到 heavyFunc 被释放

2. 如何避免内存泄漏

// 解决方案：不再需要时解除引用
let heavyFunc = createHeavyObject();

// 使用完毕后
heavyFunc = null; // 释放闭包占用的内存

3. 现代 JavaScript 引擎优化

现代 JavaScript 引擎（V8 等）会进行智能优化：

• 只保留闭包中实际使用的变量
• 未被引用的闭包会被垃圾回收
• 使用开发者工具检测内存泄漏

五、闭包常见面试题解析

1. 经典循环问题

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}
// 输出: 5, 5, 5, 5, 5

解决方案：

// 方案1: 使用IIFE创建闭包
for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j);
    }, 100);
  })(i);
}

// 方案2: 使用let块级作用域
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}

2. 实现私有方法

function Person(name) {
  let _name = name; // 私有变量
  
  this.getName = function() {
    return _name;
  };
  
  this.setName = function(newName) {
    _name = newName;
  };
}

const person = new Person('Alice');
console.log(person.getName()); // "Alice"
person.setName('Bob');
console.log(person.getName()); // "Bob"

3. 闭包与事件处理

// 问题：所有按钮都显示5
const buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    console.log('Button ' + i + ' clicked');
  });
}

// 解决方案：闭包保存索引
for (var i = 0; i < buttons.length; i++) {
  (function(index) {
    buttons[index].addEventListener('click', function() {
      console.log('Button ' + index + ' clicked');
    });
  })(i);
}

六、高级闭包技巧

1. 函数柯里化（Currying）

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...args2) {
        return curried.apply(this, args.concat(args2));
      };
    }
  };
}

const sum = (a, b, c) => a + b + c;
const curriedSum = curry(sum);

console.log(curriedSum(1)(2)(3)); // 6
console.log(curriedSum(1, 2)(3)); // 6
console.log(curriedSum(1)(2, 3)); // 6

2. 惰性函数（Lazy Function）

function getElementPosition() {
  let offset = null;
  
  return function() {
    if (offset === null) {
      const element = document.getElementById('target');
      offset = {
        x: element.offsetLeft,
        y: element.offsetTop
      };
    }
    return offset;
  };
}

const getPosition = getElementPosition();
console.log(getPosition()); // 首次计算
console.log(getPosition()); // 直接返回缓存值

3. 部分应用函数（Partial Application）

function partial(fn, ...presetArgs) {
  return function(...laterArgs) {
    return fn.apply(this, presetArgs.concat(laterArgs));
  };
}

function log(level, message, timestamp) {
  console.log(`[${level}] ${timestamp}: ${message}`);
}

const logError = partial(log, 'ERROR');
const logDebug = partial(log, 'DEBUG');

logError('Connection failed', new Date().toISOString());
// [ERROR] 2023-08-05T10:30:00.000Z: Connection failed

logDebug('Processing data', new Date().toISOString());
// [DEBUG] 2023-08-05T10:30:05.000Z: Processing data

七、闭包的最佳实践

1. 最小化闭包范围：只保留必要的变量
2. 避免循环引用：防止内存泄漏
3. 及时解除引用：不再使用的闭包设为 null
4. 合理使用模块模式：组织代码结构
5. 优先使用块级作用域：用 let/const 替代 var

八、闭包与性能

闭包确实有性能开销，因为：

1. 创建作用域链需要额外内存
2. 变量查找需要遍历作用域链

但现代 JavaScript 引擎已高度优化闭包性能：

• V8 的 “闭包分析” 只保留必要变量
• 未被引用的闭包会被及时回收
• 性能影响在大多数场景下可忽略

九、闭包在现代 JavaScript 中的应用

1. React Hooks 中的闭包

function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const timer = setInterval(() => {
      console.log(`Current count: ${count}`);
      // 闭包捕获了count创建时的值
    }, 1000);
    
    return () => clearInterval(timer);
  }, []);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

2. 函数式编程

// 使用闭包实现函数组合
const compose = (...fns) => x => 
  fns.reduceRight((acc, fn) => fn(acc), x);

const add5 = x => x + 5;
const multiplyBy2 = x => x * 2;
const square = x => x * x;

const transform = compose(square, multiplyBy2, add5);
console.log(transform(5)); // ((5 + 5) * 2) ^ 2 = 400

十、总结：闭包的核心要点

1. 本质：函数 + 自由变量
2. 原理：词法作用域
3. 优点：
   • 创建私有变量
   • 实现函数工厂
   • 模块化开发
   • 保存状态
4. 缺点：
   • 内存占用
   • 内存泄漏风险
5. 最佳实践：
   • 避免不必要的闭包
   • 及时释放资源
   • 合理使用模块

掌握闭包的重要性：
闭包是 JavaScript 中功能最强大的特性之一，它使得函数可以"记住"并访问其词法作用域，即使函数是在其词法作用域之外执行。理解闭包的工作原理，能够帮助你写出更灵活、更强大的代码，同时避免常见的内存泄漏问题。

最后建议：通过实际项目练习闭包的各种应用场景，深入理解闭包在不同上下文中的行为，这将帮助你真正掌握这一重要概念。