Verwendung der Methoden apply (?), Call (?) Und bind (➰) in JavaScript

In diesem Artikel werden die Methoden zum Anwenden, Aufrufen und Binden der Funktionsprototypkette beschrieben. Sie gehören zu den wichtigsten und am häufigsten verwendeten Konzepten in JavaScript und sind sehr eng mit diesem Schlüsselwort verbunden.

Um einen Überblick über die Informationen in diesem Artikel zu erhalten, müssen Sie zunächst mit dem Konzept und der Verwendung dieses Schlüsselworts vertraut sein . Wenn Sie bereits damit vertraut sind, können Sie fortfahren. Andernfalls können Sie diesen Artikel hier lesen und dann hierher zurückkehren.

Um zu erfahren , gilt | Anruf | bindet wir müssen auch über Funktionen in JavaScript wissen, vorausgesetzt , Sie sind vertraut mit diesem .

Funktionen

Der Funktionskonstruktor erstellt ein neues Funktionsobjekt. Durch direktes Aufrufen des Konstruktors können Funktionen dynamisch erstellt werden, die im globalen Bereich ausgeführt werden können.

Da Funktionen Objekte in JavaScript sind, wird ihr Aufruf durch die Methoden apply, call und bind gesteuert .

Um zu überprüfen, ob eine Funktion ein Funktionsobjekt ist, können Sie den Code im folgenden Snippet verwenden, der true zurückgibt.

Das globale Funktionsobjekt verfügt über keine eigenen Methoden oder Eigenschaften. Da es sich jedoch um eine Funktion selbst handelt, erbt sie einige Methoden und Eigenschaften über die Prototypenkette von Function.prototype. - MDN

Im Folgenden sind die Methoden in der Funktionsprototypkette aufgeführt:

  • Function.prototype.apply ()
  • Function.prototype.bind ()
  • Function.prototype.call ()
  • Function.prototype.isGenerator ()
  • Function.prototype.toSource ()
  • Object.prototype.toSource
  • Function.prototype.toString ()
  • Object.prototype.toString

Wir beschäftigen uns mit den ersten drei, also fangen wir an.

Anwenden ?

Das gilt () Verfahren ist eine wichtige Methode des Prototyps Funktion und verwendet wird , um andere Funktionen aufrufen mit einem bereitgestellten dieses Schlüsselwort - Wert und die Argumente in der Form von Array oder einer Matrix artigen Gegenstand zur Verfügung gestellt.

Array-ähnliche Objekte können auf NodeList oder das Argumentobjekt innerhalb einer Funktion verweisen.

Dies bedeutet, dass wir jede Funktion aufrufen und explizit angeben können, worauf dies in der aufrufenden Funktion verweisen soll.

Syntax

Rückkehr

Es gibt das Ergebnis der Funktion zurück, die von dieser aufgerufen wird .

Beschreibung

Mit der Apply- Methode kann eine Funktion / ein Objekt, die zu einem Objekt x gehört, aufgerufen und einem Objekt y zugewiesen werden.

Beispiele

1.

Wie im angegebenen Snippet zu sehen ist, wird beim Verschieben eines Arrays in ein anderes das gesamte Array als ein Element behandelt und in die Array-Variable verschoben.

Was aber, wenn die Elemente stattdessen einzeln als Array verschoben werden sollen? Sicher, es gibt buchstäblich n verschiedene Möglichkeiten, dies zu tun, aber während wir lernen, uns zu bewerben, verwenden wir es:

In dem gegebenen Beispiel können wir die Verwendung von apply beim Verbinden von zwei gegebenen Arrays sehen. Das Argumentarray ist das Elementarray, und dieses Argument zeigt auf die Arrayvariable. Die Elemente des Array - Elemente an das Objekt gedrückt ( Array ), der das Dies istzeigen . Wir erhalten das Ergebnis, wenn die einzelnen Elemente des zweiten Arrays auf das Array verschoben werden, auf das dies verweist.

2.

Die max-Funktion in JS wird verwendet, um das Element mit dem Maximalwert aus einem bestimmten Elementpool zu finden. Wie wir jedoch aus dem Snippet sehen können, erhalten wir das Ergebnis als NaN, wenn die Werte in Form eines Arrays vorliegen. Sicherlich sprechen wir wieder über JavaScript. Es gibt also n verschiedene Möglichkeiten, dies zu tun, aber lassen Sie uns anwenden.

Wenn wir nun apply verwenden und die Math.max () -Funktion verwenden, erhalten wir das Ergebnis. Wie wir wissen, nimmt die Anwendung alle Werte innerhalb des Arrays als einzelne Argumente und dann wird die Funktion max auf sie angewendet. Dies gibt uns den Maximalwert im Array.

Eine interessante Sache hier , darauf hinzuweisen ist , dass anstelle von diesem wir gebrauchen null haben. Da das bereitgestellte Argument die Zahl Array ist, auch wenn diese eingeführt wird , wird es auf das gleiche Array zeigen und wir werden das gleiche Ergebnis erhalten. Daher können wir in solchen Fällen stattdessen null verwenden . Dies zeigt uns, dass das Argument this in der Funktion apply ein optionales Argument ist.

Anruf

Die call () -Methode wird verwendet, um eine Funktion mit einem gegebenen this und Argumenten aufzurufen , die ihr einzeln zur Verfügung gestellt werden.

Dies bedeutet, dass wir jede Funktion aufrufen können, indem wir explizit die Referenz angeben, auf die diese in der aufrufenden Funktion verweisen soll.

Dies ist der Anwendung sehr ähnlich . Der einzige Unterschied besteht darin, dass bei der Anwendung Argumente in Form eines Arrays oder von Array-ähnlichen Objekten verwendet werden. Hier werden die Argumente einzeln bereitgestellt.

Syntax

Rückkehr

Das Ergebnis des Aufrufs der Funktion mit dem angegebenen thisWert und den angegebenen Argumenten.

Beschreibung

Die Aufrufmethode wird verwendet, um zu ermöglichen, dass eine Funktion / ein Objekt, die zu einem Objekt x gehört, aufgerufen und einem Objekt y zugewiesen wird.

Beispiele

1.

Dies ist ein Beispiel für die Verkettung von Konstruktoren. Wie wir sehen können, wird in jeder Funktion der Konstruktor des Produkts aufgerufen, und unter Verwendung von call werden die Eigenschaften des Product-Objekts mit den Pizza- bzw. Toy-Objekten verkettet.

Wenn neue Instanzen der Pizza- und Toy-Objekte erstellt werden, werden Parameter wie Name, Preis und Kategorie angegeben. Die Kategorie wird nur in der Definition angewendet, aber der Name und der Preis werden mit dem verketteten Konstruktor des Produktobjekts angewendet, wie sie im Produktobjekt definiert und angewendet werden. Mit etwas mehr Optimierungen können wir Vererbung erreichen.

2.

Im obigen Snippet haben wir eine Funktion namens sleep definiert. Es besteht aus einer Array-Antwort, die aus Elementen besteht, die Eigenschaften mit dem Schlüsselwort this adressieren . Sie werden in einem separaten Objekt außerhalb der Funktion definiert.

Die Funktion sleep wird mit dem Objekt obj als Argument aufgerufen . Wie wir sehen können, werden die Eigenschaften des Objekts in der this.animal- bzw. this.sleepDuration festgelegt , und wir erhalten den vollständigen Satz als Ausgabe.

Binden➰

Die bind () -Methode erstellt eine neue Funktion, deren thisSchlüsselwort beim Aufruf auf den angegebenen Wert gesetzt wird, wobei eine bestimmte Folge von Argumenten vor allen beim Aufruf der neuen Funktion angegebenen Argumenten steht. - MDN

Syntax

Rückkehr

Bind gibt eine Kopie der Funktion mit dem angegebenen this und den Argumenten zurück.

Beschreibung

Die Bindefunktion ähnelt stark der Aufruffunktion , mit dem Hauptunterschied, dass die Bindung eine neue Funktion zurückgibt, während der Aufruf dies nicht tut.

Gemäß den ECMAScript 5-Spezifikationen ist die von bind zurückgegebene Funktion ein spezieller Typ eines exotischen Funktionsobjekts (wie sie es nennen), die als Bound-Funktion (BF) bezeichnet wird . Das BF umschließt das ursprüngliche Funktionsobjekt. Beim Aufrufen eines BF wird die darin eingeschlossene Funktion ausgeführt.

Beispiele

1.

Im obigen Snippet haben wir eine Variable x und ein Objekt namens module definiert. Es enthält auch eine Eigenschaft namens x und eine andere Eigenschaft, deren entsprechender Wert eine Funktion ist, die den Wert von x zurückgibt .

Wenn die Funktion getX aufgerufen wird, werden die Werte von x zurückgegeben, die im Objekt definiert sind, und nicht das x im globalen Bereich.

Eine weitere Variable ist im globalen Bereich erklärt, der die Anrufe getX Funktion aus dem Modul - Objekt. Da sich die Variable jedoch im globalen Bereich befindet, zeigt dies in getX auf das globale x und daher wird 9 zurückgegeben.

Es ist eine andere Variable definiert, die die vorherige Funktion aufruft, diesmal jedoch die Funktion mit dem Modulobjekt verbindet . Diese Bindung gibt den Wert von x innerhalb des Objekts zurück. Aufgrund der Bindung zeigt dies in der Funktion auf den Wert von x im Objekt und nicht auf das globale x . Daher erhalten wir 81 als Ausgabe

Fazit

Nachdem wir die Grundlagen der Methoden gelernt haben, sind Sie möglicherweise immer noch ein wenig verwirrt darüber, warum es drei verschiedene Funktionen gibt, die fast dasselbe tun. Um dieses Konzept zu verdeutlichen, müssen Sie mit verschiedenen Situationen und Szenarien üben, damit Sie genauer lernen können, wo und wie sie verwendet werden können. Sie werden Ihren Code mit Sicherheit sauberer und leistungsfähiger machen.

Wenn Ihnen dieser Artikel gefallen hat, klatschen Sie bitte? und folgen? für mehr.