How does ‘call’ work in javascript?

by

Yehuda Katz has a good writeup of JavaScript’s Function#call method. His writeup should answer your question, and many followup questions besides.

When you call a function directly, using the general syntax:

var foo = function() {
  console.log("foo");
  return this;
};
foo(); // evaluates to `window`

Then this inside the function call is whatever this is outside the function call. By default, in the browser, this outside any function calls is window. So inside the function call as above, this is also by default window.

When you call a function using the method-call syntax:

var bar = {
  foo: function() {
    console.log("foo");
    return this;
  }
};
bar.foo(); // evaluates to `bar`

Then this inside the function call is the object to the left of the rightmost period: in this case, bar.

We can simulate this situation using call.

When you set up a function outside an object and want to call it with this inside the function call set to an object, you can:

var foo = function() {
  console.log("foo");
  return this;
}
var bar = { };
foo.call(bar); // evaluates to `bar`

You can use this technique to pass arguments as well:

var foo = function(arg1, arg2) {
  console.log("foo");
  return arg1 + arg2;
}
var bar = { };
foo.call(bar, "abc", "xyz"); // evaluates to `"abcxyz"`

More Related Contents:

  1. What is the difference between a function call and function reference?
  2. Passing an array as a function parameter in JavaScript
  3. Explanation of [].slice.call in javascript?
  4. Bind more arguments of an already bound function in Javascript
  5. Javascript inheritance: call super-constructor or use prototype chain?
  6. How to pass a callback as a parameter into another function
  7. JavaScript: Detect AJAX requests
  8. Formula to find week numbers from the Total [closed]
  9. How to filter object array based on attributes?
  10. Suppress Chrome ‘Failed to load resource’ messages in console
  11. How to do associative array/hashing in JavaScript
  12. Template literal inside of the RegEx
  13. What is the correct syntax of ng-include?
  14. JavaScript function order: why does it matter?
  15. Using the Haversine Formula in Javascript
  16. What browsers currently support JavaScript’s ‘let’ keyword?
  17. Override jQuery functions
  18. What happens if i reject / resolve multiple times in Kriskowal’s q?
  19. Hacked Site – SSH to remove a large body of javascript from 200+ files [closed]
  20. jQuery animated number counter from zero to value
  21. Understanding the ngRepeat ‘track by’ expression
  22. Converting latitude and longitude to decimal values
  23. Increase JavaScript Heap size in create-react-app project
  24. How can I handle errors in loading an iframe?
  25. Highcharts returning error 14
  26. CSS: Select element only if a later sibling exists
  27. Use JavaScript to intercept all document link clicks
  28. Event on a click everywhere on the page outside of the specific div
  29. Add multiple window.onload events
  30. Kyle Simpson’s OLOO Pattern vs Prototype Design Pattern

Leave a Comment