The this Keyword & Binding

this is a special binding that points to “the object the code is running for”. Unlike most languages, JavaScript decides what this means at call time, by how the function is invoked — not where it was written. Once you learn the four binding rules, every this surprise becomes predictable.

Why this exists

One method definition can serve many objects. this is the shortcut that says “the current object”, so user.getName() and admin.getName() can share code while returning different data.

const user  = { name: 'Asha', greet() { return `Hi, ${this.name}`; } };
const admin = { name: 'Kai',  greet: user.greet };   // same function…

console.log(user.greet());    // → Hi, Asha
console.log(admin.greet());   // → Hi, Kai  (this = whoever called it)

Rule 1: implicit binding (method call)

const counter = {
  count: 0,
  increment() { this.count++; },
};

counter.increment();          // 'this' is counter (the object before the dot)
console.log(counter.count);   // → 1

The rule: the object immediately to the LEFT of the dot when the function is called becomes this.

Rule 2: default binding

function show() {
  console.log(this);
}

show();                      // sloppy mode → window (browser global)
                             // strict mode / module → undefined ✅ (modules are strict!)

When a function is called plainly — no object before the dot — this falls back to the global object (or undefined in strict/module code, which is safer: accidental globals throw instead of appearing).

Rule 3: explicit binding (call, apply, bind)

function greet(greeting) {
  return `${greeting}, ${this.name}`;
}

const asha = { name: 'Asha' };

console.log(greet.call(asha, 'Hello'));          // 'this' forced → asha, args separate
console.log(greet.apply(asha, ['Hello']));       // same, args in an array
const bound = greet.bind(asha);                  // returns a NEW function with 'this' fixed
console.log(bound('Yo'));                        // → Yo, Asha

bind is the one you will use most: locking this for callbacks.

Rule 4: new binding (constructors and classes)

class Task {
  constructor(title) { this.title = title; }    // 'this' = brand-new object
}
const t = new Task('Ship');
console.log(t.title);   // → Ship

new creates an empty object, sets it as this, runs the constructor, and returns the object.

The resolution order (check in this sequence)

1. new in the call? → the new object.
2. call/apply/bind used? → the object they specified.
3. Called as obj.method()? → obj.
4. Otherwise → global object or undefined (strict).

Arrow functions: this is frozen at creation

const timer = {
  count: 0,
  start() {
    // regular function inside a method — 'this' re-binds on each call
    setTimeout(function () {
      console.log(this.count);      // → undefined (called with no object)
    }, 100);

    // arrow — inherits 'this' from start(), which is the timer object
    setTimeout(() => {
      console.log(this.count);      // → works ✅
    }, 100);
  },
};

Arrows have no own this — they close over the surrounding scope's this (lexical this, implemented via closures). This is precisely why arrows are the default for callbacks inside methods and event handlers.

this in event handlers

button.addEventListener('click', function () {
  console.log(this);              // the button (implicit binding by the DOM)
});

button.addEventListener('click', (e) => {
  console.log(this);              // outer scope's this — usually module/global
  console.log(e.currentTarget);   // ✅ the reliable way: use the event object
});

Inside listeners, prefer e.currentTarget (or e.target.closest(...)) over this — it works with arrows, nested handlers and delegation alike.

this in classes

class Timer {
  seconds = 0;
  start() {
    this.id = setInterval(() => {
      this.seconds++;             // arrow keeps the instance as 'this'
    }, 1000);
  }
  stop() { clearInterval(this.id); }
}

Methods get instance this automatically; callbacks inside them need arrows (or bind) to keep it. Getters/setters: this is the instance being accessed.

The classic mistakes

// 1. Detached method — 'this' lost when passed as a value
const counter = { count: 0, inc() { this.count++; } };
const fn = counter.inc;
fn();                          // ❌ TypeError (strict: this is undefined)
counter.inc.bind(counter)();   // ✅ fixed with bind
counter.inc();                 // ✅ or call it as a method

// 2. setTimeout without arrow (shown above) — this becomes window/undefined

// 3. that = this workaround — works, but arrows replace it entirely
const self = this;

// 4. Arrow as a class method field — possible, but it is a per-instance
//    function, not a shared prototype method (different semantics)

Practical patterns

// partial application with bind
function product(price, tax) { return price * (1 + tax); }
const withGst = product.bind(null, 100, 0.18);   // 'this' irrelevant → null
console.log(withGst());                          // → 118

// method chaining via returning this
class Builder {
  #parts = [];
  add(p) { this.#parts.push(p); return this; }   // return this → chainable
  build() { return [...this.#parts]; }
}
console.log(new Builder().add('a').add('b').build());   // → ['a', 'b']

Common mistakes (recap)

• Assuming this is lexical — for regular functions it depends on how you call, not where you write.
• Passing methods as callbacks unbound — setTimeout(obj.method, 0) loses the object; wrap in an arrow or bind.
• this in plain module code — top-level this in a module is undefined, not window.
• Forcing this with arrows — arrows cannot be re-bound; call/bind silently do nothing to them.

Practice checklist

1. Take a method, detach it (const f = obj.m), call it, observe the failure — then fix with bind.
2. Build a chained Builder using return this.
3. Write a class with a timer callback; convert it from function to arrow and watch this come back.
4. Predict this in six calls (method, detached, call, bind, arrow, new) — then verify with console.log(this).

Context understood — time to use it on real pages. Next: The DOM: Selecting Elements.