Pourquoi le mot-clé \'this\' se comporte différemment dans les fonctions normales et les fonctions fléchées

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 comme 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), cela 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 : call et apply invoquent 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 this ; 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, celle-ci 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 du périmètre englobant.

• 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 this mais en héritent de la portée lexicale. Dans cet exemple, cela fait référence à l'objet global ou undéfini en mode strict, pas à obj.

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

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

Lorsqu'une fonction flèche 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 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.

• Example:

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

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

• Explanation: The arrow function does not bind this to the button element; it inherits it from the surrounding scope, which is the global scope or undefined in strict mode.

  • Strict Mode: Logs undefined, not the button element.

Why These Differences?

The difference between regular functions and arrow functions lies in how they handle this:

• Regular Functions: The value of this is dynamic and determined by the call-site (how the function is called).
• Arrow Functions: The value of this is lexical and set at the time the function is defined, based on the this value of the enclosing execution context.

Key Concepts to Understand

To understand the behavior of this in JavaScript, you need to know the following concepts:

1. Execution Context: The context in which code is executed, affecting how this is determined.
2. Call-site: The location in code where a function is called, influencing the value of this in regular functions.
3. Lexical Scoping: How this is inherited in arrow functions from the surrounding scope.
4. Strict Mode: How strict mode changes the default behavior of this in certain contexts.

Summary

• Regular Functions: this is dynamic and determined by the call-site.
• Arrow Functions: this is lexical and determined by the surrounding scope when the function is defined.

Understanding these distinctions will help you write more predictable and maintainable JavaScript code. Whether you're using regular functions or arrow functions, knowing how this works is crucial for effective JavaScript development.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!