this is one of the most misunderstood concepts in JavaScript, because its value does NOT depend on WHERE a function was defined, but on HOW it is CALLED. This chapter clarifies all four call rules systematically.

Rule 1: method call – this is the object before the dot

const account = {
  balance: 1500,
  showBalance() {
    console.log(this.balance); // 'this' is 'account', because account.showBalance() is called
  },
};

account.showBalance(); // 1500

Rule 2: plain function call – this is undefined (in strict mode)

function showThis() {
  console.log(this); // undefined - ES modules run in strict mode automatically
}

showThis();

The infamous trap: if a method is DETACHED from its object and called separately, rule 1 no longer applies – rule 2 does:

const account = {
  balance: 1500,
  showBalance() {
    console.log(this.balance);
  },
};

const looseFunction = account.showBalance; // the function gets 'detached'
looseFunction(); // TypeError: Cannot read properties of undefined - 'this' is NO LONGER 'account'!

Rule 3: explicit binding with call, apply, and bind

function showBalance() {
  console.log(this.balance);
}

const account = { balance: 1500 };

showBalance.call(account);   // 1500 - 'this' explicitly set to 'account', arguments individually
showBalance.apply(account);  // 1500 - identical to call, arguments as an array

const boundFunction = showBalance.bind(account); // 'this' PERMANENTLY bound
boundFunction(); // 1500 - works even when detached, since 'this' is fixed

bind() is the solution to rule 2's callback problem – setTimeout(account.showBalance.bind(account), 1000) works correctly, because the returned function carries an immutable this with it.

Rule 4: constructor call with new

When a function is called with new, JavaScript creates a NEW, empty object and sets this to it – details follow in chapter 19, once we learn class (which internally builds on this same mechanism).

Arrow functions: the more elegant modern solution

As shown in chapter 9, arrow functions have NO own this – they inherit it lexically from the surrounding scope. This often solves the callback problem more ELEGANTLY than bind():

const account = {
  balance: 1500,
  transactions: [100, -50, 200],

  showAllTransactions() {
    // Arrow function as callback: inherits 'this' from showAllTransactions(), i.e. 'account'
    this.transactions.forEach(amount => {
      console.log(`${this.balance > 0 ? '✓' : '✗'} Transaction: ${amount}`);
    });
  },
};

account.showAllTransactions(); // 'this' correctly stays 'account' in EVERY callback run