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

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

问题解决。

相关推荐
艾莉丝努力练剑30 分钟前
【LeetCode&数据结构】单链表的应用——反转链表问题、链表的中间节点问题详解
c语言·开发语言·数据结构·学习·算法·leetcode·链表
工业甲酰苯胺4 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
倔强青铜35 小时前
苦练Python第18天:Python异常处理锦囊
开发语言·python
止观止5 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms5 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登5 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
u_topian5 小时前
【个人笔记】Qt使用的一些易错问题
开发语言·笔记·qt
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
珊瑚里的鱼5 小时前
LeetCode 692题解 | 前K个高频单词
开发语言·c++·算法·leetcode·职场和发展·学习方法