Question

I’m learning about the call()-method in Javascript and trying to understand this ex.
Now my question are:

• Why I can’t see anything in the console(browser); the console.log()-method; is not
  working?
• How is this anonymus-func working?

Thanks for yr time!

var animals = [
  {species: 'Lion', name: 'King'},
  {species: 'Whale', name: 'Fail'}
];

for (var i = 0; i < animals.length; i++) {
  (function (i) {
    this.print = function () {
      console.log('#' + i  + ' ' + this.species + ': ' + this.name);
    }
  }).call(animals[i], i); // I cant understand this anonymus func ? :(
}

Answer 1

Try adding this code to the end of your example:

animals[0].print();

The anonymous function is invoked using call which is used to set the this context within the body of the function. So when the anonymous function uses this, it is actually getting a referency to the current animal passed in from outside.

The function augments the this object (which is the currnet animal) with a print method. This alone will not display anything in the console. It merely means that the print method has been added to the animal object. But you can then access this method of the object with the code above.

Unfolding the loop, the code is effectively doing the following:

animals[0].print = function () {
    console.log('#' + 0  + ' ' + this.species + ': ' + this.name);
}

animals[1].print = function () {
    console.log('#' + 1  + ' ' + this.species + ': ' + this.name);
}

The key to understanding this example is to realise that without the use of call, the thisreference in the anonymous function would automatically refer to the global window object. It would extend the windowobject with a print method, which obviously isn’t what we want.

The next step example would be to obtain the same result by adding a printmethod to the object prototype. (This may well be the next example in your book)