如何在工厂函数间串联两个不同事件处理器？Worker工厂无法正确接收参数问题求助

首先咱们来定位问题出在哪：
你的Worker工厂函数里的getReceipt方法现在是“一肩挑”——既负责设置内部的food变量，又负责输出它。但这里有个关键问题：

• 点击ButtonA时，你调用Worker.getReceipt("Meal")，这时候传了参数，food被正确设置为Meal并输出；
• 但每次点击ButtonB时，绑定的事件调用的是不带参数的Interface.getReceipt()，这会把food直接赋值为undefined（因为没传参数，string就是undefined），所以后面的输出自然就变成undefined了。

也就是说，你每次点ButtonB都会把之前设置好的food给覆盖掉，这才是核心问题。

下面给你两种可行的解决方案：

方案一：拆分“设置”和“读取”方法（推荐） #

把设置变量和读取输出的逻辑拆成两个独立的方法，这样职责更清晰，也不容易出错。

修改worker.js： #

const Worker = (() => {
 let food;
 var lowerChain = (elem) => {
 elem.addEventListener("click", (event) => Interface.getReceipt());
 }
 const Interface = {
 // 专门用来设置食物的方法
 setFood: (string) => {
 food = string;
 },
 // 只负责读取当前食物并输出
 getReceipt: async () => {
 console.log("Responses in Worker");
 console.log(food);
 }
 }
 return {
 lowerChain: (elem) => lowerChain(elem),
 setFood: (param) => Interface.setFood(param)
 }
})();
export default Worker;

修改manager.js： #

把原来调用Worker.getReceipt("Meal")改成调用新的setFood方法：

// manager.js里的sendOrderToWorker方法
sendOrderToWorker: async (event) => {
 console.log("Order receives from Manager");
 Worker.setFood("Meal"); // 替换成setFood
}

这样操作后，点击ButtonA会把food设置为Meal，之后不管点多少次ButtonB，都会输出当前的Meal值，不会被覆盖。

方案二：调整getReceipt的逻辑，仅在传参时更新变量 #

如果不想拆分方法，可以修改getReceipt的逻辑，只有当传入有效参数时才更新food，否则直接输出当前值：

修改worker.js里的getReceipt方法： #

getReceipt: async (string) => {
 console.log("Responses in Worker");
 // 只有当传入了参数时，才更新food变量
 if (typeof string !== 'undefined') {
 food = string;
 }
 console.log(food);
}

其余代码保持不变。这样点击ButtonA时传参设置food，点击ButtonB时不带参数调用，只会输出当前的food值，不会覆盖掉之前的设置。

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