javascript - 了解带参数的回调

Question

我对下面的代码有点困惑。我不明白的部分是结果参数如何等于 callback(x+y) 的结果。有人可以解释这一点，或许还可以解释执行步骤的顺序吗？

function add(x,y, callback){
  callback(x+y)
}

add(3,4, function(result){
  console.log(result) //logs out 7
})

我知道3+4是7，但是我不是很明白result参数是怎么得到这个7的值的。

Answer 1

很好的问题，一旦你理解了这一点，它就会为 Javascript 打开很多大门。

让我们看看没有回调会发生什么:

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

add(1, 2) // returns 3

当您返回 x + y 时，这就是您从函数返回的内容。

现在让我们介绍一个新函数，但不是作为回调。

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

function logResult(result) {
  console.log(result)
}

var result = add(1, 2) // 3
logResult(result) // outputs "3"

如您所见，我们调用add，获取结果，然后将其传递到logResult，后者将其输出到控制台。

如果我们在 add 的第三个参数中将 logResult 作为函数传递，然后我们在 add 中调用它，并使用 结果，实际上是同一件事!

function add(x, y, callback) {
  var result = x + y;

  // we're calling the function that gets passed in
  // which is `logResult`
  callback(result)
}

function logResult(result) {
  console.log(result)
}

add(x, y, logResult) // outputs "3"

现在我们回到您的示例，它将所有内容减少到所需的最少代码:

function add(x, y, cb) {
  cb(x + y);
}

add(1, 2, function (result) {
  console.log(result)
}); // outputs "3"

在 JS 中，您可以将函数传递给其他函数。接收另一个函数作为参数的函数可以调用它。这就是你在这里所拥有的。您还可以进一步减少它:

function add(x, y, cb) {
  cb(x + y)
}

add(1, 2, console.log) // outputs "3"
add(1, 2, console.error) // outputs "3" in error format