The this Keyword in JavaScript: A Complete Guide

The this Keyword in JavaScript: A Complete Guide

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

The Five Binding Rules

1. Default Binding (Plain Call)

In non-strict mode, this is the global object:

function foo() { console.log(this); }
foo(); // window (browser, non-strict)
``
In strict mode, `this` is `undefined`:

```js
"use strict";
function foo() { console.log(this); }
foo(); // undefined
``
#### 2. Implicit Binding (Method Call)

```js
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`.

#### 3. Explicit Binding (call, apply, bind)

```js
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"
``
#### 4. new Binding (Constructor)

```js
function Person(name) { this.name = name; }
const p = new Person("Kunal");
console.log(p.name); // "Kunal"
``
`new` creates a new object and sets `this` to it.

#### 5. Arrow Function (Lexical this)

```js
const obj = {
  name: "Kunal",
  greet: () => console.log(this.name),
};
obj.greet(); // undefined (arrow inherits this from enclosing scope)
``
Arrow functions do not have their own `this`. They inherit from the enclosing lexical scope.

### Precedence

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

### The Takeaway

`this` is determined by 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. Precedence: `new` > explicit > implicit > default.