JS中回调函数的学习笔记

回调函数的定义

回调函数是指在一个函数的参数中传递的函数，被传递的函数将在调用该参数的函数执行完毕之后立即执行。该函数被称为“回调函数”。

回调函数的作用

回调函数的作用是将一个复杂的问题分解成多个简单的问题，以便更好的理解和解决整个问题。回调函数可以让我们更好地实现代码重用，提高程序的可读性和可维护性。

回调函数的示例

我们可以通过一个简单的示例来说明回调函数的作用：

function add(a, b, callback) {
  const result = a + b;
  callback(result);
}

function printResult(result) {
  console.log(`结果是 ${result}`);
}

add(2, 3, printResult);

上述代码中，我们定义了一个 add 函数，该函数有三个参数。其中第三个参数 callback 是传入的回调函数。在 add 函数被调用时，我们将 a 和 b 相加得到结果后，将结果传入 callback 中执行。

最后，我们定义了一个名为 printResult 的回调函数，该函数在被调用时会将结果输出到控制台中。在调用 add 函数时，我们将 printResult 函数作为第三个参数传入，从而实现了回调函数的作用。

回调函数的另一个示例

下面我们再来看另一个回调函数的示例：

function getUserInfo(userId, successCallback, failureCallback) {
  const user = {
    id: userId,
    name: '张三',
    age: 18,
    gender: '男'
  };

  if (userId <= 0) {
    failureCallback('userId 不能小于等于 0');
  } else {
    successCallback(user);
  }
}

function successCallback(user) {
  console.log(`用户信息是：${user.name}，${user.age}岁，${user.gender}`);
}

function failureCallback(error) {
  console.error(`获取用户信息失败：${error}`);
}

getUserInfo(123, successCallback, failureCallback);

在上述代码中，我们定义了一个 getUserInfo 函数，该函数有三个参数。其中第一个参数 userId 表示要获取用户信息的用户ID；第二个参数 successCallback 表示获取用户信息成功后执行的回调函数；第三个参数 failureCallback 表示获取用户信息失败时执行的回调函数。

在 getUserInfo 函数中，我们通过判断 userId 是否小于等于 0 来决定执行哪个回调函数。如果 userId 大于 0，则调用 successCallback 函数并将用户信息作为参数传入；如果 userId 小于等于 0，则调用 failureCallback 函数并将错误信息作为参数传入。

最后，我们定义了 successCallback 和 failureCallback 两个函数，它们分别在获取用户信息成功和失败时被调用。在调用 getUserInfo 函数时，我们将 successCallback 和 failureCallback 函数作为参数传入，从而实现了回调函数的作用。