回调函数 | Fred's Blog

注意：回调函数 和 异步操作 的区分。
异步实质是改变执行顺序的操作。
回调更像是一种模式，处理问题的方式。
这种回调模式会用于处理某些异步问题。

基本概念

回调函数是一个函数，它会作为参数传递给另一个函数，其作用是在需要的时候方便调用这段（回调函数）代码。

定义回调函数：
- 回调函数是一个函数，它会作为参数传递给另一个函数。
传递回调函数：
- 在另一个函数中，可以将回调函数作为参数传递，并在适当的时机调用它。

基本使用

// 传递回调函数
function executeCallback(callback) {
  console.log("执行一些操作");
  callback(); // 调用回调函数
}
// 定义回调函数
function myCallback() {
  console.log("回调函数被调用");
}

executeCallback(myCallback); 
/**
输出: 
"执行一些操作"
”回调函数被调用“
*/

executeCallback(myCallback) 中，函数 myCallback 作为一个参数传入到 executeCallback() 函数中
回调函数 myCallback并不是马上起作用，而是 console.log("执行一些操作"); 运行完之后需要调用回调函数的时候才会调用。

匿名回调函数

function executeCallback(callback) {
  console.log("执行一些操作");
  callback(); // 调用回调函数
}
executeCallback(function () {
    console.log("匿名回调函数"); 
});

特点

延迟执行
- 回调函数作为参数传递给一个函数的时候，传递的只是函数的定义并不会立即执行。
- 和普通的函数一样，回调函数在调用函数数中也要通过 () 运算符调用才会执行。
回调函数是一个闭包
- 回调函数是一个闭包，也就是说它能访问到其外层定义的变量。
控制流
- 用于控制程序的执行流，如在事件处理或异步操作完成时执行特定逻辑。
函数嵌套
- 可能导致“回调地狱”或深层嵌套，影响代码可读性和维护性。
- 为解决这个问题，JavaScript 引入了更现代的异步编程方式，如 Promise 和 async/await。

应用场景

注意：回调函数执行前的类型判断

function add(num1, num2, callback) {
  let sum = num1 + num2;
  // 判断传入的 callback 是一个函数，才能当回调函数使用。
  if (typeof callback === 'function') {
    callback(sum);
  }
}

异步操作：回调函数常用于处理异步操作，如网络请求、定时器等。
1
2
3
setTimeout(() => {
console.log("异步操作完成");
}, 1000); // 1秒后输出: 异步操作完成
在这个例子中，回调函数 () => { console.log("异步操作完成"); } 在 1 秒后被调用。
事件处理：回调函数用于处理用户事件，如点击、输入等。
1
2
3
document.getElementById("myButton").addEventListener("click", () => {
console.log("按钮被点击");
});
当用户点击按钮时，回调函数 () => { console.log("按钮被点击"); } 会被调用。
数组方法： JavaScript 数组方法如 .map(), .filter(), 和 .reduce() 都使用回调函数来处理数组元素。
1
2
3
let numbers = [1, 2, 3];
let squares = numbers.map(x => x * x);
console.log(squares); // [1, 4, 9]
在这个例子中，x => x * x 是回调函数，用于计算每个数组元素的平方。