this Context Traps

The 4 Rules of JavaScript this

In JavaScript, this is not bound to a function's declaration location (except for arrow functions); it is determined dynamically by how the function is called at the call-site:

1. Default Binding: Standalone function invocation (fn()). In strict mode, this is undefined. In non-strict mode, this defaults to globalThis (window in browsers).
2. Implicit Binding: Method invocation (obj.fn()). The object immediately preceding the dot becomes this.
3. Explicit Binding: Direct invocation with .call(), .apply(), or .bind().
4. new Binding: Constructor invocation (new Fn()). this refers to the newly created instance object.

The ECMAScript Bound Function Invariant

When Function.prototype.bind(thisArg) is executed, the JavaScript engine creates a Bound Function Exotic Object (§ 9.4.1 in ECMAScript specification):

• It stores [[BoundTargetFunction]] and [[BoundThis]] in internal slots.
• Whenever the bound function is invoked, its internal [[Call]] method calls the target function with [[BoundThis]], completely ignoring any this passed to .call() or .apply().
• If you chain .bind(): fn.bind(obj1).bind(obj2), the second bind wraps the first bound function. When called, the outer wrapper calls the inner wrapper with obj2, but the inner wrapper passes its own obj1 to the underlying function. The first bind ALWAYS wins!

function greet() {
  return this.name;
}
const a = greet.bind({ name: 'First' });
const b = a.bind({ name: 'Second' });

console.log(b()); // 'First' (First bind wins!)
console.log(a.call({ name: 'Override' })); // 'First' (call ignored!)

Arrow Functions: Lexical Scoping

Arrow functions do not have their own this binding at all. When this is referenced inside an arrow function, the engine resolves it just like any regular variable by searching up the lexical scope chain to the nearest enclosing non-arrow function or global environment. Consequently, methods like .call(), .apply(), and .bind() have zero effect on an arrow function's this.