setCallBack() Method in lightning

Question

Can anyone please explain significance of first parameter, which is "this", in setCallBack() method. Is it necessary to give first parameter as "this" or we can give other value as well. I know that setCallBack() method is called once the response is return from the server but I am curious about the parameter.

Answer 1

this in Javascript is...not the easiest thing in the world to explain, but you'll need to have at least some understanding of this to be able to understand its significance here. I'll give explaining it a shot, but I'm likely to be at least partially wrong (and guaranteed to be incomplete).

this is a keyword that acts as a reference to a particular instance of an object. Exactly what object (and instance thereof) it references depends on where it is called, and what called the thing that this is being called from (as someone used to other languages, the way Javascript handles this still feels weird and different to me). The gross oversimplification is that this allows you to access attributes and functions in a different scope than what this is defined in.

In Javascript, this starts to really behave strangely (well, at least to someone familiar with C++, Java, PHP, etc...) when callback functions get involved. That is, unless you explicitly bind this to the function call using call() or apply().

In regards to lightning, let's look at part of the example given by the Salesforce documention of a lightning client-side controller

({
    "echo" : function(cmp) {
        // create a one-time use instance of the serverEcho action
        // in the server-side controller
        var action = cmp.get("c.serverEcho");
        action.setParams({ firstName : cmp.get("v.firstName") });

        // Create a callback that is executed after 
        // the server-side action returns
        action.setCallback(this, function(response) {
            var state = response.getState();
            // This callback doesn’t reference cmp. If it did,
            // you should run an isValid() check
            // other code omitted
        });
})

If I'm not mistaken, the ({}) syntax is building an anonymous, self-executing Javascript object. The 'anonymous' bit means that once we leave the controller, we don't have any way to access that particular object instance.

When you set up a callback in Javascript, you register a particular function for the javascript interpreter (the thing that actually 'runs' the javascript) to be called at a later time. Without any additional information, the function that is run as part of the callback can only see and use data declared in the function's scope, anything passed to it, and whatever is available through the this parameter that is bound to the function at the time it is called.

If I had to take a guess, action.setCallback() is, behind the scenes, taking the first parameter and binding it to the this used by the function (specified as the second parameter).

In other words, using this as the first parameter allows you to access the data in the scope of the echo function of the controller which the callback function is registered from.

This allows you, in your callback function, to access the action variable and the cmp argument that was passed to echo(). In the documentation, this allows you to call cmp.isValid() (which is part of the code that I omitted).

You can put something else as the first parameter to action.setCallback(), but putting this as the first parameter is probably the only reasonable option.

Answer 2

There is basic documentation in the open source for Action and you may be able to get some insight by looking at that implementation and associated tests.

Also take a look at the comments on the question Scope of server callback in aura action.