如何在循环中为对象内的已有事件回调函数添加代码？

嘿，我一眼就看出你这段代码的问题了——闭包陷阱！你在for循环里用var声明了cb变量，它属于函数作用域，每次迭代都会被覆盖。这就导致所有新生成的回调函数，最终都会引用循环最后一次的cb值，不管触发哪个事件，执行的都是最后一个原始回调函数。

下面给你几种正确的实现方式：

方法1：用立即执行函数表达式（IIFE）创建独立作用域 #

通过IIFE把每次迭代的cb参数封装到独立作用域里，避免被后续迭代覆盖：

for (var evt in scope.tree.events) {
  if (scope.tree.events.hasOwnProperty(evt)) {
    // 用IIFE捕获当前迭代的cb
    (function(currentCb) {
      scope.tree.events[evt] = function(...args){
        currentCb(...args);
        controller.$setDirty();
        // 这里添加你需要的其他额外代码
      };
    })(scope.tree.events[evt]);
  }
}

方法2：用let声明变量（ES6+） #

let具有块级作用域，每次循环迭代都会创建一个新的cb变量，自然避免了闭包陷阱：

for (var evt in scope.tree.events) {
  if (scope.tree.events.hasOwnProperty(evt)) {
    let cb = scope.tree.events[evt]; // 块级作用域的cb
    scope.tree.events[evt] = function(...args){
      cb(...args);
      controller.$setDirty();
      // 其他额外代码
    };
  }
}

方法3：用Object.keys() + forEach遍历（更简洁的ES6+写法） #

这种方式不需要担心作用域问题，因为forEach的每次迭代回调都是独立函数，会捕获当前的cb：

Object.keys(scope.tree.events).forEach(evt => {
  const cb = scope.tree.events[evt];
  scope.tree.events[evt] = (...args) => {
    cb(...args);
    controller.$setDirty();
    // 其他额外代码
  };
});

额外注意：如果原始回调依赖this指向 #

如果你的原始回调函数里用到了this（比如指向触发事件的对象），记得在调用cb时保留正确的this：

// 以方法3为例，修改成普通函数来保留this
Object.keys(scope.tree.events).forEach(evt => {
  const cb = scope.tree.events[evt];
  scope.tree.events[evt] = function(...args) {
    cb.call(this, ...args); // 把当前函数的this传给原始回调
    controller.$setDirty();
  };
});

内容的提问来源于stack exchange，提问作者Renaud is Not Bill Gates