学习回调函数:尝试理解不同形式的回调

Learning CallBack Function: Trying to understand different forms of callback

本文关键字：回调 函数 学习      更新时间：2023-09-26

我正在尝试学习回调，在我阅读雄辩的JS之后，它引入了回调作为这种格式，我不熟悉，它没有解释它是如何工作的:

var merge = function(array1, array2, callback){  
  var result = [];
  for (var i = 0; i < array1.length; i++) {
   result[i] = array1[i] + array2[i];
  };
callback(result) 
};
merge([1, 2, 3, 4], [5, 6, 7, 8], function(merged) {console.log(merged)});

但是在我从代码学校学习之后，我试着把格式重写成这样:

var merge = function(array1, array2, callback){  
  var result = [];
  for (var i = 0; i < array1.length; i++) {
   result[i] = array1[i] + array2[i];
  };
return function() {console.log(result)}
};
merge([1, 2, 3, 4], [5, 6, 7, 8])();

我不确定我理解回调的方式是否正确，但我的重写工作并显示相同的结果…谁能给我解释一下第一次回电是怎么回事?

在第二段代码中，函数merge返回一个打印数组的函数。

因此，merge([1, 2, 3, 4], [5, 6, 7, 8])();行调用函数merge并执行返回的函数

我不认为这是一个回调。

在第一个代码中，函数merge接收一个函数作为它的第三个参数，并执行这个函数，传递给它一个数组(行callback(result))

这是我对回调函数的理解:调用merge函数的人可以自由地传递任何函数给它，因此，可以自由地在merge函数计算的数组上执行任何代码。

例如，考虑函数merge的第一个定义，可以这样做

merge([1, 2, 3, 4], [5, 6, 7, 8], function(merged) { alert(merged[0]) });

在警告窗口中显示结果数组的第一个元素。

同样，第一个结构是异步的，而第二个不是。

认为它是一个"回调"可能是令人困惑的部分。在javascript中，函数不需要严格地成为函数。它们可以是变量或参数，正如您在示例中看到的那样。

这些都将产生相同的结果:

// as a variable
var myVariableFn = function() {
  console.log('executed function');
};
myVariableFn();
// as a named function
function myFn() {
  console.log('executed function');
}
myFn();
// as an anonymous function
(function() {
  console.log('executed function');
})();
// as a reference to another function
var myRefToFn = myFn;
myRefToFn();
// as a reference to the variable function
var myRefToVariableFn = myVariableFn;
myRefToVariableFn();

在你的第一个例子中，它工作是因为你传递了一个匿名函数作为最后一个参数，因此它被分配给callback。既然您已经为callback指定了一个函数，那么您可以像执行任何其他函数一样，通过输入callback()来执行它。

它实际上归结为一个简单的事实，即你在传递函数，这比试图定义什么是"回调"更容易理解。

因为你只是把这些传递给另一个函数，你可以用同样的方式使用它们作为一个"回调"，像这样:

function useCallback(callbackParam) {
  callbackParam();
};
useCallback(myVariableFn);
useCallback(myFn);
useCallback(function() {
  console.log('executed function');
});
useCallback(myRefToFn);
useCallback(myRefToVariableFn);
相关文章：