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

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

问题解决。

相关推荐
mCell3 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip3 小时前
Node.js 子进程:child_process
前端·javascript
excel6 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel7 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼9 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping9 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙10 小时前
[译] Composition in CSS
前端·css
白水清风10 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix10 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780010 小时前
new、原型和原型链浅析
前端·javascript