@bound
The @bound decorator automatically binds a method to its class instance, ensuring this always refers to the component. This is particularly useful when passing methods as callbacks (e.g., to event listeners or timers).
Usage
import { RadiantElement, customElement, bound } from '@ecopages/radiant';
@customElement('timer-component')
export class TimerComponent extends RadiantElement {
private count = 0;
@bound
increment() {
this.count++;
console.log(this.count);
}
connectedCallback() {
super.connectedCallback();
// ✅ Works: 'this' is bound to the instance
setTimeout(this.increment, 1000);
}
}
Common Use Cases
Event Listeners
@customElement('scroll-tracker')
export class ScrollTracker extends RadiantElement {
@bound
handleScroll() {
console.log(`Scrolled to: ${window.scrollY}px`);
}
connectedCallback() {
super.connectedCallback();
window.addEventListener('scroll', this.handleScroll);
}
disconnectedCallback() {
window.removeEventListener('scroll', this.handleScroll);
}
}
Promise Callbacks
@bound
handleData(data: any[]) {
this.data = data;
}
async loadData() {
fetch('/api/data')
.then(res => res.json())
.then(this.handleData);
}
@bound vs Arrow Functions
While arrow functions also capture this, @bound methods are defined on the prototype (shared across instances) but bound per instance on first access. This is generally more memory-efficient than creating a new arrow function for every class instance.
@customElement('my-component')
export class MyComponent extends RadiantElement {
// ✅ Prototype method, bound to instance
@bound
boundMethod() { }
// ❌ Instance property (new function per instance)
arrowMethod = () => { }
}