How do arrow functions differ from traditional functions regarding `this`?

A traditional function decides what this means at call time, from how it was called. An arrow function does not decide at all. MDN is blunt about it: "Arrow functions don't have their own bindings to this, arguments, or super, and should not be used as methods." Having no binding of its own, the name this inside an arrow resolves outward into the enclosing scope, exactly like any other closed-over variable. That is why "arrow functions establish this based on the scope the arrow function is defined within, and the this value does not change based on how the function is invoked" — call, apply and bind cannot move it afterwards. The bug this prevents is the one waiting in every callback: hand a traditional function to addEventListener or setTimeout and this becomes the element or undefined rather than your object, which is why the old code around it is full of bind calls and a self variable. The same property is a trap in the other direction. Write an object method as an arrow and this looks straight past the object at whatever surrounded the literal.