The JavaScript this Keyword

Share ## What is this? When the this keyword is used in a function, it refers to an Object.

Which Object, is not decided when the function is written.

The value of this is decided when the function is called.

Functions are Object Methods

All JavaScript functions are object methods.

A function can be:

• A method of a JavaScript object
• A method of the global object

this in an Object Method

When a function is an object method:

this refers to the object that owns the method.

Example

const person = {

  firstName: "John",

  lastName: "Doe",

  fullName: function() {

    return this.firstName + " " + this.lastName;

  }

};

person.fullName();

In the example above, this refers to the person object.

this.firstName means the firstName property of person.

this.firstName is the same as person.firstName.

this in a Function (Default)

By default, when this is used in a regular function, this refers to the global object.

In a browser window, the global object is [object Window]:

Example

function myFunction() {

    return this;

}

this in a Function (Strict Mode)

JavaScript strict mode does not allow default binding.

In strict mode, this used inside a function is undefined.

Example

"use strict";

function myFunction() {

  return this;

}

this Alone

When used outside a function, this always refers to the global object.

In a browser window the global object is [object Window]:

Example

let x = this;

In a regular function in strict mode, when used outside a function, this also refers to the global object:

Example

"use strict";
let x = this;

JavaScript globalThis

In JavaScript, globalThis is a special built-in object that provides a standard way to access the global object, regardless of the environment your code runs in - whether it is a browser, Node.js, a Web Worker, or another JS runtime.

The global object is the top-level object in a JavaScript environment: - In browsers, it is window. - In Node.js, it is global. - In Web Workers, it is self. Each environment used to have its own name for this object. This caused compatibility issues for code meant to run everywhere.

globalThis was introduced in ECMAScript 2020 (ES11) to solve that problem. It is a unified reference to the global object, no matter the environment.

Example

globalThis === window; // true in browsers

globalThis === global; // true in Node.js

this in Event Handlers

In HTML event handlers, this refers to the HTML element that received the event:

Examples

**Click Me

this in Arrow Functions

Arrow functions do not have their own this. They inherit this from the surrounding scope.

In regular functions the this keyword represents the object that called the function, which could be the window, the document, a button or whatever.

With arrow functions the this keyword always represents the object that defined the arrow function.

What is this?

In JavaScript, the this keyword refers to an object.

The this keyword refers to different objects depending on how it is used:

This Precedence

Use the following precedence of order to determine which object this refers to:

Examples to Understand

Below are two examples that call the same method twice:

• When the page loads
• When the user clicks a button

The first example uses a regular function, and the second example uses an arrow function.

The result shows that the first example returns two different objects (window and button), and the second example returns the window object twice, because the window object is the "owner" of the function.

Examples

// Regular Function:
hello = function() {
  document.getElementById("demo").innerHTML
  += this;
}

// The window object calls the function:

  window.addEventListener("load", hello);

// A button object calls the
  function:
document.getElementById("btn").addEventListener("click", hello);

Arrow Functions in Methods

Example

const person = {

      firstName: "John",

      sayHello: () => {

        return this.firstName;

      }

    };

    person.sayHello();

Arrow functions can be useful inside methods when you want to keep the same this value.

Example

const person = {

      firstName: "John",

      sayHello: function() {

        return () => this.firstName;

      }

    };

    let hello = person.sayHello();

    hello();

Common Mistakes

• ### Arrow Functions as Object Methods Arrow functions do not bind their own this.
• ### Assuming this Refers to an Object The value of this depends on how the function is called.
• ### Forgetting Strict Mode Behavior In strict mode, this can be undefined.