The this Keyword in JavaScript: The Basics

The this Keyword in JavaScript: The Basics

this is one of the most confused topics in JavaScript. The key rule: this is determined by how a function is called, not where it is defined (except for arrow functions).

Default Binding (Plain Call)

In a non-strict script, this is the global object:

function foo() {
  console.log(this);
}
foo(); // window (browser, non-strict)

In strict mode, this is undefined:

"use strict";
function foo() {
  console.log(this);
}
foo(); // undefined

Implicit Binding (Method Call)

When a function is called as a method of an object, this is that object:

const obj = {
  name: "Kunal",
  greet() {
    console.log(this.name);
  },
};
obj.greet(); // "Kunal"

The object to the left of the dot at call time determines this.

Explicit Binding (call, apply, bind)

You can set this explicitly:

function greet() {
  console.log(this.name);
}
const obj = { name: "Kunal" };

greet.call(obj);    // "Kunal"
greet.apply(obj);   // "Kunal"
const bound = greet.bind(obj);
bound();            // "Kunal"

• call: invokes immediately with this and comma-separated arguments.
• apply: invokes immediately with this and an array of arguments.
• bind: returns a new function with this permanently bound.

new Binding (Constructor)

When a function is called with new, this is a brand-new object:

function Person(name) {
  this.name = name;
}
const p = new Person("Kunal");
console.log(p.name); // "Kunal"

Arrow Functions (Lexical this)

Arrow functions do not have their own this. They inherit this from the enclosing lexical scope:

const obj = {
  name: "Kunal",
  greet: () => console.log(this.name),
};
obj.greet(); // undefined (this is from the enclosing scope, not obj)

Precedence

new > explicit (bind/call/apply) > implicit (method) > default (plain call).

The Takeaway

this depends on how the function is called: plain call (global/undefined), method call (the object), call/apply/bind (explicit), new (new object). Arrow functions inherit this lexically and do not follow these rules.