Encore un autre blog sur Call, Apply & Bind.. !!

Bla Bla Bla..

D'accord, écoutez-moi..!!

Des centaines de blogs et de tutoriels expliquent comment appeler, lier et postuler. Bon sang, même ChatGPT et Copilot peuvent les simplifier pour vous !

Alors pourquoi un autre post ? Eh bien, ce n'est pas pour vous que c'est ma note alors que je revisite les principes fondamentaux de JavaScript.

Même après 8 ans en développement front-end, il m'arrive de mélanger ces méthodes. Il s'avère que la confusion vient souvent de la façon dont ils sont regroupés dans les questions d'entretien. Laissez-moi vous l'expliquer cette fois, d'une manière qui colle.

Pouvons-nous passer à la bonne partie.

Pourquoi est-il toujours appelé, lié et postulé lors des entretiens ? Fonctionnellement, call et apply sont plus proches : ils invoquent la fonction immédiatement tandis que bind renvoie une nouvelle fonction. C'est pourquoi je les ai regroupés de cette façon dans le titre.

Regardons leur utilisation pour mieux la comprendre.

Qu'est-ce qui est commun entre Appeler, Lier et Appliquer ?

call , bind et apply sont des méthodes disponibles sur les fonctions qui vous permettent de définir explicitement la valeur de this et de transmettre arguments à la fonction.

Quelle est la différence entre Appeler, Lier et Appliquer ?

Alors que Call et Apply appellent immédiatement la fonction, la méthode Bind n'appelle pas immédiatement la fonction. à la place, il renvoie une nouvelle fonction avec this défini sur une valeur spécifiée, et cette fonction renvoyée peut être invoquée/exécutée ultérieurement.

Quelle est alors la différence entre appeler et postuler ?

Alors que Call et Apply invoquent immédiatement la fonction avec la coutume this, c'est ainsi qu'ils prennent l'argument supplémentaire qui les différencie.

Alors que Call prend les arguments individuels, Apply prend un tableau d'arguments.

Exemples

Regardons l'argument ci-dessous pour comprendre l'utilisation de call, apply et bind.

function Greetings(greeting,punctuation){
    return `${greeting} ${this.name} ${punctuation}`
}

var person = {
    name : "Nandan"
}

// Call: Immediately invokes the function with individual arguments
console.log(Greetings.call(person,"Hello","!")); // Output : Hello Nandan !

// Apply: Immediately invokes the function, but takes arguments as an array
console.log(Greetings.apply(person,["Hello","!"])); // Output : Hello Nandan !

// Bind: Returns a new function with `this` bound to the specified value
let greet = Greetings.bind(person,"Hello","!");
console.log(greet()); // Output : Hello Nandan !

//Note:
console.log(Greetings.bind(person,"Hello","!")); // Output : It will return a function

Quelques exemples supplémentaires

En utilisant appelez  : Empruntez des méthodes à un autre objet :

let person1 = { name: "Nandan" };
let person2 = { name: "Kumar" };

function introduce() {
    console.log(`Hi, my name is ${this.name}`);
}

introduce.call(person1); // Hi, my name is Nandan
introduce.call(person2); // Hi, my name is Kumar

En utilisant appliquer  : Trouver la valeur maximale dans un tableau :

let numbers = [1, 2, 3, 4, 5];
console.log(Math.max.apply(null, numbers)); // 5

Utilisation bind  : Gestion des événements avec personnalisation this :

let button = document.getElementById("myButton");
let user = {
    name: "Nandan",
    greet() {
        console.log(`Hello, ${this.name}`);
    }
};

button.addEventListener("click", user.greet.bind(user));

De plus, j'espère que ce tableau vous aidera à mieux le comprendre.

Fonctionnalité	Exécution	Arguments	Cas d'utilisation
appeler	Exécute la fonction immédiatement	Réussi individuellement	Quand tu connais les disputes au moment de l'appel
postuler	Exécute la fonction immédiatement	Passé sous forme de tableau	Quand les arguments sont dans un tableau
lier	Renvoie une nouvelle fonction (ne s'exécute pas)	En option pré-rempli pour la nouvelle fonction	Lorsque vous avez besoin d'une fonction réutilisable ou préconfigurée

C'est tout, les amis ! J'espère que vous avez trouvé cette courte note sur Call, Apply & Bind utile. Si cela vous a plu, consultez plus d'articles sur mon site Web, https://nandan.dev/

N'hésitez pas à commenter, envoyez-moi un e-mail à connect@nandan.dev ou connectez-vous avec moi sur Twitter, Instagram ou GitHub. N'oubliez pas de vous abonner à ma newsletter pour des mises à jour régulières sur les sujets JavaScript !

Twitter | Instagram | Github | Site Internet

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!