Understanding the this Identifier

In JavaScript, the this identifier is a special keyword that refers to the current execution context or the object that the current code is being executed in. It plays a crucial role in determining how functions and methods are executed and how they interact with their surrounding code. The behavior of this can vary depending on how and where a function is called. In this tutorial, we will explore the different scenarios where the this keyword is used and understand how it works.

Note:
If a function has a this reference inside it, that this reference usually points to an object. But which object it points to depends on how the function was called.
It’s important to realize that this does not refer to the function itself, as is the most common misconception.

1. Global Context

In the global context (outside of any function or object), this refers to the global object, which is window in a browser environment and global in Node.js.

    console.log(this === window); // true in a browser
  

2. Function Context

In a regular function (not an arrow function), the value of this is determined by how the function is called. If the function is called directly, this will point to the global object (in non-strict mode) or undefined (in strict mode).

    function showThis() {
      console.log(this);
    }

    showThis(); // In a browser: points to window/global, In strict mode: points to undefined
  

3. Method Context

When a function is called as a method of an object, this refers to the object itself. This is a common scenario in object-oriented programming.

    const person = {
      name: "John",
      sayHello: function() {
        console.log(`Hello, my name is ${this.name}`);
      }
    };

    person.sayHello(); // Outputs: Hello, my name is John
  

4. Event Handlers

In event handlers, such as those used with DOM elements, this usually refers to the element that triggered the event.

Click me

    document.getElementById("myButton").addEventListener("click", function() {
      console.log(this); // Refers to the clicked button element
    });
  

5. Explicit Binding

JavaScript provides methods to explicitly control the value of this using call, apply, and bind methods that can be used on functions. They allow you to specify the context in which the function should execute.

    function greet() {
      console.log(`Hello, ${this.name}`);
    }

    const person = { name: "Alice" };
    greet.call(person); // Outputs: Hello, Alice
  

6. Arrow Functions

Arrow functions behave differently when it comes to this. They do not have their own this value and instead inherit the this value from the enclosing scope.

    const obj = {
      name: "Object with Arrow Function",
      printName: () => {
        console.log(this.name); // Will not work as expected; this is inherited from the enclosing scope
      }
    };
    obj.printName();
  

7. this in Classes

In ES6 classes, methods are not automatically bound to the instance of the class. To ensure the correct value of this, you might need to manually bind methods in the constructor or use public class fields.

    class Counter {
      constructor() {
        this.count = 0;
        this.increment = this.increment.bind(this); // Manually binding the method
      }
      
      increment() {
        this.count++;
        console.log(this.count);
      }
    }

    const counter = new Counter();
    const increment = counter.increment;
    increment(); // Error if not properly bound, as `this` will be undefined
  

Test example

    function foo() {
        console.log( this.bar );
    }
   var bar = "global";
   var obj1 = {
       bar: "obj1",
       foo: foo
   };

   var obj2 = {
       bar: "obj2"
   };

   foo(); // "global"
   obj1.foo(); // "obj1"
   foo.call( obj2 ); // "obj2"--- This called binding
   new foo(); // undefined -- sets this to a brand new empty object with no bar defined.
  

To understand what this points to, you have to examine how the function in question was called. It will be one of those
four ways just shown, and that will then answer what this is.

8. Summary

Understanding the behavior of the this identifier is crucial for writing effective JavaScript code. It varies based on how a function is called, whether it’s an arrow function, a method, or an event handler. Be aware of the different scenarios and how to explicitly control this using binding methods to avoid unexpected behavior in your code.

Remember, this is a complex and sometimes tricky aspect of JavaScript, but mastering it will greatly enhance your ability to write robust and functional code.