Common pitfalls with 'this'

class Timer {
  seconds = 0;

  start() {
    // ❌ BUG: 'this' is lost when tick is called by setInterval
    setInterval(this.tick, 1000);
    // setInterval receives the function reference, not the object
    // When it calls tick(), there's no object context → this = undefined
  }

  tick() {
    this.seconds += 1; // TypeError: Cannot read property 'seconds' of undefined
    console.log(this.seconds);
  }
}

const timer = new Timer();
timer.tick();  // Works fine — called as timer.tick(), this = timer
timer.start(); // 💥 Crashes — tick is called without context

class Timer {
  seconds = 0;

  // Fix 1: Arrow function in the call site (creates new function each time)
  start1() {
    setInterval(() => this.tick(), 1000);
    // Arrow function captures 'this' from start1's context (the Timer instance)
  }

  // Fix 2: bind() — creates a permanently bound copy
  start2() {
    setInterval(this.tick.bind(this), 1000);
  }

  // Fix 3: Arrow function as class field (bound at construction)
  tick = () => {
    this.seconds += 1; // 'this' is always the Timer instance
    console.log(this.seconds);
  };

  // Fix 4: Bind in constructor
  constructor() {
    this.tick = this.tick.bind(this);
  }
}

const team = {
  name: 'Engineering',
  members: ['Alice', 'Bob', 'Charlie'],

  // ❌ Regular function inside method — 'this' is NOT the team object
  printMembers() {
    this.members.forEach(function (member) {
      // 'this' here is undefined (strict) or window (sloppy)
      console.log(`${member} is on ${this.name}`); // 💥 this.name is undefined
    });
  },

  // ✅ Arrow function — inherits 'this' from printMembers
  printMembersFixed() {
    this.members.forEach((member) => {
      // Arrow functions don't have their own 'this'
      // They use 'this' from the enclosing scope (printMembersFixed)
      console.log(`${member} is on ${this.name}`); // ✅ "Alice is on Engineering"
    });
  },
};

// Vanilla DOM — 'this' is the element
const button = document.querySelector('button');
button?.addEventListener('click', function () {
  console.log(this); // <button> element (the event target)
});

button?.addEventListener('click', () => {
  console.log(this); // Outer scope's 'this' (probably window/undefined)
  // Arrow functions DON'T get the element as 'this'
});

// React class component — classic pitfall
class SearchForm extends React.Component {
  state = { query: '' };

  // ❌ 'this' is undefined when called as event handler
  handleSubmit(event: React.FormEvent) {
    event.preventDefault();
    this.setState({ query: '' }); // 💥 TypeError
  }

  // ✅ Arrow function class field — 'this' is always the instance
  handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    this.setState({ query: '' }); // ✅ Works
  };
}

const logger = {
  prefix: '[LOG]',

  // ❌ Arrow function — 'this' is fixed to where it was defined
  log: (message: string) => {
    // 'this' is the module/global scope, NOT the logger object
    console.log(`${this.prefix} ${message}`); // undefined + message
  },

  // ✅ Regular function — 'this' is set by call site
  log(message: string) {
    console.log(`${this.prefix} ${message}`); // "[LOG] hello"
  },
};

logger.log('hello'); // Arrow: "undefined hello" | Regular: "[LOG] hello"

// call/apply/bind don't work on arrow functions
const arrowFn = () => console.log(this);
arrowFn.call({ name: 'custom' }); // Still logs outer 'this', ignores { name: 'custom' }