js 回调函数如何追加参数

skume2024-07-10 11:17

先来点逼格的，使用高阶函数如何处理。

TypeScript 复制代码

// 原始的回调函数
function originalCallback(a, b) {
  console.log(a, b); // 输出: 10, 20
}
 
// 高阶函数，用于追加参数并调用原始回调函数
function appendArgs(callback, ...additionalArgs) {
  return function(...innerArgs) {
    callback(...innerArgs, ...additionalArgs);
  };
}
 
// 使用高阶函数
const newCallback = appendArgs(originalCallback, 30, 40);
newCallback(10, 20); // 输出: 10, 20, 30, 40

如何使用高阶函数呢？

TypeScript 复制代码

const monacoEl = ref<null | HTMLElement>(null);


onMounted(() => {
    if (monacoEl.value) {
        const editor = monaco.editor.create(monacoEl.value, {
            value: "function main() {\r\tconsole.log('您好，TypeScript');\r}\r\n",
            language: "typescript",
            theme: "vs",
            ... ...
        });

        // 捕获编辑器的鼠标操作
        editor.onMouseUp(originalCallback);
    }
});

从上面代码可以看出，originalCallback 其实就接受了一个鼠标的原始事件参数，如果我们要传递一个编辑器的实例给回调呢？因为在现在前端开发中，我们会组件化封装，从外部引用的时候就需要去处理这些数据，当然组件间的通讯有很多方式。

由于设计了高阶函数，传递就很简单了

TypeScript 复制代码

const newCallback = appendArgs(originalCallback, editor);

// 捕获编辑器的鼠标操作
editor.onMouseUp(newCallback);

使用高阶函数之后，我们的回调函数就能接收到额外的参数。

说句实话有点托屁股放屁的感觉，写了一大堆是为了了解高阶函数魅力，其实以上的功能可以简单粗暴。

第一种，指定上下文

TypeScript 复制代码

// 捕获编辑器的鼠标操作
editor.onMouseUp(originalCallback.bind(editor));

// 建议回调函数使用 function 声明
function originalCallback(a) {
    console.log(this);
}

这里需要回调函数使用 function 定义，这样就可以通过 this 在函数体内获取到传递的参数上下文。当然现在都比较流行 ES6 的匿名函数开发。

TypeScript 复制代码

const originalCallback = (a, b) => {};

第二种，简单直接

TypeScript 复制代码

// 捕获编辑器的鼠标操作
editor.onMouseUp((e) => originalCallback(e, myArgs));

看到没有，直接给它传递一个匿名函数接收原始的单个参数，然后在函数体内再去调用我们的回调函数，这时候你想多少次参数都行。

问题解决。