This content originally appeared on Bits and Pieces - Medium and was authored by Aman
In JavaScript, “this” will refer to the execution context for that specific call.
What does that mean?
When we invoke a function, an execution context is created. This execution context is basically a record of information that is important to our function. It lets us know where the function was called from, the parameters that were passed etc. One of the most important properties the record saves is ‘this’ reference which will be used during the function’s execution.
But what will ‘this’ reference?
Well, in order to determine this, we will need to find exactly where our function was called from. Once we find the location, there are some rules that are applicable.
Rules:
1. New binding
When a function is invoked with the new keyword, ‘this’ will reference the newly created object:
2. Implicit binding
When a function is invoked with the dot notation, ‘this’ will reference the object to the left of our dot:
3. Explicit binding
Uses call, apply and bind functions to explicitly provide value of ‘this’. These methods allow a method that was defined for one object, to be assigned and called by another object.
Thus explicitly providing the value of ‘this’:
The main differences between the three aforementioned methods used for explicit binding are the following:
- In order to use call, pass the object and additional parameters as strings
- In order to use apply, pass the object and additional parameters inside of an array.
- The bind function will create a new function whose ‘this’ value can be set to the value providing in the function call.
4. Default binding
Undefined in strict mode, otherwise the global object — even if used within a function:
5. Event Listeners
When using event listeners, the object being listened to will be bound to ‘this’:
6. Lexical binding with arrow functions
Arrow functions bind this lexically. Since they don’t have their own context in which they execute, ‘this’ get inherited from the parent function:
And there we have it! Hopefully you’ll now feel more prepared to answer any questions related to the this keyword in JavaScript. Was there anything I missed? If so, be sure to let me know in the comments.
Build with independent components for speed and scale
Instead of building monolithic apps, build independent components first and compose them into features and applications. It makes development faster and helps teams build more consistent and scalable applications.
Bit offers a great developer experience for building independent components and composing applications. Many teams start by building their Design Systems or Micro Frontends, through independent components.
Give it a try →
Learn More
- Building a React Component Library — The Right Way
- 7 Tools for Faster Frontend Development in 2022
- The Composable Enterprise: A Guide
JavaScript Interview Question: Explain the ‘this’ Keyword was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Aman
Aman | Sciencx (2022-03-10T09:14:37+00:00) JavaScript Interview Question: Explain the ‘this’ Keyword. Retrieved from https://www.scien.cx/2022/03/10/javascript-interview-question-explain-the-this-keyword/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.