前端学习手册-JavaScript函数与回调(十一)-优快云博客

一、函数的定义

function hello() {
    console.log("你好！");
}
hello();

二、带参数和返回值

function add(x, y) {
    return x + y;

let result = add(1, 2);
console.log(result); // 输出3

三、箭头函数（ES6新语法）

const multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // 6

四、函数表达式

const add = function(x, y) {
  return x + y;
};
console.log(add(1, 2));//输出3

五、匿名函数（没有名字的函数）

setTimeout(function() {
  console.log('延迟1秒输出');
}, 1000);

六、回调函数

回调函数是作为参数传递给另一个函数的函数，在特定事件或条件发生时被调用。

回调函数本质上是一个函数，作为另一个函数的参数。

1.使用命名函数作为回调

2.使用匿名函数作为回调

3.使用箭头函数作为回调（ES6+）

// 形式1：使用命名函数作为回调
function greeting(name) {
  return `Hello, ${name}!`;
}

function processUserInput(input, callback) {
  const formattedInput = input.trim();
  return callback(formattedInput);
}
// 将greeting函数作为回调传递
const result1 = processUserInput('  World  ', greeting);
console.log('命名函数作为回调的结果:', result1);

// 形式2：使用匿名函数作为回调
const result2 = processUserInput('JavaScript', function(name) {
  return `Welcome to ${name}!`;
});
console.log('匿名函数作为回调的结果:', result2);

// 形式3：使用箭头函数作为回调（ES6+）
const result3 = processUserInput('ES6', (name) => {
  return `Learning ${name} arrow functions!`;
});
console.log('箭头函数作为回调的结果:', result3);

常见使用场景：

1. 异步API调用（如AJAX请求、文件读写等）

2. 事件处理（如点击事件、键盘事件等）

3. 数组的高阶函数（如forEach、map、filter等）

4. 定时器函数（如setTimeout、setInterval等）

下面是一段嵌套回调的代码示例：

// 嵌套回调与回调地狱
// 模拟异步操作的函数
function fetchUserData(userId, callback) {
  setTimeout(() => {
    console.log(`获取用户${userId}数据`);
    callback({ id: userId, name: `User${userId}` });
  }, 200);
}
function fetchUserPosts(userData, callback) {
  setTimeout(() => {
    console.log(`获取用户${userData.name}的帖子`);
    callback([
      { id: 1, title: `Post by ${userData.name}` },
      { id: 2, title: `Another post by ${userData.name}` }
    ]);
  }, 200);
}
function fetchPostComments(posts, callback) {
  setTimeout(() => {
    console.log(`获取帖子的评论`);
    callback([
      { id: 101, postId: 1, content: 'Great post!' },
      { id: 102, postId: 1, content: 'Thanks for sharing' }
    ]);
  }, 200);
}
// 回调地狱示例（多层嵌套的回调函数）
console.log('回调地狱示例开始:');
fetchUserData(1, (userData) => {
  fetchUserPosts(userData, (posts) => {
    fetchPostComments(posts, (comments) => {
      console.log('所有异步操作完成！');
      console.log('用户:', userData);
      console.log('帖子:', posts);
      console.log('评论:', comments);
      console.log('注意：这种多层嵌套的结构就是回调地狱，代码可读性很差');
    });
  });
});

多层嵌套会导致回调地狱，应尽量避免。

回调地狱问题

多层嵌套导致代码可读性差

思考：那怎么解决回调地狱问题呢？使代码更优雅可读性更强？