Explaining ‘this’ keyword in JavaScript

Claudio Ctin3 months ago4 mins

1. Global Context

When used in the global context (outside of any function), this refers to the global object, which is window in browsers and global in Node.js.
console.log(this); // In a browser, this logs the Window object

2. Function Context

In a regular function, the value of this depends on how the function is called.

a. Function Invocation
When a function is called as a standalone function, this refers to the global object (in non-strict mode) or undefined (in strict mode).

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

foo(); // In non-strict mode, logs the global object (Window in browsers)
// In strict mode, logs undefined

b. Method Invocation
When a function is called as a method of an object, this refers to the object the method is called on.

const obj = {
method: function() {
console.log(this);
}
};

obj.method(); // Logs the obj object

c. Constructor Invocation
When a function is used as a constructor (with the new keyword), this refers to the newly created object.

function Person(name) {
this.name = name;
}

const person = new Person(‘Alice’);
console.log(person.name); // Logs ‘Alice’

3. Arrow Functions

Arrow functions (=>) do not have their own this binding. Instead, this is lexically inherited from the outer function where the arrow function is defined.

const obj = {
regularFunction: function() {
console.log(this); // Logs obj

const arrowFunction = () => {
console.log(this); // Logs obj because it inherits `this` from regularFunction
};

arrowFunction();
}
};

obj.regularFunction();

4. Event Handlers

In DOM event handlers, this refers to the element that received the event.

 document.getElementById(‘myButton’).addEventListener(‘click’, function() {
 console.log(this); // Logs the button element
 });

5. Explicit Binding

JavaScript provides methods to explicitly set the value of this using call, apply, and bind.

a. call and apply
call and apply methods call a function with a specified this value and arguments. The difference between them is how they handle arguments.

function greet(greeting) {
console.log(greeting + ‘, ‘ + this.name);
}

const person = { name: ‘Alice’ };

greet.call(person, ‘Hello’); // Logs ‘Hello, Alice’
greet.apply(person, [‘Hi’]); // Logs ‘Hi, Alice’

b. bind
bind creates a new function that, when called, has its this keyword set to the provided value.

function greet() {
console.log(this.name);
}

const person = { name: ‘Alice’ };
const boundGreet = greet.bind(person);

boundGreet(); // Logs ‘Alice’

Summary

Global context: this refers to the global object.
Function context:
Regular function: this is the global object or undefined in strict mode.
Method: this is the object the method belongs to.
Constructor: this is the new object being created.

Arrow functions: this is lexically inherited from the outer function.
Event handlers: this is the event target element.
Explicit binding: Use call, apply, and bind to explicitly set this.

Please follow and like us: