Use of "this" as a function?

Question

I inherited some code with a line that I don't understand.

function updateQty () {
 obj.find('.inputAmount').html(qty);
 input.val(qty);
 $.each(change_actions, function() {
 this(qty);
 });
 }

What exactly is happening inside the .each function? I've never seen this(var) used this way before.

• dandavis: change_actions must be an array of functions. in plain js, it works like: function apply(v){return this(v);} [1,2,3].map(apply, RegExp)
• fardjad: Add console.log(this) or console.dir(this) to the callback body and see what this refers to.
• svillamayor: The $.each() function can be used to iterate over any collection, whether it is an object or an array. In the case of an array, the callback is passed an array index and a corresponding array value each time. (The value can also be accessed through the this keyword...) from here: api.jquery.com/jQuery.each
• EmmyS: @svillamayor - I have read the API. But it isn't documented at all in the way that this particular code is formatted. If you notice, the code is not (this).something; it's this(something).
• svillamayor: @EmmyS see above, I have written what the documentation says about

Answer 1

this inside of the $.each refers to the current objects that you are looping through.

The object must be a function in order to pass something to it.

Answer 2

the author setup their own events with bindings, so chances are change_actions are functions that are subscribed to run when something happens to the quantity.

Try something like this:

// initialize with a value
var actions = [
 function(x){ console.log('I see a new x: ' + x); }
];
// add actions "later"
actions.push(function(x){ console.log('Yup, a new x: ' + x); });
// Then execute them:
$.each(actions, function(){
 this(4);
});
// add another one still
actions.push(function(x){ console.log(x + ' looks new'); });
// re-iterate over them
// Then execute them:
$.each(actions, function(){
 this(5);
});

and the result:

// first iteration (only 2 subscribed events)
[15:56:50.030] "I see a new x: 4"
[15:56:50.030] "Yup, a new x: 4"
// second iteration (now we have 3, one was added later)
[15:56:50.030] "I see a new x: 5"
[15:56:50.030] "Yup, a new x: 5"
[15:56:50.030] "5 looks new" // <-- new subscription

think of it like the click event and how you can add subscriptions by binding to $('element').click(). every time a click happens, any subscribed events get triggered.

Answer 3

You can relate to the following example:

var change_actions = [
 function(x) { alert(x + 1); },
 function(x) { alert(x + 2); }
];
var qty = 5;
$.each(change_actions, function() {
 this(qty); 
});

JSFiddle: http://jsfiddle.net/fuyz2/