如何在JavaScript中实现类似C#的多播回调委托功能？

哈哈，刚好之前也研究过这个问题！C#里的多播委托确实挺方便的，能把多个函数绑在一起批量执行，但JS本身没有原生支持这个特性，不过我们可以自己动手封装一个，实现完全一样的效果～

方法一：封装可直接调用的多播回调对象 #

这个方法最贴近C#里的使用体验，我们可以创建一个工具函数，返回一个“伪函数”——它本身可以像普通函数一样调用，同时还带有添加/移除回调的方法：

// 封装多播回调的工具函数
function createMulticastCallback() {
  const callbacks = [];
  
  // 核心：返回一个可直接调用的函数，执行所有回调
  const multicastFn = function() {
    // 用apply传递this和参数，让回调能获取正确的上下文
    callbacks.forEach(callback => callback.apply(this, arguments));
  };
  
  // 添加回调的方法，支持链式调用
  multicastFn.add = function(callback) {
    // 避免重复添加同一个函数
    if (typeof callback === 'function' && !callbacks.includes(callback)) {
      callbacks.push(callback);
    }
    return this;
  };
  
  // 可选：移除指定回调的方法
  multicastFn.remove = function(callback) {
    const index = callbacks.indexOf(callback);
    if (index !== -1) {
      callbacks.splice(index, 1);
    }
    return this;
  };
  
  return multicastFn;
}

// 实际使用示例
function f1() {
  console.log('执行函数f1');
}

function f2() {
  console.log('执行函数f2');
}

// 创建多播回调实例
const c = createMulticastCallback();
// 绑定多个回调，还能链式调用
c.add(f1).add(f2);

// 直接调用，就会依次执行f1和f2
c(); // 控制台输出：执行函数f1 → 执行函数f2

这个封装的好处是用法和C#几乎一致：创建回调容器、添加函数、直接调用执行所有绑定的函数，还支持移除不需要的回调，非常灵活。

方法二：轻量版——手动维护回调数组 #

如果不需要太复杂的封装，只是简单实现批量执行，直接用数组维护回调列表就行：

// 用数组存所有要执行的回调
const callbacks = [];

function f1() { console.log('执行f1'); }
function f2() { console.log('执行f2'); }

// 添加回调到数组
callbacks.push(f1);
callbacks.push(f2);

// 写一个执行函数，遍历数组执行所有回调
function executeAll() {
  callbacks.forEach(fn => fn());
}

// 调用执行函数，批量触发回调
executeAll();

这个方法更简单，但缺点是不能像调用普通函数一样直接触发，需要手动调用执行函数，灵活性稍差。

进阶：用ES6类封装（更规范） #

如果你的项目用了ES6+语法，也可以用类来封装多播回调，结构更清晰：

class MulticastCallback {
  constructor() {
    this.callbacks = [];
  }
  
  // 添加回调
  add(callback) {
    if (typeof callback === 'function' && !this.callbacks.includes(callback)) {
      this.callbacks.push(callback);
    }
    return this;
  }
  
  // 移除回调
  remove(callback) {
    const idx = this.callbacks.indexOf(callback);
    if (idx !== -1) this.callbacks.splice(idx, 1);
    return this;
  }
  
  // 执行所有回调
  invoke() {
    this.callbacks.forEach(cb => cb.apply(this, arguments));
  }
}

// 使用示例
const mc = new MulticastCallback();
mc.add(f1).add(f2);
mc.invoke(); // 执行所有绑定的回调

额外小技巧：处理回调异常 #

如果担心某个回调出错导致后续函数无法执行，可以在遍历的时候加try-catch：

const multicastFn = function() {
  callbacks.forEach(callback => {
    try {
      callback.apply(this, arguments);
    } catch (e) {
      console.error('回调执行出错:', e);
      // 可选择抛出错误或忽略，不影响其他回调执行
    }
  });
};

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