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.
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.
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?
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:
Using a wrapperthis 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?
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
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.