Referencing “this” inside setInterval/setTimeout within object prototype methods [duplicate]

by

Unlike in a language like Python, a Javascript method forgets it is a method after you extract it and pass it somewhere else. You can either

Wrap the method call inside an anonymous function

This way, accessing the baz property and calling it happen at the same time, which is necessary for the this to be set correctly inside the method call.

You will need to save the this from the outer function in a helper variable, since the inner function will refer to a different this object.

var that = this;
setInterval(function(){
    return that.baz();
}, 1000);

Wrap the method call inside a fat arrow function

In Javascript implementations that implement the arrow functions feature, it is possible to write the above solution in a more concise manner by using the fat arrow syntax:

setInterval( () => this.baz(), 1000 );

Fat arrow anonymous functions preserve the this from the surrounding function so there is no need to use the var that = this trick. To see if you can use this feature, consult a compatibility table like this one.

Use a binding function

A final alternative is to use a function such as Function.prototype.bind or an equivalent from your favorite Javascript library.

setInterval( this.baz.bind(this), 1000 );

//dojo toolkit example:
setInterval( dojo.hitch(this, 'baz'), 100);

More Related Contents:

  1. I would like to ask how to explain this (javascript function)
  2. What’s the difference between using “let” and “var”?
  3. Javascript function scoping and hoisting
  4. Define a global variable in a JavaScript function
  5. JavaScript closures vs. anonymous functions
  6. Assigning prototype methods *inside* the constructor function – why not?
  7. Function declarations inside if/else statements?
  8. What is the correct term for variable shadowing in JavaScript?
  9. JavaScript variable binding and loop
  10. Set “this” variable easily?
  11. array.length is zero, but the array has elements in it [duplicate]
  12. Will const and let make the IIFE pattern unnecessary?
  13. What does this “(function(){});”, a function inside brackets, mean in javascript? [duplicate]
  14. Why do catch clauses have their own lexical environment?
  15. Why is the variable `closed` being logged as `false`, if I define it globally as `0`?
  16. What’s the difference between a global variable and a ‘window.variable’ in JavaScript?
  17. How can I return a variable from a $.getJSON function
  18. Global JavaScript Variable Scope: Why doesn’t this work?
  19. functions inside or outside jquery document ready
  20. javascript variable scope in the IF statement
  21. JavaScript Variable Scope [duplicate]
  22. What happens when JavaScript variable name and function name is the same?
  23. Why Is `Export Default Const` invalid?
  24. Why does IE nuke window.ABC variables?
  25. Passing a global variable to a function
  26. Why does .then() chained to Promise.resolve() allow const declaration to be reassigned?
  27. Function not calling within an onclick event
  28. Javascript scope addEventListener and this
  29. How to set javascript private variables in constructor?
  30. Programmatically accessing function scope using Chrome DevTools console

Leave a Comment