Simplifier l'appel, l'application et la liaison en JavaScript

JavaScript vous permet de modifier le contexte (cette valeur) des fonctions en utilisant call, apply et bind. Ces méthodes peuvent sembler délicates au début, mais avec quelques exemples simples et des analogies réelles, vous les comprendrez. Décomposons-les.

La méthode d'appel

Considérez l'appel comme un moyen d'emprunter une méthode à un objet et de l'utiliser avec un autre objet.

Analogie réelle

Imaginez que vous ayez une application pour smartphone qui vérifie votre emploi du temps. Votre ami possède également la même application mais n’a pas configuré son emploi du temps. Vous pouvez prêter temporairement la configuration de votre application à votre ami afin qu'il puisse voir comment cela fonctionne avec son emploi du temps.

Exemple

const person1 = {
  firstName: 'John',
  lastName: 'Doe',
  fullName: function() {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

const person2 = {
  firstName: 'Jane',
  lastName: 'Smith'
};

person1.fullName.call(person2); // Outputs: Jane Smith

Ici, person1 a une méthode pour imprimer son nom complet. En utilisant call, person2 peut emprunter cette méthode et imprimer son propre nom complet.

La méthode d'application

apply est similaire à call, mais il prend les arguments sous forme de tableau.

Analogie réelle

Imaginez que vous êtes dans un restaurant en train de commander de la nourriture. Au lieu d'indiquer au serveur chaque article individuellement, vous remettez une liste d'articles au serveur.

Exemple

function sum(a, b) {
  console.log(a + b);
}

sum.apply(null, [5, 10]); // Outputs: 15

Dans cet exemple, apply appelle la fonction somme avec les arguments 5 et 10 fournis sous forme de tableau.

La méthode de liaison

bind crée une nouvelle fonction qui, lorsqu'elle est appelée, a sa valeur this définie sur la valeur fournie. C'est comme prêter en permanence la configuration de votre application à votre ami pour qu'il puisse l'utiliser quand il le souhaite.

Analogie réelle

Supposons que vous disposiez d'une télécommande TV spéciale qui ne fonctionne qu'avec votre téléviseur. Vous pouvez créer une télécommande en double qui fonctionne de manière permanente avec le téléviseur de votre ami.

Exemple

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

const retrieveX = module.getX;
console.log(retrieveX()); // Outputs: undefined (because 'this' is not module)

const boundGetX = retrieveX.bind(module);
console.log(boundGetX()); // Outputs: 42

Dans cet exemple, bind crée une nouvelle fonctionboundGetX qui utilise toujours module comme valeur this.

Cas d'utilisation pratiques

1. Méthodes d'emprunt

Vous pouvez utiliser call pour emprunter des méthodes à d'autres objets.

const person = {
  name: 'Alice',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

const anotherPerson = {
  name: 'Bob'
};

person.greet.call(anotherPerson); // Outputs: Hello, Bob

2. Utilisation d'Apply pour les fonctions mathématiques

apply est utile pour transmettre des tableaux à des fonctions comme Math.max.

const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers); 
console.log(max); // Outputs: 7

3. Arguments de fonction prédéfinis

bind peut être utilisé pour créer des fonctions avec des arguments prédéfinis.

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
console.log(double(5)); // Outputs: 10

Ici, bind crée une nouvelle fonction double où a vaut toujours 2, ce qui permet de doubler facilement n'importe quel nombre.

Conclusion

Comprendre les appels, les applications et les liaisons vous aide à contrôler la manière dont les fonctions sont exécutées en JavaScript. Ils vous permettent de modifier cette valeur et les arguments prédéfinis, rendant votre code plus flexible et réutilisable. En maîtrisant ces méthodes, vous pouvez écrire du code JavaScript plus propre et plus efficace.

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!