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

Question

I am learning AngularJS and have copied code this basic code from a tutorial (simplified/pseudo code to only include the parts relevant to this question).
The code works for me, but I am trying to better understand how the argument is being passed the the callback in the success method.

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

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

My question is, knowing that "normally" arguments are specifically passed into the functions when invoked ie:

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

foo('hello!');

How is the data argument being passed into the anonymous callback function? is it:

• Being "injected" by AngularJS?
• Does the javascript engine simply use variables on the local scope called data ?
• does the javascript engine look for a data property on the parent object if the success method?

Answer 1

TL;DR

We're just defining that anonymous function, not calling it!

Thus data is a function parameter, not a function argument.

---

Long version

Let's take this into little pieces.

success() is a function. It's chain-called after jobService.get() . So, whatever the jobService.get() call returns, we're calling the success function of that object (say returnedObject.success() ).

Back to success() itself. It can easily read other properties of its object ( returnObject from the example above). Since we're passing in the anonymous callback function as an argument, success can easily do something like (narrowing it down to basic JS):

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

which would actually call our anonymous function we passed in, and assign it whatever as data ( don't forget we're just defining that anonymous function, not calling it! ) . This makes data a function parameter, and it is basically a custom name that you use to represent and access what the success function passes into its callback function. You can use whatever you want there - this would still work perfectly fine:

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

Hope I didn't make this too complicated. I was trying to explain it step-by-step from the plain JS standpoint because you can easily read Angular's source to see what it does, so I thought you needed this simpler explanation.

---

Here's a basic example replicating what's going on there (inspect the JS source, see how the output is the same in all three cases):

 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>'; }) 

 span { color: green; } 

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

An example using an object, similar to what is done in your original code:

 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>'; }) 

 span { color: green; } 

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

Answer 2

Here's the relevant part in the source code:

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

        return promise;
 };

Read more on GITHUB .