js 回调函数如何追加参数

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

// 原始的回调函数
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

如何使用高阶函数呢?

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 其实就接受了一个鼠标的原始事件参数,如果我们要传递一个编辑器的实例给回调呢?因为在现在前端开发中,我们会组件化封装,从外部引用的时候就需要去处理这些数据,当然组件间的通讯有很多方式。

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

const newCallback = appendArgs(originalCallback, editor);// 捕获编辑器的鼠标操作
editor.onMouseUp(newCallback);

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

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

第一种,指定上下文

// 捕获编辑器的鼠标操作
editor.onMouseUp(originalCallback.bind(editor));// 建议回调函数使用 function 声明
function originalCallback(a) {console.log(this);
}

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

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

第二种,简单直接

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

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

问题解决。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/43954.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入理解 LXC (Linux Containers)

目录 引言LXC 的定义LXC 的架构LXC 的工作原理LXC 的应用场景LXC 在 CentOS 上的常见命令实验场景模拟总结 1. 引言 在现代 IT 基础设施中&#xff0c;容器技术已经成为一种重要的应用和部署方式。与虚拟机相比&#xff0c;容器具有更高的效率、更轻量的特性和更快的启动速度…

AI应用观:从“卷模型”到“卷应用”的时代跨越

在2024年世界人工智能大会的舞台上&#xff0c;百度创始人李彦宏的发言如同一股清流&#xff0c;为当前如火如荼的人工智能领域注入了深刻的思考。他提出的“大家不要卷模型&#xff0c;要卷应用”的观点&#xff0c;不仅是对当前AI技术发展趋势的精准洞察&#xff0c;更是对未…

【PB案例学习笔记】-30动态打开窗口

写在前面 这是PB案例学习笔记系列文章的第30篇&#xff0c;该系列文章适合具有一定PB基础的读者。 通过一个个由浅入深的编程实战案例学习&#xff0c;提高编程技巧&#xff0c;以保证小伙伴们能应付公司的各种开发需求。 文章中设计到的源码&#xff0c;小凡都上传到了gite…

Mosh|内连接、外连接、左连接、右连接(未完)

下图取自菜鸟教程&#xff0c;侵权删&#xff5e; 一、内连接&#xff1a;Inner Joins 模版&#xff1a;SELECT * FROM A JOIN B ON 条件 含义&#xff1a;返回A与B的交集&#xff0c;列为AB列之和 练习&#xff1a;将order_items表和products表连接&#xff0c;返回产品id和…

Linux C++ 046-设计模式之策略模式

Linux C 046-设计模式之策略模式 本节关键字&#xff1a;Linux、C、设计模式、策略模式 相关库函数&#xff1a; 概念 策略模式定义了一系列的算法&#xff0c;并将每一个算法封装起来&#xff0c;而且使它们还可以相互替换。策略模式让算法独立于使用它的客户而独立变化。&…

【普中】基于51单片机的矩阵电子密码锁LCD1602液晶显示 proteus仿真+程序+设计报告+讲解视频

【普中】基于51单片机的矩阵电子密码锁LCD1602液晶显示设计 1.主要功能&#xff1a;讲解视频&#xff1a;2.仿真3. 程序代码4. 设计报告5. 设计资料内容清单&&下载链接资料下载链接&#xff1a; 【普中】基于51单片机的矩阵电子密码锁LCD1602液晶显示设计 ( proteus仿真…

debian或Ubuntu中开启ssh允许root远程ssh登录的方法

debian或Ubuntu中开启ssh允许root远程ssh登录的方法 前因&#xff1a; 因开发需要&#xff0c;需要设置开发板的ssh远程连接。 操作步骤如下&#xff1a; 安装openssh-server sudo apt install openssh-server设置root用户密码&#xff1a; sudo passwd root允许root用户…

Java继承练习(4) (2024.7.9)

人类 package Work20240709;public class Person {String name;String gender;int age;String nationality;public Person() {}public Person(String name, String gender, int age, String nationality) {this.name name;this.gender gender;this.age age;this.nationalit…

Androidstudio开发,天气预报APP

1.项目功能思维导图 2. 项目涉及到的技术点 数据来源&#xff1a;和风天气API使用okhttp网络请求框架获取api数据使用gson库解析json数据使用RecyclerViewadapter实现未来7天列表展示和天气指数使用PopupMenu 实现弹出选项框使用动画定时器实现欢迎页倒计时和logo动画使用Text…

使用 Vue 3 实现打字机效果

在现代前端开发中&#xff0c;添加一些视觉效果可以提升用户体验。其中&#xff0c;打字机效果是一种常见且吸引人的效果&#xff0c;可以用于展示动态文本。本文将介绍如何在 Vue 3 中实现打字机效果。 实现步骤 1. 创建自定义指令 我们首先创建一个自定义指令 v-typewriter…

SVN 标签的使用与优势

SVN 标签的使用与优势 1. 引言 在软件开发过程中,版本控制是一个至关重要的环节。它帮助开发团队跟踪代码的变化,协作开发,并管理项目的不同版本。Subversion(SVN)作为一种流行的版本控制系统,提供了强大的标签功能,以支持软件开发的不同阶段。本文将详细介绍SVN标签的…

web 网络安全

Web网络安全是网络安全的一个重要分支&#xff0c;专注于保护Web应用程序、服务和网站免受各种网络威胁。学习Web网络安全涉及多个层面的知识和技能&#xff0c;以下是一些主要的学习领域&#xff1a; 一、XSS攻击 全称:&#xff1a;Cross Site Script &#xff08;跨站脚本&a…

从零手写实现 nginx-25-directive map 条件判断指令

前言 大家好&#xff0c;我是老马。很高兴遇到你。 我们为 java 开发者实现了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何处理的&#xff0c;可以参考我的另一个项目&#xff1a; 手写从零实现简易版 tomcat minicat 手写 nginx 系列 …

在vue3中,手写父子关联,勾选子级父级关联,取消只取消当前子级,父节点不动

树形控件选择子级勾选父级&#xff0c;以及所有子级&#xff0c; 取消勾选仅取消子级 在项目中&#xff0c;可能会遇到这种场景&#xff0c;比如权限配置的时候&#xff0c;页面权限和菜单权限以tree的形式来配置&#xff0c;而且不用半选&#xff0c;菜单在页面的下面&#xf…

FTP与TFTP

1、TFTP&#xff08;简单文件传输协议&#xff09; TFTP是TCP/IP协议族中一个用来在客户机与服务器之间进行简单文件传输的协议&#xff0c;提供不复杂、开销不大的文件传输服务。 基于UDP协议 端口号&#xff1a;69 特点&#xff1a;简单、轻量级、易于实现 传输过程&…

人与机器的协同是强弱系统的互补行为

人与机器的协同可以被视作强弱系统的互补行为&#xff0c;这也强调了人类和机器之间在处理问题、执行任务或创造价值时各自的优势与角色。 人类在认知、创造力、情感和伦理等方面具有独特优势。我们能够进行高级的抽象思维、创新和复杂决策&#xff0c;能够处理不确定性和动态环…

《Windows API每日一练》9.13资源-鼠标位图和字符串

鼠标指针位图&#xff08;Mouse Cursor Bitmap&#xff09;是用于表示鼠标指针外观的图像。在 Windows 窗口编程中&#xff0c;可以使用自定义的鼠标指针位图来改变鼠标的外观&#xff0c;并提供更加个性化的用户体验。 ■以下是一些与鼠标指针位图相关的要点&#xff1a; ●…

量产工具一一业务系统(六)

目录 前言 一、代码流程框架 1.业务系统程序流程图 2.业务系统主页面流程图 3.main.c 4.main_page.c 二、处理配置文件 1.配置文件示例 2.处理配置文件 3.config.h 4.config.c 三、生成产品界面 1.计算每个按钮的范围 2.main_page.c 四、处理输入事件 1.main_…

【力扣C语言】每日一题—第121题,买卖股票的最佳时机

题目&#xff1a; 返回获取的最大利润&#xff1a; 这题可浪费时间了&#xff01;&#xff01;&#xff01; 主要是暴力求解超时&#xff01;&#xff01;&#xff01; 最后参考了一下答案 解题思路&#xff1a; 思路一&#xff1a; 暴力求解&#xff1a;两重for循环判断…

【Python实战因果推断】18_线性回归的不合理效果8

目录 Saturated Regression Model Regression as Variance Weighted Average Saturated Regression Model 还记得我在本章开头强调回归和条件平均值之间的相似性吗&#xff1f;我向你展示了使用二元干预进行回归与比较干预组和对照组的平均值是完全一样的。现在&#xff0c;由…