Le mot-clé this en JavaScript peut prêter à confusion car il se comporte différemment dans les fonctions normales et les fonctions fléchées. Dans cet article de blog, nous expliquerons comment cela fonctionne dans les deux types de fonctions, explorerons pourquoi ces différences existent et fournirons les connaissances de base dont vous avez besoin pour comprendre cela en JavaScript.

Fonctions régulières

Les fonctions régulières en JavaScript sont définies à l'aide du mot-clé function. La valeur de this dans ces fonctions dépend de la manière dont la fonction est appelée. Voici plusieurs exemples :

1. Contexte mondial

• Mode non strict :

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

  regularFunction(); // Logs the global object (window in browsers)

• Explication : En mode non strict, lorsqu'une fonction est appelée dans le contexte global (et non comme méthode d'un objet), cela fait référence à l'objet global (fenêtre dans les navigateurs ou global dans Node .js).

  • Mode strict :

  'use strict';

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

  regularFunction(); // Logs undefined

• Explication : En mode strict, cela reste indéfini lorsqu'une fonction est appelée dans le contexte global, offrant un environnement plus sûr en empêchant les modifications accidentelles de l'objet global.

2. Appel de méthode

Lorsqu'une fonction est appelée en tant que méthode d'un objet, cela fait référence à cet objet.

• Exemple:

  const obj = {
      method: function() {
          console.log(this);
      }
  };

  obj.method(); // Logs obj

• Explication : Dans ce cas, cela pointe vers obj car la fonction est appelée comme méthode d'obj.

  • Mode strict : Le comportement reste le même en mode strict.

3. Appel du constructeur

Lorsqu'une fonction est utilisée comme constructeur (appelée avec le mot-clé new), elle fait référence à l'instance nouvellement créée.

• Exemple:

  function Person(name) {
      this.name = name;
      this.sayHello = function() {
          console.log(`Hello, my name is ${this.name}`);
      };
  }

  const person1 = new Person('Alice');
  person1.sayHello(); // Logs "Hello, my name is Alice"

  const person2 = new Person('Bob');
  person2.sayHello(); // Logs "Hello, my name is Bob"

• Explication : Lorsqu'il est appelé avec new, this à l'intérieur de la fonction constructeur Person fait référence à la nouvelle instance en cours de création. Chaque nouvelle instance (person1 et person2) obtient sa propre propriété name et sa propre méthode sayHello.

  • Mode strict : Le comportement reste le même en mode strict.

4. Liaison explicite

Vous pouvez explicitement lier cela en utilisant call, apply ou bind.

• Exemple:

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

  const obj = { value: 42 };

  regularFunction.call(obj);  // Logs obj
  regularFunction.apply(obj); // Logs obj

  const boundFunction = regularFunction.bind(obj);
  boundFunction();            // Logs obj

• Explication : appelle et applique immédiatement la fonction avec cet ensemble sur obj, tandis que bind crée une nouvelle fonction avec ceci lié en permanence à obj.

  • Mode strict : Le comportement reste le même en mode strict.

Fonctions des flèches

Les fonctions fléchées, introduites dans ES6, n'ont pas leur propre contexte. Au lieu de cela, ils héritent de la portée (lexicale) environnante. Cela rend les fonctions fléchées utiles dans certaines situations.

1. Lexical ceci

Les fonctions fléchées héritent de cela de la portée dans laquelle elles sont définies.

• Mode non strict :

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs the global object (window in browsers)

• Explication : Les fonctions fléchées n'ont pas leur propre ceci ; ils l'utilisent à partir du champ d'application environnant. Ici, il fait référence à l'objet global car la fonction est définie dans la portée globale.

  • Mode strict :

  'use strict';

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs undefined

• Explication : En mode strict, si la portée environnante est globale, elle reste indéfinie car héritée de la portée environnante.

2. Appel de méthode

Contrairement aux fonctions normales, les fonctions fléchées n'obtiennent pas leur propre ceci lorsqu'elles sont appelées en tant que méthodes. Ils héritent de cela de la portée englobante.

• Exemple:

  const obj = {
      method: () => {
          console.log(this);
      }
  };

  obj.method(); // Logs the global object (window in browsers) or undefined in strict mode

• Explication : Les fonctions fléchées ne lient pas leur propre ceci mais l'héritent de la portée lexicale. Dans cet exemple, cela fait référence à l'objet global ou non défini en mode strict, et non à obj.

  • Mode strict : Journaux non définis, pas obj.

3. Fonction fléchée dans une autre fonction

Lorsqu'une fonction fléchée est définie à l'intérieur d'une autre fonction, elle hérite de celle-ci de la fonction externe.

• Exemple:

  function outerFunction() {
      const arrowFunction = () => {
          console.log(this);
      };

      arrowFunction();
  }

  const obj = { value: 42, outerFunction: outerFunction };

  obj.outerFunction(); // Logs obj, because `this` in arrowFunction is inherited from outerFunction

• Explication : Dans ce cas, this à l'intérieur de la fonction de flèche fait référence à la même chose que dans externalFunction, qui est obj.

  • Mode strict : Le comportement reste le même en mode strict.

4. Fonction de flèche dans les gestionnaires d'événements

Les fonctions fléchées dans les gestionnaires d'événements héritent de cela de la portée lexicale environnante, et non de l'élément qui déclenche l'événement.

• Exemple:

  const button = document.querySelector('button');

  button.addEventListener('click', () => {
      console.log(this);
  }); // Logs the global object (window in browsers) or undefined in strict mode

• Explication : La fonction de flèche ne le lie pas à l'élément bouton ; il l'hérite de la portée environnante, qui est la portée globale ou non définie en mode strict.

  • Mode strict : Journaux non définis, pas l'élément bouton.

Pourquoi ces différences ?

La différence entre les fonctions normales et les fonctions fléchées réside dans la façon dont elles gèrent cela :

• Fonctions régulières : La valeur de ceci est dynamique et déterminée par le site d'appel (comment la fonction est appelée).
• Fonctions fléchées : La valeur de this est lexicale et définie au moment où la fonction est définie, en fonction de cette valeur du contexte d'exécution englobant.

Concepts clés à comprendre

Pour comprendre le comportement de ceci en JavaScript, vous devez connaître les concepts suivants :

1. Contexte d'exécution : Le contexte dans lequel le code est exécuté, affectant la façon dont il est déterminé.
2. Call-site : L'emplacement dans le code où une fonction est appelée, influençant sa valeur dans les fonctions normales.
3. Portée lexicale : Comment cela est hérité dans les fonctions fléchées de la portée environnante.
4. Mode strict : Comment le mode strict modifie le comportement par défaut de celui-ci dans certains contextes.

Résumé

• Fonctions régulières : celles-ci sont dynamiques et déterminées par le site d'appel.
• Fonctions fléchées : ceci est lexical et déterminé par la portée environnante lorsque la fonction est définie.

Comprendre ces distinctions vous aidera à écrire du code JavaScript plus prévisible et plus maintenable. Que vous utilisiez des fonctions classiques ou des fonctions fléchées, savoir comment cela fonctionne est crucial pour un développement JavaScript efficace.