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，但我没有特别理解结果参数如何得到这个7值。

Answer 1

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

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

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

add(1, 2) // returns 3

当你return 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，然后将其输出到控制台。

如果我们将logResult作为函数传递给add的第三个参数，然后我们在add内使用result调用它，那实际上是同样的事情！

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

Answer 2

使用以下参数调用add函数：

x = 3
y = 4
callback = function(result) { console.log(result) }

该函数总和x+y。这会产生7。

然后用这个参数调用callback函数：

result = 7

该功能在控制台中记录7

Answer 3

此代码：

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

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

与此完全相同：

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

function output(result){
  console.log(result);
}

add(3,4, output);

因此，当调用add(3,4,output)时，函数add需要3个参数，

为参数x分配值3
为参数y分配值4
为参数callback分配了一个指向函数output

由于上面调用中的callback是指向函数output的指针，当您执行callback(x+y)时，您实际上正在调用output(3+4)。

没什么特别的。它只是javascript将函数视为第一类值的结果。

了解带参数的回调

3 个答案: