Why do I need setTimeout.bind(window)

Question

why do I need setTimeout.bind(window) in javascript? I saw code pieces like this, why do I need this? I can use directly setTimeout.

setTimerFunctions: SetTimerFunctions = {
    setInterval: setInterval.bind(window),
    setTimeout: setTimeout.bind(window),
  }

Answer 1

.bind

The first parameter for bind is the value of this inside the binded function. Passing window (or null, that would be equivalent) is a way to attach this to the global scope.

setTimeout

setTimeout is a method of window (window.setTimeout), then this inside that function should be window, but it is not needed in current browsers.

Remember that setTimeout(...) is equivalent to call window.setTimeout(...) because window is the global context.

Who is this?

An example:

var foobar = window.setTimeout;

This code could not work the way you would expect, it depends on the context, that we do not know.

For window.setTimeout, this would be the contextual this of this assignment. To force the reference to another this, you have to set the reference with bind:

var foobar = window.setTimeout.bind(window);

Except when assigning it from the global context, in that case the function will have this as window.

Your code without binding

In your exact case, if you do do not bind and just assign:

setTimerFunctions: SetTimerFunctions = {
    setInterval: setInterval,
    setTimeout: setTimeout,
  }

then this, from the setTimeout/setInterval point of view, will be every instance of the class where this code is declared (as it seems to be part of a class declaration in TypeScript).

Extra: function vs arrow function

Take a look at the documentation and differences between function and arrow functions =>, this issue is one of the reasons why arrow functions were added.

Answer 2

When method is called on obj, the context (this) for method is bound to obj. This is known as a dynamic call because the context changes (is dynamic) based on the object calling the method -

const obj = {
  method: function() {
    console.log('self?', this === obj)
    console.log('window?', this === window)
  }
}

obj.method() // <-- [obj] becomes [this] inside [method]
// self? true
// window? false

When a function is not called dynamically, it has no context, and instead this is bound to the global object, window -

const obj = {
  method: function() {
    console.log('self?', this === obj)
    console.log('window?', this === window)
  }
}

const fn = obj.method

fn() // <-- non-dynamic call, [this] binds to [window] as default context
// self? false
// window? true

---

To answer your question, in the case of window.setTimeout, binding doesn't really matter. Maybe window context was needed in the past, but it doesn't seem to be a requirement in modern browsers -

const test = function() {
  console.log(this === window)
}

window.setTimeout(test, 1000) // true
window.setTimeout.bind(window)(test, 1000) // true
window.setTimeout.bind(null)(test, 1000) // true

setTimeout(test, 1000) // true
setTimeout.bind(window)(test, 1000) // true
setTimeout.bind(null)(test, 1000) // true

Binding of the "callback" does matter. Notice a null context binds this to the global object, window -

const test = function () {
  console.log(this === window)
}

setTimeout(test, 1000) // true
setTimeout(test.bind(null), 1000) // true
setTimeout(test.bind({ a: 1 }), 1000) // false

Note however you cannot bind context of arrow functions; they always have a lexical this -

const test = () => console.log(this === window)

setTimeout(test, 1000) // true
setTimeout(test.bind({ a: 1 }), 1000) // true