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 小时前
算法中的链表结构
开发语言·c++·学习·算法
十五年专注C++开发4 小时前
Fruit框架:C++依赖注入解决方案
开发语言·c++·依赖注入·fruit框架
华仔啊4 小时前
35岁程序员失业了,除了送外卖,还能做什么?
前端·后端·程序员
Lovely Ruby4 小时前
七日 Go 的自学笔记 (一)
开发语言·笔记·golang
crary,记忆5 小时前
Angular如何让整个项目的所有页面能够整体缩小一定的比例?
javascript·ecmascript·angular.js
Mintopia5 小时前
🤖 算法偏见修正:WebAI模型的公平性优化技术
前端·javascript·aigc
Mintopia5 小时前
🧩 TypeScript防御性编程:让Bug无处遁形的艺术
前端·typescript·函数式编程
JarvanMo5 小时前
🔔 Flutter 本地通知: 吸引用户的完整指南—即使在他们离线时也能实现
前端
你想考研啊5 小时前
一、redis安装(单机)和使用
前端·数据库·redis
江城开朗的豌豆5 小时前
小程序与H5的“握手言和”:无缝嵌入与双向通信实战
前端·javascript·微信小程序