this keyword

JavaScript 🟡 Mid

Définition

Référence au contexte d'exécution courant. Sa valeur dépend de comment la fonction est appelée : méthode (objet), constructeur (nouvelle instance), arrow function (this lexical), ou appel simple (undefined en strict).

Analogie

Le pronom 'je' : sa signification change selon qui parle, pas selon ou la phrase est écrite.

Exemple de code

const obj = {
  name: 'Alice',
  greet() { return this.name; },       // 'Alice'
  arrow: () => this.name,               // undefined (this lexical)
};
const fn = obj.greet;
fn(); // undefined (contexte perdu)

Cas d'usage

Accéder aux propriétés de l'objet courant dans les méthodes de classe ou les callbacks.

Anti-pattern

Passer une méthode comme callback sans bind, perdant le contexte this.

Termes liés

#core#interview#fondamental

En entretien

Explique-moi comment se détermine la valeur de this.
this dépend de comment la fonction est appelée : en méthode c'est l'objet, en constructeur c'est la nouvelle instance, en arrow function c'est le this lexical, et en appel simple c'est undefined en strict mode. C'est comme le pronom 'je', sa signification change selon qui parle, pas selon où la phrase est écrite.
Quel est le piège classique avec this qu'on voit souvent en entretien ?
Passer une méthode comme callback sans bind, ce qui fait perdre le contexte this. Dans l'exemple, const fn = obj.greet puis fn() renvoie undefined parce que fn n'est plus appelée comme méthode de obj.
Pourquoi une arrow function ne se comporte pas pareil qu'une méthode classique vis-à-vis de this ?
Parce qu'une arrow function n'a pas son propre this, elle capture celui du scope englobant au moment où elle est écrite. C'est pour ça que arrow: () => this.name renvoie undefined dans l'exemple, contrairement à greet() qui utilise correctement this.name.

Fiche mise à jour le 2026-09-27