js 回调函数如何追加参数

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

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));

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

问题解决。

相关推荐
普通程序员4 分钟前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
Web小助手4 分钟前
js高级程序设计(日期)
javascript
Web小助手5 分钟前
js高级程序设计(4/5章节)
javascript
山有木兮木有枝_6 分钟前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
十盒半价6 分钟前
从递归到动态规划:手把手教你玩转算法三剑客
javascript·算法·trae
流口水的兔子7 分钟前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
多啦C梦a11 分钟前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js
呆呆的心11 分钟前
大厂面试官都在问的 WEUI Uploader,源码里藏了多少干货?🤔
前端·微信·面试
heartmoonq12 分钟前
深入理解 Vue 3 响应式系统原理:Proxy、Track 与 Trigger 的协奏曲
前端
Web小助手14 分钟前
js高级程序设计(1/2章节)
javascript