0% found this document useful (0 votes)
4 views9 pages

this_in_JavaScript

Uploaded by

gsww8c5v6x
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
4 views9 pages

this_in_JavaScript

Uploaded by

gsww8c5v6x
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

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

You might also like