L'opérateur \'this\' fait-il toujours référence à l'objet prévu en JavaScript ?

Comportement incohérent de l'opérateur "this" en JavaScript

L'opérateur "this" en JavaScript peut présenter un comportement incohérent en raison de sa référence changeante valeurs en fonction du contexte d’invocation. Cela peut être particulièrement problématique lors de l'utilisation des méthodes d'un objet comme fonctions de rappel.

Les modèles d'appel et "this"

Les fonctions JavaScript peuvent être invoquées de quatre manières :

1. En tant que méthode : Lorsqu'il est invoqué en tant que méthode dans un objet, "this" fait référence à l'objet lui-même.

   const obj = {
     method() {
    console.log(this); // Logs the object
     },
   };
   
   obj.method();

2. En fonction : Lorsqu'il est invoqué sans contexte spécifique, "this" fait référence à l'objet global, généralement l'objet fenêtre dans un navigateur.

   function fn() {
     console.log(this); // Logs the window object
   }
   
   fn();

3. En tant que constructeur : Lorsqu'il est invoqué à l'aide du nouveau mot-clé, "this" fait référence à une instance nouvellement créée de la classe.

   class MyClass {
     constructor() {
    console.log(this); // Logs an instance of MyClass
     }
   }
   
   new MyClass();

4. Avec la méthode apply : Les rappels utilisent ce modèle d'invocation. "this" peut être spécifié en passant le premier argument comme objet à référencer.

   const obj = {
     method() {
    console.log(this); // Logs the object
     },
   };
   
   const fn = obj.method.bind(obj);
   fn(); // Logs the object

Comportement incohérent dans les rappels

L'incohérence se produit lorsque les méthodes d'un objet sont utilisées comme fonctions de rappel. Étant donné que les rappels sont invoqués en tant que fonctions, « this » ferait référence à l'objet global. Cependant, on s'attend à ce qu'il fasse référence à l'objet auquel appartient la méthode.

Bonnes pratiques

Pour éviter cette incohérence, les meilleures pratiques suivantes sont recommandées :

• Conserver "this" Référence : Utilisez la méthode bind pour lier explicitement "this" à l'objet souhaité avant de transmettre la méthode comme rappel.

  const obj = {
  method() {
    console.log(this); // Logs the object
  },
  };
  
  const fn = obj.method.bind(obj);
  setTimeout(fn, 1000); // Logs the object

• Utiliser les fonctions fléchées : Les fonctions fléchées ont une portée lexicale implicite, ce qui signifie qu'elles héritent de la liaison « ceci » du contexte environnant. Cela élimine le besoin d'une liaison explicite.

  const obj = {
  method: () => {
    console.log(this); // Logs the object
  },
  };
  
  setTimeout(obj.method, 1000); // Logs the object

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!