In this chapter, we will learn about the this keyword in JavaScript. The this keyword is a fundamental concept that refers to the object it belongs to. We will cover:
- What is
this? - Global Context
- Object Method
- Constructor Function
- Class Method
- Arrow Functions
- Event Handlers
- Simple Programs using
this
What is this?
The this keyword refers to the object it belongs to. Its value depends on where it is used:
- In a method:
thisrefers to the owner object. - Alone:
thisrefers to the global object (in browsers, thewindowobject). - In a function:
thisrefers to the global object. - In an event:
thisrefers to the element that received the event. - In a class constructor:
thisrefers to the newly created instance.
Global Context
When used alone or in a function in non-strict mode, this refers to the global object.
Example
console.log(this); Output:
Window { ... } // In a browser environment Object Method
When this is used in an object method, it refers to the owner object.
Example
let person = { firstName: "Amit", lastName: "Kumar", getFullName: function() { return `${this.firstName} ${this.lastName}`; } }; console.log(person.getFullName()); Output:
Amit Kumar Constructor Function
In a constructor function, this refers to the newly created instance.
Example
function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } let person = new Person("Amit", "Kumar"); console.log(person.firstName); console.log(person.lastName); Output:
Amit Kumar Class Method
In a class method, this refers to the instance of the class.
Example
class Person { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } getFullName() { return `${this.firstName} ${this.lastName}`; } } let person = new Person("Amit", "Kumar"); console.log(person.getFullName()); Output:
Amit Kumar Arrow Functions
In arrow functions, this retains the value from the enclosing lexical context. Arrow functions do not have their own this.
Example
let person = { firstName: "Amit", lastName: "Kumar", getFullName: function() { let arrowFunction = () => `${this.firstName} ${this.lastName}`; return arrowFunction(); } }; console.log(person.getFullName()); Output:
Amit Kumar Event Handlers
In event handlers, this refers to the element that received the event.
Example
<button id="myButton">Click me</button> <script> document.getElementById("myButton").addEventListener("click", function() { console.log(this); // Refers to the button element }); </script> Output:
<button id="myButton">Click me</button> Simple Programs using this
Program 1: Using this in Object Methods
let car = { make: "Toyota", model: "Camry", displayInfo: function() { return `${this.make} ${this.model}`; } }; console.log(car.displayInfo()); Output:
Toyota Camry Program 2: Using this in Constructor Functions
function Animal(type, sound) { this.type = type; this.sound = sound; } Animal.prototype.makeSound = function() { return `${this.type} goes ${this.sound}`; }; let dog = new Animal("Dog", "Bark"); console.log(dog.makeSound()); Output:
Dog goes Bark Program 3: Using this in Class Methods
class Rectangle { constructor(width, height) { this.width = width; this.height = height; } getArea() { return this.width * this.height; } } let rect = new Rectangle(10, 5); console.log(rect.getArea()); Output:
50 Program 4: Using this in Arrow Functions
let person = { name: "Rahul", introduce: function() { let arrowFunction = () => `Hi, my name is ${this.name}`; return arrowFunction(); } }; console.log(person.introduce()); Output:
Hi, my name is Rahul Program 5: Using this in Event Handlers
<!DOCTYPE html> <html> <head> <title>Event Handler Example</title> </head> <body> <button id="clickMeButton">Click me</button> <script> document.getElementById("clickMeButton").addEventListener("click", function() { console.log(this); // Refers to the button element }); </script> </body> </html> Output:
<button id="clickMeButton">Click me</button> Conclusion
In this chapter, you learned about the this keyword in JavaScript, including its different contexts and how it behaves in various scenarios such as global context, object methods, constructor functions, class methods, arrow functions, and event handlers. We also provided various use cases with simple programs to demonstrate the usage of this. Understanding the this keyword is crucial for writing effective and maintainable JavaScript code.