Le mot-clé this en JavaScript

Dans le monde du développement web, JavaScript est l'un des langages de programmation les plus utilisés. Malgré sa popularité, certains concepts délicats donnent du fil à retordre aux développeurs. L'un d'eux est le mot-clé « this ».

Le mot-clé « this » en JavaScript peut être très déroutant, surtout pour les développeurs venant d'autres langages. En gros, « this » renvoie au contexte dans lequel une fonction est appelée. Il peut toutefois changer selon le contexte et mener à des résultats inattendus.

Pour simplifier, prenons un exemple :

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    console.log(this.firstName + " " + this.lastName);
  }
}

person.fullName(); // Output: John Doe

Dans cet exemple, le mot-clé « this » renvoie à l'objet « person », car la fonction « fullName » est appelée dans le contexte de cet objet.

Mais que se passe-t-il si nous appelons cette fonction dans un autre contexte ? Regardons l'exemple suivant :

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    console.log(this.firstName + " " + this.lastName);
  }
}

const printFullName = person.fullName;
printFullName(); // Output: undefined undefined

Ici, la fonction « fullName » est appelée dans un autre contexte, à savoir le contexte global. Comme il n'existe pas de variables « firstName » ni « lastName » dans le contexte global, la fonction renvoie « undefined ».

Pour résoudre ce problème, nous pouvons lier explicitement « this » à l'objet « person » avec la méthode « bind » :

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    console.log(this.firstName + " " + this.lastName);
  }
}

const printFullName = person.fullName.bind(person);
printFullName(); // Output: John Doe

Nous utilisons ici la méthode « bind » pour fixer « this » sur l'objet « person », peu importe l'endroit où la fonction est appelée.

Au final, le mot-clé « this » en JavaScript peut être très déroutant, mais avec un peu de pratique et de compréhension des concepts sous-jacents, les développeurs peuvent facilement résoudre ce problème. En utilisant la méthode « bind » et d'autres techniques, ils s'assurent que leurs fonctions sont toujours appelées dans le bon contexte.