SetTimeout object method

I read lot of topics here, on stackoverflow, etc. about setTimeout and this binding.
Anyway there’s something I need to better understand.
I start with below example.

let myObj = {
  p: 'my property',
  m() { console.log(this.p); }
}

setTimeout(myObj.m, 100);  // undefined
setTimeout(function() {myObj.m()}, 100); // 'my property'

What I read from DOC is

Code executed by setTimeout() is called from an execution context separate from the function from which setTimeout was called. The usual rules for setting the this keyword for the called function apply, and if you have not set this in the call or with bind, it will default to the window (or global) object. It will not be the same as the this value for the function that called setTimeout.

And a way to fix using function wrapper

A common way to solve the problem is to use a wrapper function that sets this to the required

as I did in the last statement of the snippet.

My doubt: why passing a method by obj to setTimeout without wrapping it doesn’t work? Passing object.method should set this to the object anyway. But maybe the direct setTimeout invocation overrides it, forcing this to be window.

I thought that maybe the use of a wrapper function, creates a new underlying scope that can refer to myObj by closure, and subsequently calling setTimeout(myObj.m(), 100) sets the right this.

Thank in advance

You basically answered this question with the quote from the documentation you pasted above. Are you asking for that quote to be explained further because you don’t quite understand it, or are you asking why JS was created to behave this way in the first place?

Hi,

Yes, i think i didn’t focused it very well.
In particular I don’t understand what differs passing a wrapper function as argument to setTimeout instead passing the method directly.

I’ll try to better explain.
The DOC says that when you call setTimeout the function will set this to global object if you don’t set or bind it in other way. But what i don’t understand:

let myObj = {
  p: 'my property',
  m() { console.log(this.p); }
}

setTimeout(function() {
   console.log(this); //  window!!
   myObj.m();  // 'my property'
 }, 100);

Using a wrapper this still refers to window as it should be when i call setTimeout (for what DOC says).
I don’t understand what’s happening about the scope: if this refers to window like before, why directly passing method setTimeout(myObj.m, 100) won’t work?

Thank you very much

I try to argument more my confusion.
This is the DOC example about (more complex but basically similar to my previous code).

const myArray = ['zero', 'one', 'two'];
myArray.myMethod = function (sProperty) {
  console.log(arguments.length > 0 ? this[sProperty] : this);
};

setTimeout(myArray.myMethod, 1.0*1000); // prints "[object Window]" after 1 second
setTimeout(myArray.myMethod, 1.5*1000, '1'); // prints "undefined" after 1.5 seconds

Fix by wrapper function

setTimeout(function(){myArray.myMethod()}, 2.0*1000); // prints "zero,one,two" after 2 seconds
setTimeout(function(){myArray.myMethod('1')}, 2.5*1000); // prints "one" after 2.5 seconds

What is confusing me more: why does suggest the use of wrapper , inside which it directly invoke method, if directly invoking the method as setTimeout argument works anyway?

setTimeout(myArray.myMethod(), 1.0*1000); // prints "zero,one,two" after 1 second
setTimeout(myArray.myMethod('1'), 1.5*1000, '1'); // prints "one" after 1.5 seconds

Which are backsides of not using a wrapper?

Thank you.

I believe it is explained in You Don’t Know JS: this & Object Prototypes Chapter 2: this All Makes Sense Now! under the “Implicitly Lost” section.

The example given is equivalent to this:

let myObj = {
  p: 'my property',
  m() {
    console.log(this.p);
  },
};

myObj.m(); // 'my property'

let m = myObj.m;
m(); // undefined

function wrapper() {
  myObj.m();
}

m = wrapper;
m(); // 'my property'

setTimeout(myObj.m, 100); // undefined
setTimeout(wrapper, 100); // 'my property'

Basically, as I understand it, setTimeout is passed the function (method) and in the parameter assignment inside setTimeout this is lost. The wrapped function however simply calls the method.

1 Like

Thank you very much,
you’re great answer in addition to the reference you linked has cleared my doubts.

Thank you again