JavaScript 闭包原理、应用场景与性能优化详解

作者：巡夜人

时间：2026-10-24

本文深入解析JavaScript闭包的定义与核心原理，重点探讨其在防抖函数、单例模式设计以及解决循环索引获取等场景中的实际应用。同时，文章指出闭包可能导致内存泄漏的性能风险，并提供相应的优化建议，帮助开发者在利用闭包强大功能的同时避免潜在的性能陷阱。

文章目录

闭包的基本概念与原理

闭包的基本概念

在JavaScript中，当一个内部函数能够访问并引用其外部函数作用域中的变量时，这种结构被称为闭包。它使得内层函数可以“记住”并访问外层函数的局部变量，即使外层函数已经执行完毕。

闭包的典型应用场景

闭包的常见应用场景

一种典型的应用是利用闭包特性来实现防抖（debounce）功能。通过闭包保存定时器引用，可以在事件频繁触发时合并多次调用，仅在最后一次触发后执行指定操作，从而优化性能。


function debounce(callback, time) {
  var timer;
  return function () {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      callback()
    }, time)
  }
}<br data-filtered="filtered"><br data-filtered="filtered">window.onresize = debounce(() => {console.log(666)},500)

另一个重要场景是使用闭包来设计单例模式。通过立即执行函数（IIFE）创建一个私有变量来存储实例，每次调用返回该实例，确保整个应用生命周期中只有一个对象存在，节省内存并保证状态一致。


class Car{
  constructor(color){
    this.color = color
  }
}
var proxy = (function createCar() {
  var instance;
  return function (color) {
    if (!instance) {
      instance = new Car(color)
    }
    return instance
  }
})()
var car = proxy('white')

此外，闭包常用于解决早期JavaScript中for循环与异步回调配合时获取索引值的问题。由于var声明的变量存在提升和共享作用域的问题，通过闭包将当前索引值传递给内层函数，可以正确捕获每次循环的索引值。


for (var i = 0; i < 10; i++) {
  setTimeout(function(){console.log(i)},0) //10个10
}
for (var i = 0; i < 10; i++) {
  (function(j){
    setTimeout(function(){console.log(j)},0) // 0 - 9
  })(i)
}