如何在闭包中传递参数？FullCalendar选择事件无法获取calId

问题分析 #

你的核心问题是闭包没有正确捕获updateCalendar函数的calId参数，导致FullCalendar的select事件触发时无法读取到该值。虽然初始化日志能正常输出，说明calId在初始化阶段是有效的，但事件绑定过程中闭包的作用域没有正确保留这个参数的引用。

修复方案 #

方案1：显式传递参数给闭包生成函数 #

通过让闭包生成函数createSelectHandler接收calId参数，确保捕获到当前调用时的参数值，避免作用域污染：

function updateCalendar(calId) {
  console.log(`Initializing calendar with ID: ${calId}`);

  // 显式接收calId，确保闭包捕获当前值
  function createSelectHandler(currentCalId) {
    return function(info) {
      console.log(`Select event triggered calendarId: ${currentCalId}`);
    }
  }

  $('#calendar').fullCalendar({
    select: createSelectHandler(calId),
    // 其他日历配置项...
  });
}

方案2：使用箭头函数简化闭包 #

箭头函数会自动继承父级作用域的变量，无需额外传递参数，写法更简洁：

function updateCalendar(calId) {
  console.log(`Initializing calendar with ID: ${calId}`);

  $('#calendar').fullCalendar({
    select: (info) => {
      console.log(`Select event triggered calendarId: ${calId}`);
    },
    // 其他日历配置项...
  });
}

原代码失效原因 #

原写法中，createSelectHandler没有显式绑定calId，如果updateCalendar被多次调用或者存在异步执行场景，calId的引用可能会被后续的修改覆盖。通过上述两种方式，能确保select事件回调始终访问的是当前初始化时的calId值。

内容的提问来源于stack exchange，提问作者Dmitry