+ 30

Why am I able to access the global “this” from a function when I pass it to setInterval as a parameter?

I have the following code: ‘use strict’; this.age = 20; function printAge(){ console.log(this.age); } setInterval(printAge, 2000); //the output is 20 printAge(); // the output is nothing

2nd May 2018, 11:21 PM
Joan
Joan - avatar
12 Answers
+ 44
Hi Joan You should not use "this" in non constructor declarations as it can cause unintended results. If you want to use a global variable, define it with let, and leave out the "this" in your console.log "this" always refers to the call site, ie where it's being called from, not scope. setInterval is a method of Window, ie Window.setInterval and not a function, so "this" inherits from Window and technically printAge runs in the Window context when called via setInterval but not when called directly in strict mode, as strict prevents implicit coercion of "this" to the global object. As the window object is undefined in strict mode you need to explicitly pass it in as the execution context if you want to use printAge. Use "call" to do this. printAge.call(window);
4th May 2018, 8:48 PM
Mike Choy
Mike Choy - avatar
+ 10
Joan Tua The 'use strict' line sets the JavaScript parser into strict mode which enforces many more rules for tighter, secure, and more consistent scripting behavior. One of the rules involves how the "this" keyword is treated within functions in strict mode. Previously, in default mode, as it would be referred to when not in strict mode, the "this" keyword is automatically bound to the global Window object when the function is not already explicitly bound to another object context. This automatic binding to the global Window object no longer happens in strict mode functions. Rather, the new default behavior is "this" will be undefined in unbound functions. This works in the first call because printAge() is likely being bound to the global Window object context from within the setInterval() function. To get your code to work with 'strict mode', you can change your last line to: printAge.call(this); This will bind the function to the global Window object. Hopefully, this explanation makes sense.
8th May 2018, 2:21 AM
David Carroll
David Carroll - avatar
+ 7
Mike Choy... The context of printAge() called by setInterval() is actually [object Window]. Otherwise, the first call would have caused an error.
8th May 2018, 2:30 AM
David Carroll
David Carroll - avatar
+ 6
@David Carrol you are correct, even though printAge() is called from setInterval, Ive been reminded that setInterval is a method of Window, ie Window.setInterval and not a function, so "this" inherits from Window and technically runs in the Window context, thanks for correction, Ive updated the words. The OP was asking why when in "strict mode" the printAge call works when called via setInterval but not when called directly as it appears that it should also be in "strict mode"? I believe the above explains it.
8th May 2018, 10:16 AM
Mike Choy
Mike Choy - avatar
+ 1
Put all that into a function and it will also be solved, but it is not right (() => { this.age = 20 function printAge () { console.log(this.age) } setInterval(printAge, 2000) })()
7th May 2018, 9:11 PM
Carlos Vesga Salas
Carlos Vesga Salas - avatar
0
minsa
8th May 2018, 10:32 AM
Minsa
Minsa - avatar
0
sorry guys, am yet to catch up with you. thanks
8th May 2018, 1:04 PM
Kennedy Masava
Kennedy Masava - avatar
0
I need an online java diploma course pls
8th May 2018, 1:22 PM
EmmanuelOwusu
EmmanuelOwusu - avatar
0
yes
8th May 2018, 2:10 PM
Navneet Singh
Navneet Singh - avatar
0
in which programming language is "this"?
8th May 2018, 2:50 PM
Yab*
Yab* - avatar
0
all object-oriented programming languages
9th May 2018, 2:13 AM
Carlos Vesga Salas
Carlos Vesga Salas - avatar
0
thank you
12th May 2018, 3:33 AM
Minsa
Minsa - avatar