柯里化方法中回调函数的底层存储与调用机制探究

一、handleEvent的柯里化底层原理 #

handleEvent是典型的柯里化函数，核心靠JavaScript的闭包机制实现：

1. 第一次调用handleEvent({ eventName: 'test' })时，外层箭头函数执行，参数eventName会被保存在当前函数的词法环境中。
2. 外层函数执行完毕后，返回内层的箭头函数(data) => { /* do stuff */ }——这个内层函数会保留对外部词法环境的引用，也就是说，它可以随时访问到之前传入的eventName值，哪怕外层函数已经执行完了。

说白了，柯里化就是把原本需要一次性传入的参数拆成多次传递，每次调用都用闭包“记住”当前传入的参数，直到最后返回能处理最终逻辑的函数。这里的handleEvent就是先接收事件名，再返回一个能处理事件数据的回调函数。

二、回调函数的存储与调用流程 #

先说明：你提供的invokeEvent.on当前实现是直接调用回调，没有做持久存储——这更像一个“立即执行”的逻辑，不是标准的事件订阅模式。下面分两种情况说明：

1. 你的示例代码里的逻辑 #

• 回调传递：执行invokeEvent.on('test', handleEvent({ eventName: 'test' }))时，先运行handleEvent({ eventName: 'test' })得到内层函数，这个函数会作为第二个参数cb传给on方法。
• 回调调用：on方法里直接执行cb({ hello: 'world' })，此时就会触发内层函数的逻辑——内层函数可以拿到闭包里的eventName: 'test'，同时接收传入的data: { hello: 'world' }。

2. 标准事件订阅模式的存储与调用（通常事件系统的实现） #

如果要做真正的事件订阅（存储回调，后续触发），invokeEvent需要一个内部容器来存不同事件对应的回调列表，比如：

const invokeEvent = {
    // 用对象存储事件名和对应的回调数组
    _eventCallbacks: {},
    on: (eventName, cb) => {
        // 初始化当前事件的回调数组
        if (!invokeEvent._eventCallbacks[eventName]) {
            invokeEvent._eventCallbacks[eventName] = [];
        }
        // 把回调存入对应事件的数组
        invokeEvent._eventCallbacks[eventName].push(cb);
        
        // 你的示例里的立即调用可以保留，也可以去掉
        // cb({ hello: 'world' });
    },
    // 触发事件的方法
    emit: (eventName, data) => {
        // 取出当前事件的所有回调，没有的话就用空数组
        const callbacks = invokeEvent._eventCallbacks[eventName] || [];
        // 遍历执行所有回调，传入数据
        callbacks.forEach(cb => cb(data));
    }
}

这种模式下：

• 存储：调用on时，回调会被存在_eventCallbacks对象中对应事件名的数组里。
• 调用：当需要触发事件时，调用invokeEvent.emit('test', { foo: 'bar' })，系统会从_eventCallbacks['test']里取出所有回调，逐个执行并传入数据{ foo: 'bar' }。

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