📖 The <code>this</code> Keyword in JavaScript Classes

In JavaScript, the this keyword is central to how objects and classes operate. While you've already learned about how this works in different function contexts, this article focuses on using this within JavaScript classes.

Review: this in Constructors

As a quick recap, in a constructor function, this refers to the new object being created. In classes, the constructor method serves the same role.

class Student {
    constructor(name, studentID) {
        this.name = name;
        this.studentID = studentID;
    }
}

const student = new Student('John Doe', 'S12345');
console.log(student.name); // Outputs: John Doe

Here, this.name and this.studentID refer to the properties of the student object. The constructor method initializes these properties when a new Student object is created. When you create an instance of Student with the name "John Doe" and student ID "S12345," the this keyword binds these values to the new object.

this in Class Methods

Within class methods, this refers to the instance of the class the method is called on. This allows methods to access and modify the instance’s properties.

class Student {
    constructor(name, studentID) {
        this.name = name;
        this.studentID = studentID;
    }

    getDetails() {
        return `${this.name} (ID: ${this.studentID})`;
    }
}

const student = new Student('John Doe', 'S12345');
console.log(student.getDetails()); // Outputs: John Doe (ID: S12345)

In this example, the getDetails() method uses this to access the name and studentID properties of the specific Student instance. When you call student.getDetails(), this refers to the student object, returning the string "John Doe (ID: S12345)." This shows how this links the method to the object it belongs to.

Common Pitfalls with this in Classes

A common issue when working with this in classes is losing the context when methods are passed as callbacks or assigned to variables. This can be mitigated by using bind() or arrow functions.

class Course {
    constructor(name) {
        this.name = name;
    }

    getName() {
        return this.name;
    }
}

const course = new Course('Math 101');
const getName = course.getName.bind(course); // Correctly binds `this` to course
console.log(getName()); // Outputs: Math 101

In this example, the getName() method is initially bound to the course object through this. However, when the method is assigned to a variable without any binding, the context of this can be lost, causing errors or unexpected behavior. To prevent this, the bind() method is used to explicitly bind this to the course object, ensuring that the method works correctly when called through the variable.

Advanced Use: Method Chaining

Method chaining allows you to call multiple methods on the same object in a single statement. This is achieved by having methods return this.

class Student {
    constructor(name) {
        this.name = name;
    }

    setID(studentID) {
        this.studentID = studentID;
        return this; // Returning `this` allows chaining
    }

    getDetails() {
        return `${this.name} (ID: ${this.studentID})`;
    }
}

const student = new Student('John Doe').setID('S12345');
console.log(student.getDetails()); // Outputs: John Doe (ID: S12345)

In this example, the setID() method returns this, which is the current instance of the Student class. By returning this, you enable method chaining, allowing the next method in the chain to be called on the same object. This is why student.setID('S12345').getDetails() works seamlessly, updating the student's ID and immediately retrieving the updated details.

A Brief Introduction to this in Inheritance

In a later article, we will explore how this interacts with inheritance in JavaScript. For now, understand that this continues to refer to the instance of the class, even when using inherited properties and methods. We’ll dive deeper into this topic soon.

Summary

Constructors
this refers to the new object being created in a constructor.
Class Methods
this refers to the instance of the class the method is called on.
Common Pitfalls
Ensure this retains its intended context using bind() or arrow functions.

Putting It Into Action

Student Management System
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Management System</title>
</head>
<body>

    <h1>Student Management System</h1>

    <div id="output"></div>

    <script>
        class Student {
            constructor(name) {
                this.name = name;
            }

            setID(studentID) {
                this.studentID = studentID;
                return this; // Returning `this` allows method chaining
            }

            getDetails() {
                return `${this.name} (ID: ${this.studentID})`;
            }
        }

        const student = new Student('John Doe')
            .setID('S12345');

        console.log(student.getDetails()); // Outputs: John Doe (ID: S12345)

        // Outputting the result to the DOM
        const outputDiv = document.getElementById('output');
        const p = document.createElement('p');
        p.textContent = student.getDetails();
        outputDiv.appendChild(p);
    </script>

</body>
</html>

This example creates a Student class with methods to set a student's ID and retrieve their details. The setID method returns this to allow method chaining, enabling us to chain method calls together. When student.getDetails() is called, it returns the student's name and ID.

Challenge

Now that you've seen how this works within a simple Student Management System, try extending the example with the following challenge.

  • Add a setGrade method to the Student class that allows you to set a grade for the student.
  • Ensure the setGrade method also returns this so that it can be chained with other methods.
  • Update the getDetails method to include the student's grade in the returned string.

In order to check your learning, you should attempt to create a solution before revealing the provided solution below.

// JavaScript Code for the Challenge Solution

class Student {
    constructor(name) {
        this.name = name;
    }

    setID(studentID) {
        this.studentID = studentID;
        return this; // Returning `this` allows method chaining
    }

    setGrade(grade) {
        this.grade = grade;
        return this; // Returning `this` allows method chaining
    }

    getDetails() {
        return `${this.name} (ID: ${this.studentID}, Grade: ${this.grade})`;
    }
}

const student = new Student('John Doe')
    .setID('S12345')
    .setGrade('A');

console.log(student.getDetails()); // Outputs: John Doe (ID: S12345, Grade: A)

References