JavaScript execution context (this)
There is a YouTube playlist that I did explaining the whole concept mentioned in this article, if you are that person who wants to watch and learn, please head on there.
#
The agenda- Talk about the execution context
- About
use strict
and globalthis
- Where to define a function
- Does location matter for functions
- Putting a function in an object literal
- Inside a method function
- How to invoke a function
- Normal function invocation
- Method invocation
- Explicit binding invocation
- How arrow functions differ
- Where to declare the arrow functions
- How to invoke them
- Conclusion
- Recap differences between using
use effect
and not - Different types of invocations
- Location of a normal function
- Arrow functions invocation and location
- Recap differences between using
this
#
What is The this
keyword refers to the object that a function gets based on how it is invoked. For arrow functions, it refers to the this
context that gets assigned to the enclosing function.
depends on
- whether you used
use strict
- how the function is invoked
- where the function is declared
- whether it is an arrow function or now
use strict
and this
#
About When you use this
in global scope, it refers to the window object in a browser. It refers to globalThis
when in Node.js environment.
But if you use strict mode (by putting use strict
at the beginning of your file), then you will not get window object when you use this
. In fact it points to undefined
.
#
Where to define a functionIn modern JavaScript development, we generally tend to put functions in their own files, thanks to the JavaScrpt ES6 modules, CommonJS pattern and many other techniques that work towards using per-file concept.
But we are not touching the module system or the import
and export
feature of ES6. In this series, we are only concerned about the question of whether a function is declared outside another function or not.
Remove duplicate function declaration:
Location does not matter when it comes to using the this
context:
invoking a member method without the object
Putting a function inside a method
#
Ways to invoke a functionnormal invocation
method invocation
explicit binding
using call or apply
call vs apply
#
Fixing sub-function problemthe problem
using scope
using explicit binding
this
#
How arrow functions differ from normal functions regarding We know normal functions take the this
context based on how they are invoked and not based on where they are declared.
Arrow functions take the this
context based on where they are declared and not based on how they are invoked.
#
What if we declare in a functionNow the arrow function totally obeys the enclosing scope's this
context because it is declared inside it.
#
visiting our old examplethis fixes the problem of having functions inside methods of an object. you may use arrow functions.
#
Conclusion- Declare normal functions anywhere, just not inside the object methods
- Use arrow functions for functions inside methods
- You can invoke normal functions in three ways: normal way, as an object method and by explicitly binding
- Arrow functions do not care how you invoke them, all they care is where they are declared.
- Use
use strict
to avoid accidentally putting stuff in the global context (window or globalThis)