Understanding the "this" keyword in JavaScript

JavaScript, Function, Object · Jun 12, 2021

In JavaScript, the this keyword refers to the object that is currently executing the code. The short version of what this evaluates to is as follows:

  • By default, this refers to the global object.
  • In a function, when not in strict mode, this refers to the global object.
  • In a function, when in strict mode, this is undefined.
  • In an arrow function, this retains the value of the enclosing lexical context's this.
  • In an object method, this refers to the object the method was called on.
  • In a constructor call, this is bound to the new object being constructed.
  • In an event handler, this is bound to the element on which the listener is placed.

In the global execution context, this refers to the global object.

console.log(this === window); // true

When not in strict mode, a function's this refers to the global object.

function f() {
  return this;
}

console.log(f() === window); // true

When in strict mode, a function's this will be undefined if not set when entering the execution context.

'use strict';

function f() {
  return this;
}

console.log(f()); // undefined

When a function is called as a method of an object, this refers to the object the method is called on. This applies to methods defined anywhere in the object's prototype chain (i.e. own and inherited methods).

const obj = {
  f: function() {
    return this;
  }
};

const myObj = Object.create(obj);
myObj.foo = 1;

console.log(myObj.f()); // { foo: 1 }

Similarly, when used inside a constructor, this refers to the object being constructed.

class C {
  constructor() {
    this.x = 10;
  }
}

const obj = new C();
console.log(obj.x); // 10

In arrow functions, this retains the value of the enclosing lexical context's this.

const f = () => this;

console.log(f() === window); // true

const obj = {
  foo: function() {
    const baz = () => this;
    return baz();
  },
  bar: () => this
};

console.log(obj.foo()); // { foo, bar }
console.log(obj.bar() === window); // true

Notice how in the second example, an arrow function's this refers to the global object unless wrapped inside a regular function call, whose this refers to the object it's called from and its lexical context is retained by the arrow function.

When used in an event handler, this refers to the element on which the listener is placed.

const el = document.getElementById('my-el');

el.addEventListener('click', function() {
  console.log(this === el); // true
});

Using Function.prototype.bind() returns a new function from an existing one, where this is permanently bound to the first argument of bind().

function f() {
  return this.foo;
}

var x = f.bind({foo: 'hello'});
console.log(x()); // 'hello'

Similarly, using Function.prototype.call() or Function.prototype.apply() will bind the called function's this to the first argument of either of these functions only for this call.

function f() {
  return this.foo;
}

console.log(f.call({foo: 'hi'})); // 'hi'

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub.

More like this