javascript - 使用回调参数获取匿名函数中的值

Question

我遇到了以下回调函数代码。我理解代码，但我无法理解它。这看起来很违反直觉。

function greet(name,callback1){
    callback1(name)
}
greet("John Cena", function (somerandomName) {
    console.log(somerandomName);
    return someRandomName;
}); // Output is John Cena and undefined. 

这是我从代码中理解的:

1. 我们定义一个函数greet，它有两个参数name和callback1。那么我们说callback1的参数是name。我们在 greet 函数中没有返回任何内容，为什么？

2. 当我们调用 greet 函数时，我们将第二个参数作为匿名函数传递，其参数为 someRandomName。然后我们console.log(someRandomName)。 我添加了 return someRandomName，但是这个 return 不起作用，我得到了打印语句，后面跟着 undefined

有人可以用简单的话解释一下吗，这看起来很违反直觉。

Answer 1

所以我认为理解函数本身可以是参数很重要。

在此示例中，您传递一个字符串作为第一个参数，然后传递一个将该字符串作为参数的函数作为第二个参数。

函数并不总是需要返回一些东西。通常，函数可能会在 dom 上执行操作、获取数据、配置某些内容或更改预先存在的变量。当然，如果需要的话，您可以返回一些东西。

像你一样添加 return 并没有多大作用。为了实际返回名称值，您必须像这样编写原始函数。

function greet(name,callback1){
    return callback1(name)
}

那么你可以做这样的事情

var wrestler = greet("John Cena", function (somerandomName) {
    console.log(somerandomName);
    return somerandomName;
});

console.log(wrestler) // prints John Cena

这是一个奇怪的例子，因为它没有真正的目的。这样的事情可能会帮助您了解发生了什么。

    function greet(name, callback) {
      callback(name)
    }

    greet('John Cena', function(name){
      console.log('Hello ' + name) // prints Hello John Cena
    })

   OR return something and use it to manipulate dom

   function greet(name, callback) {
      return callback(name)
   }

   var greeting = greet('John Cena', function(name){
     return 'Hello ' + name
   })

   document.getElementById('message').innerHTML = greeting

   // somewhere in HTML...
   <h1 id='message'></h1>

无论如何，至少我们现在正在对第一个参数做一些事情。使用回调可以做的事情是无限的。

回调是 javascript 的一个基本功能。当函数的第一部分是异步的(例如调用 api 或数据库)时，它们会大量发挥作用。在这种情况下，第一部分将是对数据库的调用，并且在从初始调用中获取值之前不会触发回调。最近，由于 Promises，这种回调模式的使用较少，但回调仍然有用。

这是从前端到后端的通用 API 调用的示例。这通常使用 Fetch Api 或使用 Request 或 Axios 等库来完成。请记住，调用端点的第一个函数需要一些时间来执行和获取数据。在返回数据之前，回调不会触发。当然，后端会有一个函数将错误或数据发送回回调。我不想让事情变得过于复杂，而只是给出回调经常用于什么的想法。

function getDataFromBackend(endPoint, callback) {
  callback(error, data)
}

getDataFromBackend('/api/user', function(error, data) {
  if (error) {
    // handle error - show user error message in ui, etc
  }
   // do something with data - such as display welcome message to user, etc
})

我建议使用回调进行练习。我发现当我使用 Node，或者构建一个具有前端和后端的应用程序时，我会实现很多回调，因为发生了很多异步通信。希望我回答了您的问题。