The JavaScript this Keyword: Full Deep Dive

function whoAmI() {
  console.log(this);
}
 
const obj = { whoAmI };
 
whoAmI();      // globalThis (or undefined in strict mode)
obj.whoAmI();  // obj — same function, different this

function showThis() {
  console.log(this);
}
 
showThis(); // window (browser) / global (Node.js)

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

const person = {
  name: "Alice",
  greet() {
    return `Hi, I'm ${this.name}`;
  },
};
 
console.log(person.greet()); // "Hi, I'm Alice" — this = person

const outer = {
  name: "Outer",
  inner: {
    name: "Inner",
    greet() { return this.name; },
  },
};
 
console.log(outer.inner.greet()); // "Inner" — this = outer.inner, not outer

const user = {
  name: "Bob",
  sayName() { return this.name; },
};
 
const fn = user.sayName; // Reference copied — detached from user
fn(); // undefined (strict mode) — THIS IS THE INFAMOUS CONTEXT LOSS

function introduce(greeting, punctuation) {
  return `${greeting}, I'm ${this.name}${punctuation}`;
}
 
const alice = { name: "Alice" };
const bob   = { name: "Bob"   };
 
// call: arguments one by one
introduce.call(alice, "Hello", "!"); // "Hello, I'm Alice!"
introduce.call(bob,   "Hey",   ".");  // "Hey, I'm Bob."
 
// apply: arguments as array
introduce.apply(alice, ["Hi", "?"]); // "Hi, I'm Alice?"
 
// bind: returns a new function with this permanently bound
const aliceIntro = introduce.bind(alice);
aliceIntro("Greetings", "!"); // "Greetings, I'm Alice!"

function Timer(label) {
  this.label = label;
  this.elapsed = 0;
  // this = the fresh object created by new
}
Timer.prototype.tick = function() { this.elapsed += 1; };
 
const t = new Timer("stopwatch");
console.log(t.label);   // "stopwatch"
console.log(t.elapsed); // 0

function greet() { return this.name; }
const obj = { name: "A", greet };
 
// Implicit says this = obj (rule 3)
// But explicit overrides:
greet.call({ name: "B" }); // "B" — explicit wins over implicit

const team = {
  name: "DevTeam",
  members: ["Alice", "Bob"],
  listMembers() {
    // Arrow function captures 'this' from listMembers() — which is team
    return this.members.map(m => `${this.name}: ${m}`);
  },
};
 
console.log(team.listMembers());
// ["DevTeam: Alice", "DevTeam: Bob"]
 
// Calling bind/call/apply on an arrow function has no effect on this
const arrow = () => this;
arrow.call({ x: 1 }); // Still the original captured this

class Counter {
  count = 0;
 
  increment() {
    this.count += 1; // this = the Counter instance
    return this;
  }
 
  decrement() {
    this.count -= 1;
    return this;
  }
}
 
const c = new Counter();
c.increment().increment().decrement();
console.log(c.count); // 1

const c2 = new Counter();
const inc = c2.increment; // Detached!
// inc() → TypeError: Cannot set properties of undefined
// Fix: use bind, arrow field, or arrow wrapper

class Button {
  constructor(label) {
    this.label = label;
    this.clicks = 0;
  }
 
  // BAD: this will be undefined (strict) or the event target (DOM)
  handleClickBad() {
    this.clicks++;
  }
 
  // GOOD option 1: bind in constructor
  constructor2(label) {
    this.label = label;
    this.clicks = 0;
    this.handleClick = this.handleClick.bind(this);
  }
 
  // GOOD option 2: class field arrow function
  handleClick = () => {
    this.clicks++; // Arrow captures this from class body (the instance)
    console.log(`${this.label} clicked ${this.clicks} times`);
  };
}
 
const btn = new Button("Submit");
setTimeout(btn.handleClick, 100); // Works: arrow field keeps this

function fn() { return this; }
const obj = { fn };
 
fn();                    // globalThis or undefined (strict)
obj.fn();                // obj
fn.call({ x: 1 });       // { x: 1 }
fn.apply({ x: 2 });      // { x: 2 }
const bound = fn.bind({ x: 3 }); bound(); // { x: 3 }
new fn();                // {} (new object)
const arrow = () => this; // Lexical — whatever this was at definition