JavaScript回调函数实战指南：从基础到任意函数调用的灵活运用

1次阅读

共计 2721 个字符，预计需要花费 7 分钟才能阅读完成。

简单来说，回调函数 就是作为参数传递给另一个函数的函数，并在那个函数执行完后被调用。这个概念在 JavaScript 中特别重要，因为 JS 是单线程语言，很多操作（比如读取文件、网络请求）都需要异步执行，这时候回调就派上用场了。

举个例子：

function fetchData(callback) {
  // 模拟异步操作
  setTimeout(() => {const data = {name: 'John', age: 30};
    callback(data);
  }, 1000);
}

fetchData(function(data) {console.log('收到数据:', data);
});

当多个异步操作需要顺序执行时，新手常会写成这样：

doSomething(function(result) {doSomethingElse(result, function(newResult) {doThirdThing(newResult, function(finalResult) {console.log('最终结果:', finalResult);
    });
  });
});

这种层层嵌套的代码被称为 ” 回调地狱 ”，难以阅读和维护。

很多新手忘记处理回调中的错误：

// 不好的做法
fs.readFile('file.txt', function(err, data) {console.log(data);
});

// 正确的做法
fs.readFile('file.txt', function(err, data) {if (err) {console.error('读取文件出错:', err);
    return;
  }
  console.log(data);
});

当回调函数作为参数传递时，它的 this 指向可能会改变：

const obj = {
  name: 'My Object',
  doSomething: function(callback) {callback();
  },
  callback: function() {console.log(this.name); // 这里会输出 undefined
  }
};

obj.doSomething(obj.callback); // 上下文丢失了

有时候我们需要让现有的同步函数也支持回调方式调用。下面是一个通用封装方法：

function callbackify(fn) {return function(...args) {const callback = args.pop();
    if (typeof callback !== 'function') {throw new Error('最后一个参数必须是回调函数');
    }

    try {const result = fn.apply(this, args);
      callback(null, result);
    } catch (err) {callback(err);
    }
  };
}

// 使用示例
function syncAdd(a, b) {return a + b;}

const asyncAdd = callbackify(syncAdd);

asyncAdd(2, 3, function(err, result) {if (err) {console.error('出错:', err);
    return;
  }
  console.log('结果是:', result); // 输出 5
});

过多的回调嵌套会导致调用堆栈变深，可能影响性能。

闭包中的回调函数如果引用外部变量，可能导致内存无法释放：

function leakyFunction() {const bigData = new Array(1000000).fill('*');

  setInterval(function callback() {console.log(bigData.length); // 回调保持了 bigData 的引用
  }, 1000);
}

解决方案是适时清除回调：

function safeFunction() {const bigData = new Array(1000000).fill('*');
  const intervalId = setInterval(function() {console.log(bigData.length);
  }, 1000);

  // 适时清除
  setTimeout(() => {clearInterval(intervalId);
  }, 5000);
}

Node.js 社区约定回调函数的第一个参数是错误对象：

function readFile(callback) {fs.readFile('file.txt', function(err, data) {if (err) return callback(err);
    callback(null, data);
  });
}

现代 JavaScript 中，可以结合使用 Promise 和回调：

function fetchData() {return new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {const data = {name: 'John'};
      resolve(data);
    }, 1000);
  });
}

// 既可以用 Promise 方式
fetchData().then(data => console.log(data));

// 也可以用回调方式
fetchData().then(data => callback(null, data),
  err => callback(err)
);

使用命名函数代替匿名函数可以减少嵌套：

// 不好的做法
getData(function(data) {processData(data, function(processed) {saveData(processed, function() {console.log('完成');
    });
  });
});

// 更好的做法
function handleData(data) {processData(data, handleProcessed);
}

function handleProcessed(processed) {saveData(processed, handleSaved);
}

function handleSaved() {console.log('完成');
}

getData(handleData);

虽然现在有了 async/await，但回调函数仍然在以下场景中很有价值：