The answer
Class fields defined as arrows (handleClick = () => { ... }). They capture this from the constructor's scope (the instance), so they are always bound. They are per-instance (not on the prototype), so they cost a bit more memory.
this in ES6 Classes in JavaScript
What are arrow class fields in JavaScript and how do they affect this?
More FAQs in this in ES6 Classes in JavaScript
this in the constructor is the new instance. this in methods is the instance when called as instance.method(). But detaching a method (passing to setTimeout or addEventListener) loses this. Fix with bind, arrow class fields, or arrow wrappers.
Because the method is detached from the instance when passed as a reference. The callback is called as a plain function, so this is not the instance. Fix by binding in the constructor or using arrow class fields.
Three ways: bind in the constructor (this.handleClick = this.handleClick.bind(this)), use arrow class fields (handleClick = () => { ... }), or use arrow wrappers in callbacks (setTimeout(() => this.method(), 1000)).
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.