Why do arrow functions have lexical this, and when should you avoid using an arrow function?

Direct answer

An arrow function does not create its own this binding; references to this are resolved from the surrounding scope, which is useful for callbacks but often wrong for object methods that need a dynamic receiver.

An arrow function captures the surrounding this rather than receiving one from the call site. That makes arrows convenient inside methods when an inner callback should keep the outer method receiver.

For example, a regular method can use an arrow callback: const timer = { value: 0, start(){ setTimeout(() => { this.value++; }, 100); } };. The arrow callback reuses the this of start().

Avoid an arrow as an object method when you expect this to become the object through obj.method().
Arrow functions cannot be used as constructors with new and do not have their own arguments object.
Using call(), apply(), or bind() cannot replace an arrow function’s lexical this with a new receiver.