JavaScript: this Binding

By Xah Lee. Date: . Last updated: .

Purpose of “this” Binding

In JavaScript, when a function is called, it has a associated value called “this binding”. (Except arrow functions. [see Arrow Function])

In function body, the “this binding” is represented by the keyword this.

The purpose of “this binding” is to allow function to implicitly work with a object. (without actually passing the object as argument.)

For example, when you call arrayX.push(), the function push's “this binding” is arrayX. That's how push knows about arrayX.

A function may or may not make use of “this binding”. For example, if a user defined function body does not contain this keyword, then the associated “this binding” does nothing.

What is the Value of “this”?

The “this binding” is designed for use with method only. Typically, for method call of the form obj.method_name(), where the method method_name's “this binding” will be obj.

When this is evaluated outsite a function, its value is the Global Object. (in browser, the Global Object is Browser Window Object. )

When this is used inside a function and the function is called, the value of this depends on how the function is called. Here's a summary:

Following are details.

“this” in Method Call

The most common use is calling a function as a method of some object. For example, myobj.f(). In such case, the value of this is the object that the method f is a property of. (the myobj)

let ob = { k1: function () { return this; }};
console.log(ob === ob.k1()); // true

“this” in Constructor Call (new f())

When a function is invoked as a constructor (for example, new F() or new obj.F()), its this value is the newly created object. (similar to this = Object.create(F.prototype))

[see Operator “new”]

// typical example of using 「this」

function Ff (x) { this.k1 = x; }

console.log( new Ff(4) );
// Ff { k1: 4 }

“this” in Global Function Call

When a function is called in a global context and not as a method of another object, the this evaluates to undefined if strict mode is on, else it's the Global Object .

"use strict"

function Ff () { { return this; } }

console.log( Ff() === undefined); // true
// in non-strict mode, in browser, 「this」 is the Global Object 「window」

function F2 () { { return this; } }

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

[see What is Strict Mode and How to Determine Strict Mode?]

“this” in Nested Functions

In a nested function (for example, g is nested inside f), when g is called inside f, the value of g's this is undefined if strict mode is on, else the Global Object .

// 「this」 is in nested function has value undefined, if under use strict

"use strict"

function ff () {
    const gg = function () {
        return this;
    return gg();

console.log( ff() === undefined); // true

// if in non strict mode, it returns the Global Object.

Call Function with any thisBinding

You can call a function with its this set to any object you want. You can do this by using the method “call” or “apply”. See: Function Call, Apply, Bind .

JavaScript Constructor/Class

JavaScript in Depth

JavaScript in Depth

Basic Syntax

Value Types





Object and Inheritance



Iterable 🌟