Enjoy 20% off all plans by following our social accounts!
Quiz

Explain the different ways the `this` keyword can be bound

Topics
ClosureJavaScript
Edit on GitHub

TL;DR

The this keyword in JavaScript can be bound in several ways:

  • Default binding: In non-strict mode, this refers to the global object (window in browsers). In strict mode, this is undefined.
  • Implicit binding: When a function is called as a method of an object, this refers to the object.
  • Explicit binding: Using call, apply, or bind methods to explicitly set this.
  • New binding: When a function is used as a constructor with the new keyword, this refers to the newly created object.
  • Arrow functions: Arrow functions do not have their own this and inherit this from the surrounding lexical context.

Default binding

In non-strict mode, if a function is called without any context, this refers to the global object (window in browsers). In strict mode, this is undefined.

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


showThis(); // In non-strict mode: window, in strict mode: undefined

Implicit binding

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

const obj = {
  name: 'Alice',
  greet: function () {
    console.log(this.name);
  },
};


obj.greet(); // 'Alice'

Explicit binding

Using call, apply, or bind methods, you can explicitly set this.

Using call

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


const person = { name: 'Bob' };


greet.call(person); // 'Bob'

Using apply

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


const person = { name: 'Charlie' };


greet.apply(person, ['Hello']); // 'Hello, Charlie'

Using bind

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


const person = { name: 'Dave' };


const boundGreet = greet.bind(person);
boundGreet(); // 'Dave'

New binding

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('Eve');
console.log(person.name); // 'Eve'

Arrow functions

Arrow functions do not have their own this and inherit this from the surrounding lexical context.

const obj = {
  name: 'Frank',
  greet: () => {
    console.log(this.name);
  },
};


obj.greet(); // undefined, because `this` is inherited from the global scope

Further reading

Edit on GitHub
Previous
Next