• JavaScript

This in JavaScript

added on November 27, 2022 (2y ago)

In JavaScript, this is a keyword that refers to the object that is currently executing the code. The value of this is determined dynamically at runtime based on the context in which the code is executed.

There are several ways in which the value of this can be set, including:

  1. In the global scope: In the global scope, this refers to the global object, either window in a browser or global in a Node.js environment.

  2. In object methods: When a method is called on an object, this refers to the object on which the method was called. For example:

const person = {
  name: 'John',
  sayHello: function () {
    console.log(`Hello, my name is ${this.name}`);
  },
};
 
person.sayHello(); // outputs: "Hello, my name is John"
  1. In class methods: In a class method, this refers to the instance of the class on which the method was called.
class Person {
  constructor(name) {
    this.name = name;
  }
 
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}
 
const john = new Person('John');
john.sayHello(); // outputs: "Hello, my name is John"
  1. In event handlers: In event handlers, this refers to the element that fired the event. For example:
<button id="myButton">Click me</button>
 
<script>
  const button = document.getElementById('myButton');
  button.addEventListener('click', function () {
    console.log(`Button with id "${this.id}" was clicked`);
  });
</script>

In some cases, you might want to change the value of this, which can be done using bind(), call(), or apply(). However, it's generally best to avoid changing the value of this and rely on the default behavior, as it can make the code more difficult to understand and maintain.