Global Context

When used in the global scope, this refers to the global object. In a browser environment, this global object is window, and in Node.js, it is global.

function myFunction() {
  console.log(this); // Refers to the global object
}

myFunction();

Object Methods

When this is used inside a method of an object, it refers to the object itself.

const myObject = {
  myMethod() {
    console.log(this); // Refers to myObject
  },
};

myObject.myMethod();

This allows methods to access other properties or methods of the same object using this.

Event Listeners

In the context of addEventListener, this refers to the element that the event listener is attached to.

However, this wouldn't work with arrow functions, they'd refer to the global object in this case. (see next section)

const myButton = document.querySelector("button");

function logThis() {
  console.log(this); // Refers to the button element
}

myButton.addEventListener("click", logThis);

Arrow Functions

Arrow functions do not have their own this. Instead, they inherit this from the parent scope at the time they are defined.

const myObject = {
  myMethod: () => {
    console.log(this); // Inherits `this` from the parent scope
  },
};

myObject.myMethod(); // Likely logs the global object or undefined in strict mode

Binding `this` with `bind`

The bind method allows you to set the value of this explicitly for any function.

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

const myObject = { name: "John" };
const boundFunction = logThis.bind(myObject);

boundFunction(); // `this` will refer to myObject

Overriding `this` with `call` and `apply`

Both call and apply methods allow you to call a function with an explicitly set this value. The difference between them lies in how you pass arguments: call takes them individually, while apply accepts them as an array.

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

const myObject = { name: "John" };
logThis.call(myObject); // Calls the function with `this` set to myObject

function logThisWithArgs(x, y) {
  console.log(this, x, y);
}

logThisWithArgs.apply(myObject, [1, 2]); // Also calls the function with `this` set to myObject, arguments passed as an array

`this` in Array Methods

Some array methods, like forEach, allow you to specify the value of this to be used within the callback function.

const myArray = [1, 2, 3];
const myObject = { name: "John" };

myArray.forEach(function(item) {
  console.log(this, item); // `this` refers to myObject
}, myObject);

However, this does not apply to arrow functions within these methods because they do not have their own this context.

`this` context in JavaScript

Comments

More from this blog

Become a cracked product engineer today

Bipedal, humanoid, and the words for creature shapes in games

Lerp and smoothstep, what they actually do

IK and FK, what they actually are

How to make your textures fast on the GPU

Global Context

Object Methods

Event Listeners

Arrow Functions

Binding `this` with `bind`

Overriding `this` with `call` and `apply`

`this` in Array Methods

Command Palette

Comments

More from this blog

Global Context

Object Methods

Event Listeners

Arrow Functions

Binding this with bind

Overriding this with call and apply

this in Array Methods

Binding `this` with `bind`

Overriding `this` with `call` and `apply`

`this` in Array Methods