The 'this' Keyword

Advanced ~20 min read

What is 'this'?

In JavaScript, the this keyword refers to an object. Which object it refers to depends on how it is being invoked (used or called).

In an object method, this refers to the object.
Alone, this refers to the global object (window).
In a function, this refers to the global object.
In a function, in strict mode, this is undefined.
In an event, this refers to the element that received the event.

'this' in a Method

When used in an object method, this refers to the object.

HTML

CSS

<h2>Method Context Demo</h2>
<p id='methodOutput'></p>

'this' Alone (Global Context)

When used alone, this refers to the global object. In a browser window, the global object is [object Window].

HTML

CSS

<h2>Global Context Demo</h2>
<p id='globalOutput'></p>

Explicit Binding: call(), apply(), and bind()

The call(), apply(), and bind() methods allow you to explicitly set the value of this for a function call.

HTML

CSS

<h2>Explicit Binding Demo</h2>
<p id='explicitOutput'></p>

'this' in Arrow Functions

Arrow functions treat this differently. They don't have their own this binding. Instead, this is looked up in scope just like a normal variable. This is called lexical scoping.

HTML

CSS

<h2>Arrow Function Demo</h2>
<p id='arrowOutput'></p>

Summary

this refers to the object that is executing the current function.
The value of this is determined at runtime (dynamic binding), except for arrow functions.
Use call, apply, or bind to control this manually.
Arrow functions inherit this from the surrounding code.

Quick Quiz

In an event handler, what does 'this' refer to?

The global window object

The element that received the event

The function itself

Undefined

Previous Event Listeners

Next Prototypes

What is 'this'?

'this' in a Method

'this' Alone (Global Context)

Explicit Binding: call(), apply(), and bind()

'this' in Arrow Functions

Summary

Quick Quiz

Enjoying these tutorials?