Pourquoi `this` est `undefined` dans ma méthode passée en callback ?

Question

J'ai une classe :

```js
class Compteur {
  count = 0;
  incr() { this.count++; }
}
const c = new Compteur();
button.addEventListener('click', c.incr);
```

Au clic : `TypeError: Cannot read properties of undefined (reading 'count')`. Pourquoi `this` est perdu ?

Accepted Answer

En JavaScript, `this` dépend de **la façon dont la fonction est appelée**, pas de l'endroit où elle est définie. En passant `c.incr`, tu passes la fonction seule, détachée de `c`. `addEventListener` l'appelle ensuite avec `this` = l'élément (ou `undefined` en mode strict dans une classe).

Trois solutions :

```js
// 1. bind
button.addEventListener('click', c.incr.bind(c));

// 2. fonction fléchée à l'appel
button.addEventListener('click', () => c.incr());

// 3. champ de classe en fonction fléchée (this lexical)
class Compteur {
  count = 0;
  incr = () => { this.count++; };
}
```

La solution 3 est la plus pratique si la méthode sert souvent de callback. Elle crée une fonction par instance, ce qui est négligeable dans la plupart des cas.

1 réponse