Liaison 'this' en JavaScript : Changement de contexte vs. Comportement des fonctions fléchées

Le mot-clé 'this' en JavaScript est l'une des fonctionnalités les plus puissantes, mais aussi l'une des plus mal comprises, du langage. Son comportement peut être une source de confusion, en particulier pour les développeurs débutants en JavaScript ou ceux habitués à des langages avec des règles de portée plus rigides. En son cœur, 'this' fait référence au contexte dans lequel une fonction est exécutée. Ce contexte peut changer dynamiquement, conduisant à ce que l'on appelle souvent un 'changement de contexte'. Comprendre comment et pourquoi 'this' change est crucial pour écrire du code JavaScript robuste et prévisible, en particulier dans les applications complexes et lors de la collaboration avec une équipe mondiale. Cet article approfondira les subtilités de la liaison 'this' dans les fonctions JavaScript traditionnelles, la contrastera avec le comportement des fonctions fléchées et fournira des aperçus pratiques pour les développeurs du monde entier.

Comprendre le mot-clé 'this' en JavaScript

'this' est une référence à l'objet qui exécute actuellement le code. La valeur de 'this' est déterminée par la manière dont une fonction est appelée, et non par l'endroit où la fonction est définie. Cette liaison dynamique est ce qui rend 'this' si flexible, mais aussi une source fréquente de pièges. Nous allons explorer les différents scénarios qui influencent la liaison 'this' dans les fonctions standard.

1. Contexte global

Lorsque 'this' est utilisé en dehors de toute fonction, il fait référence à l'objet global. Dans un environnement de navigateur, l'objet global est window. Dans Node.js, c'est global.

            // Dans un environnement de navigateur
console.log(this === window); // true

// Dans un environnement Node.js
// console.log(this === global); // true (dans la portée de niveau supérieur)

            

              
                Copy
              
            
          

Perspective globale : Bien que window soit spécifique aux navigateurs, le concept d'un objet global auquel 'this' fait référence dans la portée de niveau supérieur reste valable dans différents environnements JavaScript. C'est un aspect fondamental du contexte d'exécution de JavaScript.

2. Invocation de méthode

Lorsqu'une fonction est appelée comme méthode d'un objet (en utilisant la notation par point ou la notation par crochets), 'this' à l'intérieur de cette fonction fait référence à l'objet sur lequel la méthode a été appelée.

            const person = {
  name: "Alice",
  greet: function() {
    console.log(`Bonjour, je m'appelle ${this.name}`);
  }
};

person.greet(); // Sortie : Bonjour, je m'appelle Alice

            

              
                Copy
              
            
          

Dans cet exemple, greet est appelée sur l'objet person. Par conséquent, à l'intérieur de greet, 'this' fait référence à person, et this.name accède correctement à "Alice".

3. Invocation de constructeur

Lorsqu'une fonction est utilisée comme constructeur avec le mot-clé new, 'this' à l'intérieur du constructeur fait référence à la nouvelle instance de l'objet créée.

            
function Car(make, model) {
  this.make = make;
  this.model = model;
  this.displayInfo = function() {
    console.log(`Cette voiture est une ${this.make} ${this.model}`);
  };
}

const myCar = new Car("Toyota", "Corolla");
myCar.displayInfo(); // Sortie : Cette voiture est une Toyota Corolla

            

              
                Copy
              
            
          

Ici, new Car(...) crée un nouvel objet, et 'this' à l'intérieur de la fonction Car pointe vers ce nouvel objet. Les propriétés make et model lui sont attribuées.

4. Invocation de fonction simple (Changement de contexte)

C'est là que la confusion commence souvent. Lorsqu'une fonction est appelée directement, pas comme une méthode ou un constructeur, sa liaison 'this' peut être délicate. En mode non strict, 'this' est par défaut l'objet global (window ou global). En mode strict ('use strict';), 'this' est undefined.

            function showThis() {
  console.log(this);
}

// Mode non strict :
showThis(); // Dans le navigateur : pointe vers l'objet window

// Mode strict :
'use strict';
function showThisStrict() {
  console.log(this);
}
showThisStrict(); // undefined

            

              
                Copy
              
            
          

Perspective globale : La distinction entre le mode strict et le mode non strict est essentielle à l'échelle mondiale. De nombreux projets JavaScript modernes imposent le mode strict par défaut, faisant du comportement undefined le scénario le plus courant pour les appels de fonctions simples. Il est essentiel d'être conscient de ce paramètre d'environnement.

5. Gestionnaires d'événements

Dans les environnements de navigateur, lorsqu'une fonction est utilisée comme gestionnaire d'événements, 'this' fait généralement référence à l'élément DOM qui a déclenché l'événement.

            // En supposant un élément HTML : Cliquez ici

const button = document.getElementById('myButton');

button.addEventListener('click', function() {
  console.log(this); // 'this' fait référence à l'élément button
  this.textContent = "Cliqué !";
});

            

              
                Copy
              
            
          

Perspective globale : Bien que la manipulation du DOM soit spécifique au navigateur, le principe sous-jacent selon lequel 'this' est lié à l'élément qui a déclenché l'événement est un schéma courant dans la programmation événementielle sur diverses plateformes.

6. Call, Apply et Bind

JavaScript fournit des méthodes pour définir explicitement la valeur de 'this' lors de l'appel d'une fonction :

• call() : Appelle une fonction avec une valeur 'this' spécifiée et des arguments fournis individuellement.
• apply() : Appelle une fonction avec une valeur 'this' spécifiée et des arguments fournis sous forme de tableau.
• bind() : Crée une nouvelle fonction qui, lorsqu'elle est appelée, a son mot-clé 'this' défini sur une valeur fournie, quelle que soit la manière dont elle est appelée.

            const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // undefined (en mode strict) ou erreur (en mode non strict)

// Utilisation de call pour définir explicitement 'this'
const boundGetXCall = unboundGetX.call(module);
console.log(boundGetXCall); // 42

// Utilisation d'apply (arguments sous forme de tableau, non pertinent ici mais démontre la syntaxe)
const boundGetXApply = unboundGetX.apply(module);
console.log(boundGetXApply); // 42

// Utilisation de bind pour créer une nouvelle fonction avec 'this' lié de manière permanente
const boundGetXBind = unboundGetX.bind(module);
console.log(boundGetXBind()); // 42

            

              
                Copy
              
            
          

bind() est particulièrement utile pour préserver le contexte 'this' correct, en particulier dans les opérations asynchrones ou lors du passage de fonctions en tant que rappels. C'est un outil puissant pour la gestion explicite du contexte.

Le défi du 'this' dans les fonctions de rappel

L'une des sources les plus fréquentes de problèmes de liaison 'this' survient avec les fonctions de rappel, en particulier dans les opérations asynchrones comme setTimeout, les écouteurs d'événements ou les requêtes réseau. Parce que la fonction de rappel est exécutée plus tard et dans un contexte différent, sa valeur 'this' s'écarte souvent de ce qui est attendu.

            function Timer() {
  this.seconds = 0;

  setInterval(function() {
    // 'this' ici fait référence à l'objet global (ou undefined en mode strict)
    // PAS à l'instance Timer !
    this.seconds += 1;
    console.log(this.seconds);
  }, 1000);
}

// const timer = new Timer(); // Cela provoquera probablement des erreurs ou un comportement inattendu.

            

              
                Copy
              
            
          

Dans l'exemple ci-dessus, la fonction passée à setInterval est une invocation de fonction simple, donc son contexte 'this' est perdu. Cela conduit à tenter d'incrémenter une propriété sur l'objet global (ou undefined), ce qui n'est pas l'intention.

Solutions aux problèmes de contexte de rappel

Historiquement, les développeurs employaient plusieurs solutions de contournement :

• Auto-référencement (that = this) : Un schéma courant consistait à stocker une référence à 'this' dans une variable avant la fonction de rappel.

            function Timer() {
  this.seconds = 0;
  const that = this; // Stocke le contexte 'this'

  setInterval(function() {
    that.seconds += 1;
    console.log(that.seconds);
  }, 1000);
}

const timer = new Timer();

            

              
                Copy
              
            
          

• bind() : Utilisation de bind() pour définir explicitement le contexte 'this' pour la fonction de rappel.

            function Timer() {
  this.seconds = 0;

  setInterval(function() {
    this.seconds += 1;
    console.log(this.seconds);
  }.bind(this), 1000);
}

const timer = new Timer();

            

              
                Copy
              
            
          

Ces méthodes ont résolu efficacement le problème en garantissant que 'this' faisait toujours référence à l'objet souhaité. Cependant, elles ajoutent de la verbosité et nécessitent un effort conscient pour s'en souvenir et les appliquer.

Introduction aux fonctions fléchées : une approche plus simple

ECMAScript 6 (ES6) a introduit les fonctions fléchées, qui offrent une syntaxe plus concise et, surtout, une approche différente de la liaison 'this'. La caractéristique clé des fonctions fléchées est qu'elles n'ont pas leur propre liaison 'this'. Au lieu de cela, elles capturent lexicalement la valeur 'this' de leur portée environnante.

'this' lexical signifie que 'this' à l'intérieur d'une fonction fléchée est le même que 'this' à l'extérieur de la fonction fléchée, partout où cette fonction fléchée est définie.

Revenons à l'exemple Timer en utilisant une fonction fléchée :

            function Timer() {
  this.seconds = 0;

  setInterval(() => {
    // 'this' à l'intérieur de la fonction fléchée est lié lexicalement
    // au 'this' de la fonction Timer environnante.
    this.seconds += 1;
    console.log(this.seconds);
  }, 1000);
}

const timer = new Timer();

            

              
                Copy
              
            
          

C'est beaucoup plus propre. La fonction fléchée () => { ... } hérite automatiquement du contexte 'this' de la fonction constructeur Timer où elle est définie. Pas besoin de that = this ou bind() pour ce cas d'utilisation spécifique.

Quand utiliser les fonctions fléchées pour 'this'

Les fonctions fléchées sont idéales lorsque :

• Vous avez besoin d'une fonction qui hérite de 'this' de sa portée environnante.
• Vous écrivez des fonctions de rappel pour des méthodes comme setTimeout, setInterval, des méthodes de tableau (map, filter, forEach) ou des écouteurs d'événements où vous souhaitez préserver le contexte 'this' de la portée externe.

Quand NE PAS utiliser les fonctions fléchées pour 'this'

Il existe des scénarios où les fonctions fléchées ne conviennent pas, et il est nécessaire d'utiliser une expression de fonction ou une déclaration traditionnelle :

• Méthodes d'objet : Si vous souhaitez que la fonction soit une méthode d'un objet et que 'this' fasse référence à l'objet lui-même, utilisez une fonction régulière.

            const counter = {
  count: 0,
  // Utilisation d'une fonction régulière pour une méthode
  increment: function() {
    this.count++;
    console.log(this.count);
  },
  // L'utilisation d'une fonction fléchée ici ne fonctionnerait PAS comme prévu pour 'this'
  // incrementArrow: () => {
  //   this.count++; // 'this' ne ferait pas référence à 'counter'
  // }
};

counter.increment(); // Sortie : 1

            

              
                Copy
              
            
          

Si incrementArrow était défini comme une fonction fléchée, 'this' serait lié lexicalement à la portée environnante (probablement l'objet global ou undefined en mode strict), et non à l'objet counter.

• Constructeurs : Les fonctions fléchées ne peuvent pas être utilisées comme constructeurs. Elles n'ont pas leur propre 'this' et ne peuvent donc pas être invoquées avec le mot-clé new.

            // const MyClass = () => { this.value = 1; }; // Cela lèvera une erreur lorsqu'il sera utilisé avec 'new'
// const instance = new MyClass();

            

              
                Copy
              
            
          

• Gestionnaires d'événements où 'this' doit être l'élément DOM : Comme vu dans l'exemple du gestionnaire d'événements, si vous avez besoin que 'this' fasse référence à l'élément DOM qui a déclenché l'événement, vous devez utiliser une expression de fonction traditionnelle.

            // Cela fonctionne comme prévu :
button.addEventListener('click', function() {
  console.log(this); // 'this' est le bouton
});

// Ceci ne fonctionnerait PAS comme prévu :
// button.addEventListener('click', () => {
//   console.log(this); // 'this' serait lié lexicalement, pas le bouton
// });

            

              
                Copy
              
            
          

Considérations globales pour la liaison 'this'

Développer des logiciels avec une équipe mondiale implique de rencontrer divers styles de codage, configurations de projet et bases de code héritées. Une compréhension claire de la liaison 'this' est essentielle pour une collaboration harmonieuse.

• La cohérence est la clé : Établissez des conventions claires pour l'équipe sur quand utiliser les fonctions fléchées par rapport aux fonctions traditionnelles, en particulier en ce qui concerne la liaison 'this'. La documentation de ces décisions est vitale.
• Conscience de l'environnement : Soyez conscient de savoir si votre code s'exécutera en mode strict ou non strict. Le undefined du mode strict pour les appels de fonctions nus est le défaut moderne et une pratique plus sûre.
• Tests du comportement de 'this' : Testez minutieusement les fonctions où la liaison 'this' est critique. Utilisez des tests unitaires pour vérifier que 'this' fait référence au contexte attendu dans divers scénarios d'invocation.
• Revues de code : Lors des revues de code, accordez une attention particulière à la manière dont 'this' est géré. C'est un domaine courant où des bogues subtils peuvent être introduits. Encouragez les réviseurs à questionner l'utilisation de 'this', en particulier dans les fonctions de rappel et les structures d'objets complexes.
• Exploitation des fonctionnalités modernes : Encouragez l'utilisation des fonctions fléchées lorsque cela est approprié. Elles conduisent souvent à un code plus lisible et plus maintenable en simplifiant la gestion du contexte 'this' pour les schémas asynchrones courants.

Résumé : Changement de contexte vs. Liaison lexicale

La différence fondamentale entre les fonctions traditionnelles et les fonctions fléchées concernant la liaison 'this' peut être résumée comme suit :

• Fonctions traditionnelles : 'this' est lié dynamiquement en fonction de la manière dont la fonction est appelée (méthode, constructeur, globale, etc.). C'est un changement de contexte.
• Fonctions fléchées : 'this' est lié lexicalement à la portée environnante où la fonction fléchée est définie. Elles n'ont pas leur propre 'this'. Cela fournit un comportement 'this' lexical prévisible.

Maîtriser la liaison 'this' est un rite de passage pour tout développeur JavaScript. En comprenant les règles des fonctions traditionnelles et en exploitant la liaison lexicale cohérente des fonctions fléchées, vous pouvez écrire du code JavaScript plus propre, plus fiable et plus maintenable, quelle que soit votre situation géographique ou la structure de votre équipe.

Insights actionnables pour les développeurs du monde entier

Voici quelques conclusions pratiques :

1. Optez par défaut pour les fonctions fléchées pour les rappels : Lorsque vous passez des fonctions en tant que rappels à des opérations asynchrones (setTimeout, setInterval, Promises, écouteurs d'événements où l'élément n'est pas le 'this' cible), privilégiez les fonctions fléchées pour leur liaison 'this' prévisible.
2. Utilisez des fonctions régulières pour les méthodes d'objet : Si une fonction est destinée à être une méthode d'un objet et a besoin d'accéder aux propriétés de cet objet via 'this', utilisez une déclaration ou une expression de fonction régulière.
3. Évitez les fonctions fléchées pour les constructeurs : Elles sont incompatibles avec le mot-clé new.
4. Soyez explicite avec bind() lorsque nécessaire : Bien que les fonctions fléchées résolvent de nombreux problèmes, vous pourriez parfois encore avoir besoin de bind(), en particulier lorsque vous traitez du code plus ancien ou des schémas de programmation fonctionnelle plus complexes où vous devez pré-définir 'this' pour une fonction qui sera transmise indépendamment.
5. Éduquez votre équipe : Partagez ces connaissances. Assurez-vous que tous les membres de l'équipe comprennent ces concepts pour éviter les bogues courants et maintenir la qualité du code dans son ensemble.
6. Utilisez des linters et une analyse statique : Des outils comme ESLint peuvent être configurés pour détecter les erreurs courantes de liaison 'this', aidant à faire respecter les conventions d'équipe et à attraper les erreurs tôt.

En intériorisant ces principes, les développeurs de tous horizons peuvent naviguer dans les complexités du mot-clé 'this' de JavaScript avec confiance, ce qui conduit à des expériences de développement plus efficaces et collaboratives.