js实现一个回调函数
回调函数的基本概念
回调函数是作为参数传递给另一个函数的函数,并在特定条件或异步操作完成后被调用。JavaScript中广泛用于事件处理、异步操作(如setTimeout、AJAX请求)等场景。
简单回调函数示例
以下示例展示如何定义一个接收回调函数的高阶函数,并在操作完成后调用回调:

function processData(data, callback) {
// 模拟数据处理
const processedData = data.toUpperCase();
// 调用回调函数
callback(processedData);
}
// 调用时传递回调函数
processData("hello", function(result) {
console.log("处理后的数据:", result); // 输出: "处理后的数据: HELLO"
});
异步回调示例
通过setTimeout模拟异步操作,完成后触发回调:

function fetchData(callback) {
setTimeout(() => {
const data = { id: 1, name: "Example" };
callback(data);
}, 1000);
}
fetchData(function(data) {
console.log("接收到数据:", data); // 1秒后输出数据
});
错误处理模式
回调函数通常遵循“错误优先”(Error-first)约定,第一个参数为错误对象(null表示成功):
function divide(a, b, callback) {
if (b === 0) {
callback(new Error("除数不能为零"));
} else {
callback(null, a / b);
}
}
divide(10, 2, (err, result) => {
if (err) {
console.error("错误:", err.message);
} else {
console.log("结果:", result); // 输出: "结果: 5"
}
});
箭头函数简化回调
ES6箭头函数可简化回调写法:
const numbers = [1, 2, 3];
numbers.forEach(num => console.log(num * 2)); // 输出: 2, 4, 6
注意事项
- 回调地狱:多层嵌套回调会导致代码难以维护,可通过
Promise或async/await优化。 - this绑定:若回调中使用
this,需注意其指向,必要时使用.bind()或箭头函数固定上下文。






