Heim > Web-Frontend > js-Tutorial > Noch ein Blog zum Thema „Anrufen, bewerben und binden'!!

Noch ein Blog zum Thema „Anrufen, bewerben und binden'!!

DDD
Freigeben: 2024-11-25 09:17:11
Original
972 Leute haben es durchsucht

Yet another blog on Call, Apply & Bind..!!
Bla Bla Bla..

Okay, hör mir zu..!!

Hunderte von Blogs und Tutorials erklären das Aufrufen, Binden und Anwenden. Verdammt, sogar ChatGPT und Copilot können sie für Sie vereinfachen!

Warum also noch ein Beitrag? Nun, das ist nichts für _Sie_es ist meine Selbstnotiz, während ich mich noch einmal mit den JavaScript-Grundlagen befasse.

Selbst nach 8 Jahren in der Frontend-Entwicklung verwechsle ich manchmal diese Methoden. Es stellt sich heraus, dass die Verwirrung oft auf die Gruppierung in Interviewfragen zurückzuführen ist. Lassen Sie es mich dieses Mal für Sie aufschlüsseln, und zwar auf eine Art und Weise, die im Gedächtnis bleibt.

Können wir zum guten Teil übergehen?

Warum heißt es bei Vorstellungsgesprächen immer anrufen, binden und bewerben? Funktionell sind Call und Apply näher beieinander: Sie rufen die Funktion sofort auf, während Bind eine neue Funktion zurückgibt. Deshalb habe ich sie im Titel so gruppiert.

Schauen wir uns ihre Verwendung an, um sie besser zu verstehen.

Was haben Call, Bind & Apply gemeinsam?

call , bind und apply sind Methoden, die für Funktionen verfügbar sind und es Ihnen ermöglichen, den Wert von this explizit festzulegen und zu übergeben Argumente für die Funktion.

Was ist der Unterschied zwischen Call, Bind und Apply?

Während „Call“ und „Apply“ die Funktion sofort aufrufen, ruft die Bind-Methode die Funktion nicht sofort auf. Stattdessen wird eine neue Funktion zurückgegeben, wobei this auf einen angegebenen Wert gesetzt ist, und diese zurückgegebene Funktion kann später aufgerufen/ausgeführt werden.

Was ist dann der Unterschied zwischen Call und Apply?

Während sowohl Call als auch Apply die Funktion sofort mit dem benutzerdefinierten this aufrufen, verwenden sie das zusätzliche Argument, das sie unterscheidet.

Während Call die einzelnen Argumente akzeptiert, akzeptiert Apply eine Reihe von Argumenten.

Beispiele

Sehen wir uns das folgende Argument an, um die Verwendung von „call“, „apply“ und „bind“ zu verstehen.

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
Nach dem Login kopieren

Einige zusätzliche Beispiele

Verwenden vonAufruf :Ausleihen von Methoden von einem anderen Objekt:

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
Nach dem Login kopieren

Mit apply : Den Maximalwert in einem Array ermitteln:

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

Verwenden von bind : Ereignisbehandlung mit benutzerdefiniertem this:

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

button.addEventListener("click", user.greet.bind(user));
Nach dem Login kopieren

Außerdem hoffe ich, dass diese Tabelle Ihnen hilft, es besser zu verstehen.

Funktion

Ausführung

Argumente

Anwendungsfall

Anruf

Führt die Funktion sofort aus

Individuell bestanden

Wenn Sie Argumente am Telefon kennen

Bewerben

Führt die Funktion sofort aus

Als Array übergeben

Wenn Argumente in einem Array sind

binden

Gibt eine neue Funktion zurück (wird nicht ausgeführt)

Optional vorbefüllt für die neue Funktion

Wenn Sie eine wiederverwendbare oder vorkonfigurierte Funktion benötigen

Das ist alles, Leute! Ich hoffe, Sie fanden diesen kurzen Hinweis zum Thema „Call, Apply & Bind“ hilfreich. Wenn Ihnen das gefallen hat, schauen Sie sich weitere Artikel auf meiner Website an, https://nandan.dev/

Kommentieren Sie gerne, senden Sie mir eine E-Mail an connect@nandan.dev oder verbinden Sie sich mit mir auf Twitter, Instagram oder GitHub. Vergessen Sie nicht, meinen Newsletter zu abonnieren, um regelmäßig über JavaScript-Themen informiert zu werden!

Twitter | | Github | Website

Das obige ist der detaillierte Inhalt vonNoch ein Blog zum Thema „Anrufen, bewerben und binden'!!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage