Comparison
Closurevsthis binding
Closure
the callback still had the variable from the function that created it, long after that function returned.
A function together with the scope it was defined in, which it keeps alive for as long as the function is reachable. It is the mechanism behind every callback that remembers something, and behind private state without classes. It is also a memory hazard: a closure over a large object or a DOM node keeps that object alive, which is one of the most common shapes of a leak in a long-lived page.
Full entry →this binding
you passed the method as a callback and it lost the object it belonged to.
The rule that in a normal function `this` is decided by how the function is called, not where it was written. Extracting a method and passing it as a handler drops the receiver, which is why class methods get bound in the constructor or written as arrow functions. Arrow functions have no `this` of their own and take it from the enclosing scope, which is what makes them the default inside components.
Full entry →