How Arrow Functions Change this in JavaScript

const obj = {
  name: "Widget",
  // Regular function — this is dynamic, set at call time
  regularMethod() {
    console.log("Regular:", this.name); // "Widget" when called as obj.regularMethod()
  },
  // Arrow function — this is lexical, captured from obj's surrounding scope
  arrowMethod: () => {
    console.log("Arrow:", this?.name); // undefined! this = outer scope (module/global)
  },
};
 
obj.regularMethod(); // "Regular: Widget"
obj.arrowMethod();   // "Arrow: undefined"

// The old problem
class DataProcessor {
  constructor(data) {
    this.data = data;
    this.results = [];
  }
 
  // OLD: self = this workaround
  processOld() {
    const self = this; // Capture this
    this.data.forEach(function(item) {
      self.results.push(item * 2); // Must use self, not this
    });
  }
 
  // BETTER: bind
  processWithBind() {
    this.data.forEach(function(item) {
      this.results.push(item * 2);
    }.bind(this)); // Bind this to the callback
  }
 
  // BEST (ES6): Arrow function captures this from processArrow's scope
  processArrow() {
    this.data.forEach(item => {
      this.results.push(item * 2); // this = DataProcessor instance ✓
    });
  }
}
 
const dp = new DataProcessor([1, 2, 3, 4, 5]);
dp.processArrow();
console.log(dp.results); // [2, 4, 6, 8, 10]

class Timer {
  constructor() {
    this.seconds = 0;
  }
 
  start() {
    // Arrow captures this from start() — which is the Timer instance
    const tick = () => {
      this.seconds += 1;
 
      if (this.seconds % 5 === 0) {
        // Nested arrow still uses Timer's this
        const log = () => console.log(`${this.seconds}s elapsed`);
        log();
      }
    };
 
    return setInterval(tick, 1000);
  }
}
 
const t = new Timer();
t.start();

const identity = () => this;
 
const obj1 = { x: 1 };
const obj2 = { x: 2 };
 
identity.call(obj1);  // Not obj1 — returns the captured lexical this
identity.apply(obj2); // Not obj2 — same
identity.bind(obj1)(); // Not obj1 — bind creates a wrapper but this is still captured
 
// bind() returns a "bound" function, but the arrow's this isn't changed
const bound = identity.bind({ y: 99 });
bound(); // Same captured this as the original arrow

function outer() {
  // Arrow captures this from outer()
  const inner = () => {
    console.log(this); // same as outer's this
  };
  inner();
}
 
outer.call({ tag: "outer-this" }); // Logs { tag: "outer-this" }
 
// In a class:
class Example {
  constructor() {
    // Arrow captures this from constructor — which is the instance
    this.fn = () => console.log(this);
  }
}
const e = new Example();
e.fn(); // Logs the Example instance
const extracted = e.fn;
extracted(); // Still logs the Example instance — arrow, cannot be lost

const counter = {
  count: 0,
  // WRONG: arrow captures outer (module) this, not counter
  increment: () => {
    this.count++; // this is not counter!
  },
  // CORRECT: regular function or shorthand
  incrementCorrect() {
    this.count++;
  },
};
 
counter.increment();        // Does not work
counter.incrementCorrect(); // Works: this = counter

button.addEventListener("click", () => {
  console.log(this); // NOT the button — outer lexical this
});
 
button.addEventListener("click", function() {
  console.log(this); // The button element — regular function
});

const Person = (name) => { this.name = name; };
// new Person("Alice") → TypeError: Person is not a constructor

function Dog(name) { this.name = name; }
 
// WRONG: arrow captures outer this at definition time, not each instance
Dog.prototype.bark = () => `${this.name} barks`; // this = outer scope
 
// CORRECT: regular function — captured at call time
Dog.prototype.bark = function() { return `${this.name} barks`; };

class SearchBar {
  constructor(input) {
    this.input = input;
    this.results = [];
    // Arrow captures this = SearchBar instance — safe to extract as callback
    this.handleInput = (event) => {
      this.search(event.target.value);
    };
    input.addEventListener("input", this.handleInput);
  }
 
  search(query) {
    this.results = [`result for: ${query}`]; // this always = SearchBar instance
  }
 
  destroy() {
    this.input.removeEventListener("input", this.handleInput);
  }
}

class SearchBar {
  results = [];
  // Class field arrow — this is always the instance
  handleInput = (event) => {
    this.search(event.target.value);
  };
 
  search(query) {
    this.results = [`result for: ${query}`];
  }
}