闭包的优缺点面试题全解析

在回答任何关于闭包的优缺点面试题之前，必须准确理解闭包的定义。MDN（Mozilla Developer Network）定义闭包为：“函数和其词法环境的组合”。简单来说，当一个内部函数引用了其外部函数的变量，即使外部函数已经执行完毕，这些变量也不会被垃圾回收机制回收，这种机制就是闭包。

示例代码：

function outer() {
  let count = 0;
  // 内部函数引用了外部变量 count
  return function inner() {
    count++;
    return count;
  };
}
// 将内部函数赋值给全局变量，形成闭包
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2
// 此时 outer 已经执行完毕，但 count 依然被保留

在探讨闭包的优缺点面试题时，优势部分通常占据主要篇幅。闭包不仅仅是语法特性，更是解决特定编程问题的利器。

// 模块模式示例
const BankAccount = (function() {
  let balance = 0; // 私有变量
  return {
    deposit: function(amount) {
      balance += amount;
      return balance;
    },
    getBalance: function() {
      return balance;
    }
  };
})();
// 外部无法直接访问 balance
console.log(BankAccount.getBalance()); // 0
BankAccount.deposit(100);
console.log(BankAccount.getBalance()); // 100
// console.log(BankAccount.balance); // undefined

// 防抖函数示例
function debounce(func, delay) {
  let timer = null; // 闭包变量，保持timer状态
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 事件监听中的闭包
function setupButton(id, message) {
  const button = document.getElementById(id);
  button.addEventListener('click', function() {
    // 这个匿名函数形成了闭包，记住了 message
    alert(message);
  });
}

回答闭包的优缺点面试题时，不能只谈好处。闭包如果使用不当，会带来严重的性能问题和内存隐患。以下是闭包的主要缺点：

💡 内存泄漏典型案例：

当闭包引用了未使用的DOM节点时，即使该DOM节点从页面中移除，由于闭包的存在，DOM节点也不会被回收。

function leakMemory() {
  const domElement = document.getElementById('myDiv');
  // 创建了闭包，引用了 domElement
  setInterval(function() {
    console.log(domElement.innerHTML);
  }, 1000);
  // 即使 domElement 不再需要，它也被保留在内存中
}

以下是近年来前端面试中关于闭包的优缺点面试题的高频真题，包含深度解析。

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

function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

element.onclick = function() {
  // ...
};
// 不再需要时
element.onclick = null; // 切断闭包引用

为了在面试中展示你对闭包的优缺点面试题的全面掌握，你需要提出优化建议。

• 及时释放引用：在不再需要闭包时，将其赋值为 null，帮助垃圾回收机制工作。
• 避免深层嵌套：过多的闭包嵌套会增加作用域链查找的成本，降低代码可读性。考虑使用 ES6 的 class 或 module 模式替代。
• 谨慎引用大型对象：在闭包中尽量避免引用巨大的数组或DOM树，除非必要。
• 使用 WeakMap：如果需要关联数据与DOM对象，使用 WeakMap 可以避免内存泄漏，因为 WeakMap 的键名引用是弱引用。

除了直接的闭包的优缺点面试题，面试官和开发者还经常关注以下相关话题，这些知识能体现你的技术深度：

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