Wednesday, 15 May, 2019 UTC

Javascript Function Call Example | Function​.prototype​.call() Tutorial

Javascript Function Call Example | Function​.prototype​.call() Tutorial

Summary

Javascript Function Call Example | Function​.prototype​.call() Tutorial is today’s topic. The call() method calls the function with the given this value and arguments provided individually. The call() allows for the method belonging to one object to be assigned and called for the different object.
Javascript Function Call Example
The call() provides a new value of this to the function/method. With a call, you can write the function once and then inherit it in the another object, without having to rewrite the function for a new object.
See the syntax of call() function below.
function.call(this, arg1, arg2, ...)
this parameter is optional. The value of this provided for a call to a function.
The arg1, arg2,..argN is the optional parameter which is the argument of the function.
See the following example.
// app.js

function KGF(hero, villain) {
  this.hero = hero;
  this.villain = villain;
  console.log('Hero is: ' + this.hero + ' and Villain is: ' + this.villain);
}

function Blockbuster(hero, villain) {
  KGF.call(this, hero, villain)
}

let movie = new Blockbuster('Rocky', 'Garuda');
Here, we have used the function prototype.
The function Blockbuster() works as a parameterized constructor, and it accepts two arguments, hero and villain.
Inside that function body, it will call the function KGF() and pass those two arguments and finally in the console we will see the values are printed.
Run the file using the following command.
node app
See the output.
 

Using a call to invoke a function and specifying the context for ‘this’

See the below example.
// app.js

function kgf() {
  console.log('Hero is: ' + this.hero + ' and Villain is: ' + this.villain);
}

let movObj = {
  hero: 'Rocky',
  villain: 'Garuda'
}

kgf.call(movObj);
In the example above, when we call kgf() function, the value of this will be bound to object movObj.
The output is the following.
 

Using a call to invoke a function and without specifying the first argument

See the code.
// app.js

let hero = 'Rocky';
let villain = 'Garuda';

function kgf() {
  console.log('Hero is: ' + this.hero + ' and Villain is: ' + this.villain);
}

kgf.call();
In the above code, we invoke the kgf() function without passing the first argument.
The output of the code is following.
 
Here, this does not refer to the global object. Hence, it will give us the undefined in the output. If you wrote above code in Javascript strict mode then also you will get the same result.
Using a call to invoke an anonymous function
See the below code.
// app.ja

let stars = [
  { actor: 'Yash', portrayed: 'Hero' },
  { actor: 'Ramachandra Raju', portrayed: 'Villain' }
];

for (var i = 0; i < stars.length; i++) {
  (function(i) {
    this.display = function() {
      console.log(this.actor +' is '+ this.portrayed);
    }
    this.display();
  }).call(stars[i], i);
}
In the above example, we create an anonymous function and use a call to invoke it on every object in an array. The primary purpose of the anonymous function here is to add a display function to every object, which can display the right index of an object in the array. Passing an object as this value was not strictly necessary, but is done for explanatory purpose.
See the below output.
Finally, Javascript Function Call Example | Function​.prototype​.call() Tutorial is over.
The post Javascript Function Call Example | Function​.prototype​.call() Tutorial appeared first on AppDividend.

... more @ appdividend.com

appdividend.com