JS: this Binding

By Xah Lee. Date: 2013-11-09. Last updated: 2024-04-10.

Purpose of thisBinding

In JavaScript, when a function is called, it has a associated value called thisBinding. (Except Arrow Function.)

In function body, the thisBinding is represented by the keyword this.

The purpose of thisBinding 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 thisBinding is arrayX. That's how push knows about arrayX.

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

What is the Value of thisBinding?

The thisBinding is designed for use with method only. Typically, for method call of the form obj.method_name(), where the method method_name's thisBinding is obj.

Normal Usage

When a function is called by property access, e.g. obj.f(), the value of this is the object obj.
When a function is called with the keyword new, as in new f() or new y.f(), the value of this is the newly created object. [see Operator “new”]

Abnormal Usage

When this is evaluated outside a function, its value is the Global 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:

When a function is called in a global context as a function, such as f(), the value of this is undefined if Strict Mode is on, else the Global Object.
In a nested function (e.g. 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.

thisBinding in Method Call

The most common use is calling a function as a method of some object. e.g. a.b(). In such case, the value of this is the object that the method b is a property of. (the a)

let jj = {
  ff: function () {
    return this;
  },
};

console.log(jj === jj.ff());

thisBinding in Constructor Call (new f())

When a function is invoked as a constructor (e.g. 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 thisBinding
function F1(x) {
  this.kk = x;
}
const x = new F1(4);
console.log(x.hasOwnProperty("kk"));

thisBinding 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 F1() {
  return this;
}

console.log(F1() === undefined);

// in non-strict mode, in browser, thisBinding is the Global Object window

"use strict";

function F2() {
  return this;
}

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

thisBinding in Nested Functions

In a nested function (e.g. 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 .

// thisBinding 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);

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