深入理解前端面试高频考点：JavaScript闭包

章来锬

于 2025-06-11 09:15:11 发布

阅读量247

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00873/article/details/148577905

深入理解前端面试高频考点：JavaScript闭包

frontend-hard-mode-interview 《前端内参》，有关于JavaScript、编程范式、设计模式、软件开发的艺术等大前端范畴内的知识分享，旨在帮助前端工程师们夯实技术基础以通过一线互联网企业技术面试。项目地址: https://gitcode.com/gh_mirrors/fr/frontend-hard-mode-interview

闭包(Closure)是JavaScript中一个极其重要且强大的概念，也是前端面试中几乎必问的知识点。本文将全面剖析闭包的本质、应用场景及注意事项，帮助开发者彻底掌握这一核心概念。

什么是闭包

闭包是指那些能够访问外部变量的函数。这里的自由变量是指既不是函数参数也不是函数局部变量的变量。换句话说，闭包是能够访问其他函数作用域中变量的函数。

闭包的产生时机

当内层作用域访问外层函数作用域中的参数、变量或函数时，闭包就产生了。例如：

function outer() {
  const name = "Coffee";
  function inner() {
    console.log(name); // 访问外层作用域的变量
  }
  return inner;
}

const closureFunc = outer();
closureFunc(); // 输出"Coffee"

在这个例子中，inner函数就是一个闭包，因为它访问了外层outer函数作用域中的name变量。

闭包的经典问题：循环中的闭包

闭包在循环中的应用是一个经典的面试题。考虑以下代码：

for (var i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log(i); // 输出6 6 6 6 6
  }, i * 1000);
}

这段代码本意是想每隔1秒依次输出1到5，但实际输出却是5个6。这是因为setTimeout回调函数中访问的是同一个变量i，当循环结束时i的值已经是6。

解决方案

使用IIFE(立即执行函数表达式)创建闭包：

for (var i = 1; i <= 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j); // 1 2 3 4 5
    }, j * 1000);
  })(i);
}

使用let关键字：

for (let i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log(i); // 1 2 3 4 5
  }, i * 1000);
}

let声明的变量具有块级作用域，每次循环都会创建一个新的变量绑定。

闭包的实际应用

1. 模块化开发

在ES6之前，闭包是实现模块化的主要方式：

const counterModule = (function() {
  let count = 0; // 私有变量
  
  return {
    increment: function() {
      return ++count;
    },
    reset: function() {
      count = 0;
      return count;
    }
  };
})();

console.log(counterModule.increment()); // 1
console.log(counterModule.increment()); // 2
console.log(counterModule.reset()); // 0

2. 函数柯里化

闭包可以实现函数柯里化，即把接受多个参数的函数变换成接受单一参数的函数：

function multiply(a) {
  return function(b) {
    return a * b;
  };
}

const double = multiply(2);
console.log(double(5)); // 10

3. 数据缓存

闭包可以用来实现简单的缓存机制：

function createCache() {
  const cache = {};
  
  return {
    get: function(key) {
      return cache[key];
    },
    set: function(key, value) {
      cache[key] = value;
    }
  };
}

const cache = createCache();
cache.set('name', 'Coffee');
console.log(cache.get('name')); // "Coffee"

闭包的优缺点

优点

实现封装，创建私有变量和方法
保持变量在内存中，实现数据持久化
实现模块化开发
实现高阶函数和函数柯里化

缺点

内存消耗：闭包会使得函数中的变量都被保存在内存中，内存消耗较大
内存泄漏：如果使用不当，可能导致内存泄漏

为了避免内存泄漏，应该在不需要使用闭包时手动解除引用：

function createHeavyObject() {
  const largeObject = new Array(1000000).fill('data');
  
  return {
    getData: function() {
      return largeObject[0];
    },
    cleanup: function() {
      largeObject.length = 0; // 释放内存
    }
  };
}

const obj = createHeavyObject();
// 使用完毕后
obj.cleanup();
obj = null; // 解除引用