17 - JavaScript - this Keyword

In JavaScript, the this keyword is a special variable that refers to the context in which a function is executed. It allows functions to access and manipulate the properties of the object that they are called on, as well as the global object if they are called in the global scope.

The value of this is determined at runtime and depends on how a function is called. When a function is called as a method of an object, this refers to the object itself. When a function is called without an object reference, this refers to the global object. Additionally, when a function is called using the new keyword, this refers to the newly created object.

this can also be set explicitly using methods such as call(), apply(), and bind(), which allow the function to be called with a specific object as its context.

There are several ways that this can be used in JavaScript:

1. In the global scope, this refers to the global object. In a web browser environment, this would be the window object.

    console.log(this); // output: Window { ... }
   

2. Inside a function, this can have different values depending on how the function is called. If the function is called as a method of an object, this refers to the object itself.

    const person = {
      firstName: "John",
      lastName: "Doe",
      fullName: function() {
        return this.firstName + " " + this.lastName;
      }
    };
   
    console.log(person.fullName()); // output: John Doe
   

3. If the function is called without an object reference, this refers to the global object.

    function sayHello() {
      console.log(this); // output: Window { ... }
    }
   
    sayHello();
   

4. When using the new keyword to create an instance of an object, this refers to the newly created object.

    function Person(firstName, lastName) {
      this.firstName = firstName;
      this.lastName = lastName;
      this.fullName = function() {
        return this.firstName + " " + this.lastName;
      }
    }
   
    const john = new Person("John", "Doe");
    console.log(john.fullName()); // output: John Doe
   

5. When using call() or apply() to invoke a function, this refers to the object passed as the first argument to the function.

    const person1 = {
      fullName: function() {
        return this.firstName + " " + this.lastName;
      }
    };
   
    const person2 = {
      firstName: "John",
      lastName: "Doe"
    };
   
    console.log(person1.fullName.call(person2)); // output: John Doe
   

6. When using bind() to create a new function with a bound this value, the resulting function will always have this set to the value passed as the first argument to bind().

    const person = {
      firstName: "John",
      lastName: "Doe",
      fullName: function() {
        return this.firstName + " " + this.lastName;
      }
    };
   
    const fullNameFunction = person.fullName.bind(person);
    console.log(fullNameFunction()); // output: John Doe
   

Summarizing Up

In summary, the this keyword in JavaScript can be used to refer to the object that the current function or method is a property of, and its value is determined at runtime based on how the function is called.

Understanding how this works in JavaScript is important for writing object-oriented code and for creating reusable code that can be used in different contexts. However, it can also be a source of confusion for new developers, as its value is not always straightforward to determine. As such, it is important to carefully consider how this is used in code and to ensure that it is set correctly to avoid unexpected behavior.