TL; DR

Question

我正在学习AngularJS并从教程中复制了这段基本代码的代码（简化/伪代码只包含与此问题相关的部分）。
代码适用于我，但我试图更好地理解参数是如何通过success方法中的回调传递的。

// jobService object
var jobService = {         
        get : function() {
         return $http.get( 'some/api/url' );
        }
    };

jobService.get().success(function (data) {
        $scope.jobs = data;
    });

我的问题是，知道“正常”参数在被调用时特别传递给函数，即：

function foo(arg1) {
     alert(arg1); //alerts Hello!
};

foo('hello!');

如何将data参数传递给匿名回调函数？它是：

由AngularJS“注入”？
javascript引擎是否只在名为data的本地范围内使用变量？
如果data方法，javascript引擎会在父对象上查找success属性吗？

Answer 1

TL; DR

我们只是定义匿名函数，而不是调用它！

因此data是函数参数，而不是函数参数。

长版

让我们把它分成几块。

success()是一个功能。它在jobService.get()之后被称为链。因此，无论jobService.get()调用何时返回，我们都会调用该对象的成功函数（例如returnedObject.success()）。

返回success()本身。它可以轻松读取其对象的其他属性（上例中的returnObject）。由于我们将匿名回调函数作为参数传递，success可以轻松地执行某些操作（将其缩小为基本JS）：

function success(callback) {
    var whatever = "I'm passing this to the callback function";
    callback(whatever);
}

实际上会调用我们传入的匿名函数，并将其whatever指定为data（不要忘记我们只是定义匿名函数，而不是叫它！）。这使得data成为一个函数参数，它基本上是一个自定义名称，用于表示和访问success函数传递给其回调函数的内容。你可以随心所欲地使用它 - 这仍然可以完美地运行：

jobService.get().success(function (somethingElse) {
    $scope.jobs = somethingElse;
});

希望我没有让这太复杂。我试图从简单的JS角度逐步解释它，因为你可以轻松阅读Angular的源代码来查看它的作用，所以我认为你需要这个更简单的解释。

这里有一个基本的例子来复制那里发生的事情（检查JS源，看看在所有三种情况下输出是如何相同的）：

＆＃13;

var debug = document.getElementById('debug');

function success(callback) {
  var whatever = 'hello world';
  debug.innerHTML += '<br>success function called, setting parameter to <span>' + whatever + '</span><br>';
  callback(whatever);
}

function callbackFunction(someParameter) {
  debug.innerHTML += '<br>callbackFunction called with parameter <span>' + someParameter + '</span><br>';
}

success(callbackFunction);

// anon function
success(function(val) {
  debug.innerHTML += '<br>anonymous callback function called with parameter <span>' + val + '</span><br>';
})

// anon function 2
success(function(anotherVal) {
  debug.innerHTML += '<br>second anonymous callback function called with parameter <span>' + anotherVal + '</span><br>';
})

＆＃13;

span {
  color: green;
  }

＆＃13;

<div id="debug"></div>

＆＃13;

使用对象的示例，类似于原始代码中的操作：

＆＃13;

var debug = document.getElementById('debug');

var myObject = {
  whatever: 'hello world',
  success: function(callback) {
    debug.innerHTML += '<br>success function called, fetching object property and setting the parameter to <span>' + this.whatever + '</span><br>';
    callback(this.whatever);
  },
  modifyMe: function() {
    debug.innerHTML += '<br>object property modified<br>';
    this.whatever = 'another world';
    return this; // this is crucial for chaining
  }
}


// anon function callback
myObject.success(function(val) {
  debug.innerHTML += '<br>anonymous callback function called with parameter <span>' + val + '</span><br>';
})

debug.innerHTML += '<br><hr>';

// chaining - calling a success function on a modified object
myObject.modifyMe().success(function(val) {
  debug.innerHTML += '<br>anonymous callback function called with modified parameter <span>' + val + '</span><br>';
})

＆＃13;

span {
  color: green;
  }

＆＃13;

<div id="debug"></div>

＆＃13;

Answer 2

以下是源代码中的相关部分：

 promise.success = function(fn) {
        promise.then(function(response) {
          fn(response.data, response.status, response.headers, config);
        });

        return promise;
 };

详细了解GITHUB。

如何将参数传递给匿名回调函数？

2 个答案:

TL; DR

长版