Gaurav Tikekar
JavaScript
Resolving the Mystery of
this in JavaScript
A Comprehensive Guide to Mastering the
'this' Keyword
Swipe to learn more
1/7
Understanding this
'this' in JavaScript refers to the execution context. It can be tricky!
Imagine a classroom. 'this' is like a student raising their hand, and
the teacher knows who's asking. In JavaScript, 'this' depends on
where and how a function is called.
example.js
// Imagine a JavaScript object representing a student
const student = {
name: "Mike",
introduce: function () {
console.log(`Hi, I'm ${this.name}`);
},
};
// Calling the introduce function
student.introduce(); // Output: Hi, I'm Mike
Swipe to learn more
2/7
Global & Function Context
In the global scope, 'this' refers to the global object (e.g., window in
browsers). Inside a function, 'this' takes on a different role. It's like
navigating between different rooms in a house.
example.js
console.log(this === window); // Output: true
function myFunction() {
console.log(this === window); // Output: true
myFunction();
Swipe to learn more
3/7
this in Object Methods
When 'this' is used within an object method, it becomes a self-
reference to the object itself. It's like having a mirror that reflects the
object's identity.
example.js
const car = {
brand: "Tesla",
start: function () {
console.log(this.brand + " is starting...");
},
};
car.start(); // Output: Tesla is starting...
Swipe to learn more
4/7
this with Arrow Functions
Arrow functions have a unique 'this' behavior. They maintain the
'this' context from their surrounding code. It's akin to having a GPS
that never loses track of your location.
example.js
const person = {
name: "Bob",
sayHi: () => {
console.log("Hi, I'm " + this.name);
// 'this' refers to the outer scope
},
};
person.sayHi(); // Output: Hi, I'm undefined
Swipe to learn more
5/7
this in Event Handling
Understanding 'this' is crucial when dealing with event handlers in
JavaScript. In event callbacks, 'this' often points to the DOM element
that triggered the event. It's like knowing who pressed a button in a
crowded room.
example.html
<button id="myButton">Click Me</button>
<script>
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
console.log(this.id); // Output: myButton
});
</script>
Swipe to learn more
6/7
this in Call, Apply, and Bind
JavaScript provides methods like call(), apply(), and bind() to wield
'this' explicitly. It's like having a remote control for 'this' behavior.
These tools are indispensable for advanced function manipulation.
example.js
const person = {
name: "Alice",
};
function sayHello(greeting) {
console.log(greeting + ", " + this.name);
sayHello.call(person, "Hi"); // Output: Hi, Alice
Swipe to learn more
7/7
this in Constructor Functions
Constructor functions are the backbone of object creation in
JavaScript. Inside a constructor, 'this' refers to the new object being
born. It's like the architect sketching the blueprint of a new building.
example.js
function Dog(name) {
this.name = name;
const myDog = new Dog("Buddy");
console.log(myDog.name); // Output: Buddy
Swipe to learn more
Thank you!
Follow me for more exciting content, like, comment,
and repost to share the knowledge!
Gaurav Tikekar
