当前位置：首页 > news >正文

Javascript什么是回调函数？

news 来源：原创 2025/6/15 9:01:37

强烈建议看完本文章后再看一次箭头函数用法

关于Javascript ES6箭头函数用法的分析，函数声明的几个方式-CSDN博客

一、什么是回调函数？

✅ 一、什么是回调函数？

回调函数（Callback Function） 是 被当作参数传入另一个函数，并且在未来某个时间由那个函数调用的函数。

📌 一句话记住：

“不是你主动调用它，而是别的函数帮你调用它。”

✅ 二、你举的例子拆解分析

📍 例子 1：`map()`

[1, 2, 3].map((item) => item * 2);

map() 是数组的方法。
它接收一个函数作为参数，对数组的每个元素调用这个函数。
你传进去的是这个箭头函数 (item) => item * 2
所以这个箭头函数就是一个 回调函数。

✅ 解释流程：

const nums = [1, 2, 3];
const doubled = nums.map(function(item) {// 回调函数由 map 自动调用，每个 item 都执行一次return item * 2;
});
console.log(doubled); // [2, 4, 6]

📍 例子 2：`setTimeout`

setTimeout(() => console.log('ok'), 1000);

setTimeout() 是定时器函数。
它会在 1 秒后“自动调用”你传进去的函数。
所以箭头函数是一个 回调函数（它是由系统调用的，不是你手动调用的）。

📍 例子 3：`then()`

fetch('/api').then(res => res.json());

then() 是 Promise 的方法。
你传给 then() 的箭头函数，会在 fetch 请求完成、拿到响应数据后由系统调用。
所以这个函数也是一个 回调函数。

✅ 三、回调函数的本质定义（图解）

你写的函数 ——> 被“传进去” ——> 由别人“调用” ——> 就是回调

比如：

function sayHello(callback) {console.log("准备调用你传入的函数");callback(); // 你传的函数在这里被执行！
}sayHello(() => {console.log("你好，我是回调函数！");
});

输出：

准备调用你传入的函数
你好，我是回调函数！

✅ 四、回调函数 VS 普通函数的区别

类型	谁调用它？	什么时候执行？
普通函数	你自己调用	你代码中写在哪就执行到哪
回调函数	别人（系统/函数）调用	事件发生、延迟完成、请求返回时

✅ 五、拓展：回调函数的应用场景

场景	回调函数作用
异步操作	`setTimeout(fn)`、`fetch().then(fn)`
数组遍历	`map(fn)`、`filter(fn)`
事件监听	`button.addEventListener('click', fn)`
自定义函数参数	`runTask(fn)`