This Keyword

this = context-dependent binding

---

What is 'this'?

"Refers to execution context"

this is a keyword that refers to the object that is executing the current function.

"The 'this' keyword refers to the execution context, and its value depends on how a function is called, not where it's defined."

---

Binding Rules

Default · Implicit · Explicit · New

Rule	When	Value of 'this'
Default	Function call	window (strict: undefined)
Implicit	Method call	Object calling method
Explicit	call/apply/bind	Specified object
New	Constructor	New instance

---

Default Binding

Function call = global/window

function greet() {
  console.log(this); // window (non-strict) or undefined (strict)
}

greet();

"Default binding applies to standalone function calls, where 'this' is the global object (or undefined in strict mode)."

---

Implicit Binding

Method call = object

const person = {
  name: "John",
  greet() {
    console.log(this.name); // 'John'
  },
};

person.greet(); // 'this' = person

"Implicit binding occurs when a method is called on an object, where 'this' refers to that object."

---

Explicit Binding

call/apply/bind = force 'this'

function greet() {
  console.log(this.name);
}

const person = { name: "John" };

greet.call(person); // 'John'
greet.apply(person); // 'John'
const bound = greet.bind(person);
bound(); // 'John'

"Explicit binding uses call, apply, or bind to explicitly set the value of 'this'."

---

New Binding

Constructor = new instance

function Person(name) {
  this.name = name;
}

const john = new Person("John");
// 'this' = new Person instance

"When using 'new', 'this' refers to the newly created instance."

---

Arrow Functions

Lexical 'this' = from outer scope

const person = {
  name: "John",
  greet: function () {
    setTimeout(() => {
      console.log(this.name); // 'John' (lexical)
    }, 100);
  },
};

Arrow functions don't have their own 'this' - they inherit from outer scope.

"Arrow functions use lexical 'this', inheriting from their enclosing scope rather than having their own binding."

---

Arrow vs Regular Function

Arrow = lexical, Regular = dynamic

// Regular function - 'this' is dynamic
const obj = {
  name: "John",
  regular: function () {
    console.log(this.name); // 'John'
  },
};

// Arrow function - 'this' is lexical
const obj2 = {
  name: "John",
  arrow: () => {
    console.log(this.name); // undefined (window.name)
  },
};

"Regular functions have dynamic 'this', while arrow functions have lexical 'this' from the outer scope."

---

9️⃣ Lost 'this' Problem

Method extracted = loses context

const person = {
  name: "John",
  greet() {
    console.log(this.name);
  },
};

const greet = person.greet;
greet(); // undefined (lost context)

// Solutions:
greet.call(person);
const bound = person.greet.bind(person);

"Extracting a method loses its 'this' binding. Use bind, call, apply, or arrow functions to fix it."

---

Priority Order

New > Explicit > Implicit > Default

1. New binding (highest priority)
2. Explicit binding (call/apply/bind)
3. Implicit binding (method call)
4. Default binding (function call)

---

"The 'this' keyword's value depends on how a function is called. New binding (constructor) has highest priority, followed by explicit (call/apply/bind), implicit (method call), and default (function call). Arrow functions use lexical 'this' from their enclosing scope. Extracting methods can lose 'this' binding, solved with bind or arrow functions."

---

🧠 Ultra-Short Cheat Sheet

Dynamic binding
New > Explicit > Implicit > Default
Arrow functions = lexical
call/apply/bind
Lost 'this' problem
Method extraction