简体   繁体   English

Javascript回调函数-如何填充参数

[英]Javascript callback function - how do the parameters get populated

I understand that callbacks are functions you pass as a parameter into another function, such as in the following simple example: 我知道回调是您作为参数传递给另一个函数的函数,例如以下简单示例:

function operation(a,b, callback) {
    return callback(a,b);
}

function add(a,b) {
    return a+b;   
}

function multiply(a,b) {
    return a*b;   
}

console.log(operation(5,4,add)); // 9
console.log(operation(5,4,multiply)); // 20

What confuses me greatly about callback functions is when they are used in chained function calls, such as the following: 使回调函数感到困惑的是在链接函数调用中使用回调函数,例如:

// Angular example
$http.get(...).then(function(req,res) {
    // some actions here
});

// JQuery example
$( "li" ).each(function( index ) {
    // some actions here
});

In both examples, how are the parameters in the anonymous function populated? 在两个示例中,匿名函数中的参数如何填充? Does this in any way relate to the callback logic I gave in the operation function example I gave or is this some other concept entirely? 这是否与我在操作函数示例中给出的回调逻辑有关,或者这完全是其他概念吗?

My best guess for the angular example is that the http promise returns an array object [req,res] and the function parameters are pulled from the array in sequential order. 对于有角度的示例,我的最佳猜测是http promise返回一个数组对象[req,res],并且函数参数按顺序从数组中拉出。

What is of specific interest to me is how I could define my own chained function call in this style. 我特别感兴趣的是如何以这种方式定义自己的链接函数调用。 How can I define something like: 我如何定义这样的内容:

myObject.performAction(function(param1, param2, param3) {
    // do stuff
});

If someone could give an example like that, it would be amazingly instructive. 如果有人可以给出这样的例子,那将是非常有启发性的。

The parameters are passed to callback function by the calling code - same as in your example return callback(a,b); 参数通过调用代码传递给回调函数-与示例中的方法相同return callback(a,b);

var myObject = {
  a: 1,
  b: 2,
  c: 3,
  performAction: function(callback) {
    callback(this.a, this.b, this.c);
  }
};

myObject.performAction(function(param1, param2, param3) {
    // do stuff
});

Based on Igor's answer, I came up with the following to mock the $http.get(...).then() syntax: 根据Igor的回答,我提出了以下模拟$ http.get(...)。then()语法的方法:

var myObject = {
    transform: function (value) {
        // Perform some logic based on the value parameter
        var squared = value*value;
        var cubic = value*value*value;
        return {
            a: squared,
            b: cubic,
            action: function(callback) {
              callback(this.a, this.b);   
            }       
        }
    }
};

myObject.transform(12).action(function(a,b) {
    console.log(a+b); // 1872
});

The idea is that in the transform function, you perform some logic on the value parameter so that a and b are derived from some calculations instead of just being hardcoded values. 这个想法是,在转换函数中,您对value参数执行一些逻辑,以便ab从某些计算中得出,而不仅仅是硬编码的值。 That way the callback in action becomes a lot more meaningful. 这样,回调的action就变得更加有意义。

This effectively abstracts the parameters a and b from the user in the anonymous function call in action . 这有效地抽象参数ab从在匿名函数调用用户action This is why these parameters have to be documented for the API call to myObject.transform.action . 这就是为什么必须对myObject.transform.action的API调用记录这些参数的原因。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM