Le mot-clé this en JavaScript

Chapitre 16 — La programmation orientée objet · 16.2 Le mot-clé this en JavaScript

1. this désigne l'objet qui appelle

Dans une méthode, this désigne l'objet sur lequel la méthode a été appelée : ce qui est écrit avant le point. Il n'est pas fixé quand on écrit la méthode, mais au moment de l'appel.

class Minuteur {
  constructor(nom) {
    this.nom = nom;
  }
  presenter() {
    return `Je suis ${this.nom}`;
  }
}

const m = new Minuteur("Chrono");
console.log(m.presenter()); // this = m (l'objet avant le point)

const presenterSeule = m.presenter; // on détache la méthode de son objet
try {
  presenterSeule(); // plus d'objet avant le point → this = undefined
} catch (e) {
  console.log(e.constructor.name + " :", e.message);
}

Résultat dans la console

Je suis Chrono
TypeError : Cannot read properties of undefined (reading 'nom')

En détachant la méthode, on perd « l'objet avant le point ». Dans une classe (toujours en mode strict), this vaut alors undefined.

Figure 1 — Les cinq règles de this.

2. Le piège des callbacks

Passer une méthode à setTimeout, addEventListener ou forEach revient à la détacher de son objet :

class Compteur {
  constructor() {
    this.valeur = 0;
  }
  incrementer() {
    this.valeur++;
    console.log("valeur =", this.valeur);
  }
}

const c = new Compteur();

// ✗ La méthode est passée SEULE : setTimeout l'appelle sans notre objet,
//   this n'est plus c → this.valeur n'existe pas → undefined + 1 = NaN
setTimeout(c.incrementer, 0);

// ✓ Solution 1 : une fonction fléchée qui appelle la méthode SUR l'objet
setTimeout(() => c.incrementer(), 10);

// ✓ Solution 2 : bind crée une copie de la fonction avec this fixé
setTimeout(c.incrementer.bind(c), 20);

Résultat dans la console

valeur = NaN
valeur = 1
valeur = 2

Le premier appel affiche NaN: this n'était plus le compteur, donc this.valeur était undefined. Deux solutions :

• une fonction fléchée qui appelle la méthode sur l'objet : () => c.incrementer();
• bind, qui crée une copie de la fonction avec this fixé : c.incrementer.bind(c).

3. Les fonctions fléchées n'ont pas leur propre this

Une fonction fléchée reprend le this du code qui l'entoure. C'est idéal à l'intérieur d'une méthode, mais pas comme méthode d'un objet littéral :

class Horloge {
  constructor() {
    this.secondes = 0;
  }
  demarrer() {
    // La fonction fléchée n'a PAS son propre this : elle prend celui de demarrer()
    const id = setInterval(() => {
      this.secondes++;
      console.log("tic", this.secondes);
      if (this.secondes === 3) clearInterval(id);
    }, 100);
  }
}
new Horloge().demarrer();

// ✗ À l'inverse, une fléchée comme méthode d'objet littéral n'a pas l'objet comme this
const chat = {
  nom: "Minou",
  direNomFleche: () => `this.nom = ${this.nom}`, // this ne désigne PAS chat
  direNom() { return `this.nom = ${this.nom}`; },
};
console.log("Fléchée :", chat.direNomFleche());
console.log("Méthode :", chat.direNom());

Résultat dans la console

Fléchée : this.nom = undefined
Méthode : this.nom = Minou
tic 1
tic 2
tic 3

4. call, apply et bind

function presenter(salutation, ponctuation) {
  return `${salutation}, je suis ${this.nom}${ponctuation}`;
}
const amina = { nom: "Amina" };

console.log(presenter.call(amina, "Bonjour", " !"));    // arguments un par un
console.log(presenter.apply(amina, ["Salut", "."]));    // arguments dans un tableau
const presenterAmina = presenter.bind(amina, "Coucou"); // nouvelle fonction, this fixé
console.log(presenterAmina(" :)"));

Résultat dans la console

Bonjour, je suis Amina !
Salut, je suis Amina.
Coucou, je suis Amina :)

// Dans une page web : le piège classique avec addEventListener
class Bouton {
  constructor(element) {
    this.clics = 0;
    // ✗ element.addEventListener("click", this.compter);  → this = l'élément HTML
    element.addEventListener("click", () => this.compter()); // ✓
  }
  compter() {
    this.clics++;
  }
}

← 16.1 La programmation orientée objet : classes et instances16.3 Getters, setters et membres statiques →