Mot-clé &#this&#, méthodes call(), apply() et bind() en JavaScript - expliqué simplement

Apprendre les méthodes call(), apply() et bind() est important car elles vous permettent de contrôler le contexte de ceci en JavaScript. Dans les situations où ce comportement par défaut ne fonctionne pas comme prévu, comme lors de l'emprunt de méthodes d'un objet à un autre ou du maintien du contexte correct dans les rappels, ces méthodes offrent flexibilité et contrôle. En les maîtrisant, vous pouvez écrire des fonctions plus efficaces, réutilisables et sensibles au contexte, ce qui est particulièrement utile dans les applications complexes.

Avant de passer aux méthodes call(), apply() et bind(), comprenons le mot-clé « this » et son mécanisme.

« ce » mot-clé

Comprenons quand et à quoi ce mot-clé fait référence grâce aux puces suivantes :

• Dans une méthode objet, ceci fait référence à l'objet. À l'intérieur d'une méthode définie dans un objet, cela pointera vers l'objet qui possède la méthode.

• Dans une fonction régulière, ceci fait référence à l'objet global. En mode non strict, si une fonction est invoquée dans le contexte global (et non en tant que méthode d'un objet), cela fait référence à l'objet global (fenêtre dans les navigateurs).

• Dans une fonction en mode strict, ceci n'est pas défini. Si la fonction n'est pas une méthode d'un objet et n'est pas liée à un contexte spécifique (via un appel, une application ou une liaison), elle ne sera pas définie en mode strict.

• Dans les gestionnaires d'événements, cela fait référence à l'élément qui a reçu l'événement. Lorsqu'un événement est déclenché, cela fait référence à l'élément HTML qui a invoqué l'événement.
  

  <button onclick="this.style.display='none'">
    Click to Remove Me!
  </button>
  

  Dans ce cas, cela fait référence à l'élément bouton lui-même qui a reçu l'événement onclick.

Dans les fonctions fléchées, cela se comporte différemment. Les fonctions fléchées n'ont pas leur propre contexte. Au lieu de cela, cela est hérité lexicalement de la portée environnante au moment où la fonction de flèche est créée. Cela signifie que this à l'intérieur d'une fonction fléchée fera référence à la valeur this de sa fonction ou de son contexte englobant.

const person = {
  name: "Alice",
  greet: function() {
    setTimeout(() => {
      console.log(`Hi, I'm ${this.name}`);
    }, 1000);
  }
};

person.greet(); // Output: Hi, I'm Alice

Dans ce cas, la fonction flèche à l'intérieur de setTimeout hérite de cela de la méthode greet, qui pointe vers l'objet personne.

Méthode call()

La méthode call() vous permet "d'emprunter" une fonction ou une méthode à un objet et de l'utiliser avec un autre objet en passant l'autre objet comme premier argument. Le premier argument devient la valeur this à l'intérieur de la fonction, et des arguments supplémentaires suivent.

La méthode call() ne crée pas de nouvelle fonction ; il exécute la fonction existante avec le contexte et les arguments fournis.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " is going to " + city + ", " + country + ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

person.fullName.call(person1, "Oslo", "Norway");
// Output: John Doe is going to Oslo, Norway.

Dans cet exemple, call() est utilisé pour exécuter la méthode fullName de person avec les données de person1 (firstName et lastName), et les arguments supplémentaires sont "Oslo" et "Norway".

Méthode apply()

La méthode apply() est très similaire à la méthode call(). La principale différence réside dans la manière dont les arguments sont transmis à la fonction. Avec apply(), vous transmettez les arguments sous forme de tableau (ou d'objet de type tableau), plutôt qu'individuellement.

Comme call(), la méthode apply() ne crée pas de nouvelle fonction. Il exécute immédiatement la fonction avec le contexte fourni (cette valeur) et les arguments.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " is going to " + city + ", " + country + ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

person.fullName.apply(person1, ["Oslo", "Norway"]);
// Output: John Doe is going to Oslo, Norway.

Dans cet exemple, apply() est utilisé pour appeler la méthode fullName de l'objet personne, mais avec le contexte (this) de personne1. Les arguments "Oslo" et "Norvège" sont passés sous forme de tableau.

Méthode bind()

La méthode bind() en JavaScript vous permet de définir le contexte (cette valeur) pour une fonction ou une méthode, tout comme call() et apply(). Cependant, contrairement à call() et apply(), la méthode bind() n’invoque pas immédiatement la fonction. Au lieu de cela, il renvoie une nouvelle fonction avec la valeur this définie sur l'objet que vous spécifiez.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " is going to " + city + ", " + country + ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

const func = person.fullName.bind(person1);
func("Oslo", "Norway");
// Output: John Doe is going to Oslo, Norway.

Dans cet exemple, bind() crée une nouvelle fonction func avec la valeur this définie sur person1. La fonction n'est pas appelée tout de suite, mais vous pouvez l'invoquer plus tard en passant les arguments "Oslo" et "Norvège".

Exemple : enregistreur centralisé avec plusieurs contextes

Voici un exemple d'application petit mais complexe dans lequel l'utilisation de call(), apply() ou bind() apporte de l'efficacité, en particulier dans la gestion de l'application partielle des fonctions à des fins de journalisation :

Disons que vous disposez d'une fonction de journalisation centralisée qui enregistre des informations sur les différents utilisateurs effectuant des actions. L'utilisation de bind() vous permet de définir efficacement ce contexte pour différents utilisateurs, en évitant le code répétitif.

const logger = {
  logAction: function(action) {
    console.log(`${this.name} (ID: ${this.id}) performed: ${action}`);
  }
};

const user1 = { name: "Alice", id: 101 };
const user2 = { name: "Bob", id: 202 };

// Create new logger functions for different users
const logForUser1 = logger.logAction.bind(user1);
const logForUser2 = logger.logAction.bind(user2);

// Perform actions without manually passing user context
logForUser1("login");
// Output: Alice (ID: 101) performed: login

logForUser2("purchase");
// Output: Bob (ID: 202) performed: purchase

Pourquoi c'est efficace :

Réutilisation du contexte : Vous n'avez pas besoin de transmettre manuellement le contexte utilisateur à chaque fois que vous enregistrez une action. Le contexte (ceci) est lié une fois et la journalisation devient réutilisable et propre.

Modularité : Si vous devez ajouter plus d'utilisateurs ou d'actions, vous pouvez les lier rapidement à l'enregistreur sans altérer la fonction elle-même, en gardant votre code SEC (Ne vous répétez pas).

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!