Comprendre l'appel, l'application et la liaison en JavaScript avec des exemples | Blogging

Les méthodes call, apply et bind en JavaScript sont cruciales pour contrôler le mot-clé this dans les fonctions. Ils fournissent un moyen d'appeler des fonctions avec un contexte spécifique, ce qui peut être très utile dans des scénarios de codage réels.

Cet article détaillera chaque méthode, explorera les différences entre elles et fournira des exemples pratiques de quand et pourquoi vous devriez les utiliser.

Pourquoi call, apply et bind sont-ils importants en JavaScript ?

Le mot-clé

this en JavaScript est délicat car il ne fonctionne pas toujours comme prévu. Les méthodes call, apply et bind vous permettent de définir explicitement la valeur de this dans une fonction, ce qui aide à résoudre les problèmes de portée courants.

1. call()Méthode

La méthode

call() vous permet d'appeler une fonction et de définir immédiatement sa valeur this sur le contexte fourni (premier argument). Les paramètres restants sont transmis un par un, séparés par des virgules.

Grammaire :

<code class="language-javascript">func.call(thisArg, arg1, arg2, ...)</code>

1. thisArg : La valeur de this à l'intérieur de la fonction.
2. arg1, arg2, ... : paramètres passés à la fonction.

Exemple pratique : méthodes d'emprunt

Supposons que vous ayez deux objets : person et greet, et que vous souhaitiez utiliser la fonction greet avec des contextes différents.

<code class="language-javascript">const person = {
  name: "Alice",
  age: 25
};

function greet(city, country) {
  console.log(`Hello, my name is ${this.name}, and I am from ${city}, ${country}.`);
}

// 使用call借用greet函数
greet.call(person, "New York", "USA");
// 输出：Hello, my name is Alice, and I am from New York, USA.</code>

Cas d'utilisation :

Ceci est utile lorsque vous souhaitez réutiliser une fonction avec différents objets, évitant ainsi d'avoir à remplacer des méthodes similaires pour chaque objet.

2. apply()Méthode

apply() est presque identique à call() sauf la façon dont il gère les paramètres. Au lieu de transmettre les paramètres un par un, il les transmet sous forme de tableau.

Grammaire :

<code class="language-javascript">func.apply(thisArg, [argsArray])</code>

1. thisArg : La valeur de this à l'intérieur de la fonction.
2. argsArray : Tableau de paramètres passés à la fonction.

Exemple pratique : Math.max

utiliser des tableaux

Supposons que vous souhaitiez trouver le nombre maximum d'un tableau. Le Math.max() de JavaScript ne peut pas être utilisé directement avec des tableaux, mais vous pouvez utiliser apply() pour le faire fonctionner.

<code class="language-javascript">const numbers = [1, 5, 10, 15];

// 使用apply将数组元素作为单个参数传递
const maxNumber = Math.max.apply(null, numbers);
console.log(maxNumber); // 输出：15</code>

Cas d'utilisation :

Idéal lorsque vous devez transmettre une liste de paramètres stockés dans un tableau. Il est souvent utilisé avec des fonctions comme apply() ou lorsque vous avez un nombre inconnu d'arguments. Math.max()

3. Méthodebind()

La méthode

n'appelle pas une fonction immédiatement comme le font bind() et call(). Au lieu de cela, il renvoie une nouvelle fonction avec des valeurs apply() fixes et des paramètres prédéfinis. this

Grammaire :

<code class="language-javascript">func.call(thisArg, arg1, arg2, ...)</code>

1. thisArg : La valeur de this à l'intérieur de la fonction.
2. arg1, arg2, ... : paramètres définis en permanence pour la nouvelle fonction.

Exemple réel : paramètres prédéfinis

Supposons que vous ayez un bouton qui, une fois cliqué, devrait saluer quelqu'un par son nom. Vous pouvez utiliser bind() pour créer une nouvelle fonction avec un nom prédéfini.

<code class="language-javascript">const person = {
  name: "Alice",
  age: 25
};

function greet(city, country) {
  console.log(`Hello, my name is ${this.name}, and I am from ${city}, ${country}.`);
}

// 使用call借用greet函数
greet.call(person, "New York", "USA");
// 输出：Hello, my name is Alice, and I am from New York, USA.</code>

Cas d'utilisation :

bind() est particulièrement utile lorsque vous devez configurer une fonction qui sera appelée ultérieurement avec un contexte spécifique, comme lors de la gestion d'un gestionnaire d'événements ou d'une fonction de rappel.

La différence entre

call, apply et bind

Voici un aperçu rapide mettant en évidence les principales différences :

1. call()Méthode

• Fonction d'appel immédiat : Oui
• Paramètres passés : paramètre unique
• Retourner la nouvelle fonction : Non

2. apply()Méthode

• Fonction d'appel immédiat : Oui
• Paramètres transmis : sous forme de tableau
• Retourner la nouvelle fonction : Non

3. bind()Méthode

• Fonction d'appel immédiat : Non
• Paramètres passés : paramètre unique
• Retourner la nouvelle fonction : Oui

Quand utiliser chaque méthode :

• Utilisez this lorsque vous devez appeler immédiatement une fonction avec une valeur call() spécifique.
• Utilisez apply() lorsque vous devez transmettre des arguments sous forme de tableau.
• Utilisez this lorsque vous souhaitez créer une nouvelle fonction avec des valeurs bind() fixes et éventuellement des paramètres prédéfinis, notamment dans le code événementiel.

Scénario réel : Utilisation de bind() pour le traitement des événements

Supposons que vous construisiez une application Web et que vous deviez gérer l'interaction des utilisateurs avec des boutons. Vous pouvez utiliser bind() pour créer un gestionnaire d'événements plus efficace qui préserve le contexte correct.

<code class="language-javascript">func.apply(thisArg, [argsArray])</code>

Explication :

Sans le bind(), le click() à l'intérieur du this fera référence à l'élément bouton lui-même, et non à l'objet Button. En liant la méthode, vous vous assurez qu'elle fait référence au contexte correct (btn1).

Conclusion

Les méthodes

, call() et apply() en JavaScript sont des outils puissants qui vous permettent de contrôler le contexte bind() au sein d'une fonction. Que vous empruntiez des méthodes d'un objet à un autre, transmettiez des paramètres de manière dynamique ou configuriez des gestionnaires d'événements, la maîtrise de ces méthodes peut rendre votre code plus flexible et réutilisable. this

Comprendre quand et comment utiliser

, call et apply peut améliorer considérablement votre capacité à écrire du code JavaScript efficace, concis et évolutif. bind

FAQ

1. Quelle est la différence entre call, apply et bind en JavaScript ?
2. La principale différence réside dans la manière dont ils gèrent les paramètres. call() transmet les paramètres individuellement, tandis que apply() transmet les paramètres sous forme de tableau. bind() Renvoie une nouvelle fonction avec une valeur this fixe et des paramètres prédéfinis facultatifs, sans appeler la fonction immédiatement.
3. Quand dois-je utiliser call, apply et bind en JavaScript ?
4. Utilisez this lorsque vous devez appeler immédiatement une fonction avec une valeur call() spécifique. Lorsque vous transmettez un tableau d'arguments à une fonction, utilisez apply(). Utilisez this lorsque vous devez créer une nouvelle fonction avec une valeur bind() fixe et des paramètres prédéfinis, notamment dans la gestion des événements ou les rappels.
5. call, apply et bind en JavaScript peuvent-ils être utilisés avec des fonctions fléchées ?
6. Non, call(), apply() et bind() n'affectent pas les fonctions fléchées car elles héritent de leur contexte lexical environnant this, ce qui rend l'utilisation de ces méthodes non pertinente.
7. Pourquoi est-il important d'utiliser call, apply et bind pour contrôler this en JavaScript ?
La valeur de
8. this peut être imprévisible en JavaScript, selon la manière dont la fonction est appelée. L'utilisation de call(), apply() et bind() vous permet de définir explicitement la valeur de this, ce qui permet d'éviter les erreurs de portée courantes et de garantir que votre code s'exécute comme prévu.
9. Puis-je utiliser call, apply et bind avec des fonctions intégrées comme Math.max() en JavaScript ?
10. Oui, vous pouvez utiliser apply() pour transmettre des tableaux à des fonctions comme Math.max() qui n'acceptent pas les tableaux eux-mêmes. De même, call() peut être utilisé pour transmettre des arguments individuellement aux fonctions intégrées.

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!