Was ist die Verwendung bind()
in JavaScript?
javascript
function
bind
Sandeep Kumar
quelle
quelle
select = document.querySelector.bind(document)
this
sich sonst aufwindow
das globale Objekt beziehen würde . Mitdocument.querySelector.bind(document)
stellen wir sicher , dassselect
‚sthis
bezieht sich aufdocument
, und nicht zuwindow
. Jemand korrigiert mich, wenn ich das falsch verstanden habe.Antworten:
Bind erstellt eine neue Funktion, die erzwingt, dass das
this
Innere der Funktion der Parameter ist, an den übergeben wirdbind()
.Hier ist ein Beispiel, das zeigt, wie
bind
eine Member-Methode übergeben wird, die das Richtige hatthis
:Welches druckt aus:
Sie können auch zusätzliche Parameter nach dem Parameter 1st (
this
) hinzufügen undbind
diese Werte an die ursprüngliche Funktion übergeben. Alle zusätzlichen Parameter, die Sie später an die gebundene Funktion übergeben, werden nach den gebundenen Parametern übergeben:Welches druckt aus:
Weitere Informationen und interaktive Beispiele finden Sie unter JavaScript-Funktionsbindung .
Update: ECMAScript 2015 bietet Unterstützung für
=>
Funktionen.=>
Funktionen sind kompakter und ändern denthis
Zeiger nicht von ihrem definierten Bereich, sodass Sie ihn möglicherweise nichtbind()
so oft verwenden müssen. Wenn Sie beispielsweise eine FunktionButton
aus dem ersten Beispiel aktivierenclick
möchten, um den Rückruf mit einem DOM-Ereignis zu verbinden, sind die folgenden Möglichkeiten gültig:Oder:
Oder:
quelle
var Note = React.createClass({ add: function(text){ ... }, render: function () { return <button onClick={this.add.bind(null, "New Note")}/> } }
die Schaltfläche klicken, wird deradd
Methode ein Parametertext "New Note" übergeben .Am einfachsten
bind()
ist es, eine Funktion zu erstellen, die unabhängig von ihrem Aufruf mit einem bestimmtenthis
Wert aufgerufen wird.Bitte beziehen Sie sich auf diesen Link für weitere Informationen
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
quelle
prototype
) erfordert , die für Anfänger möglicherweise neu sind.binden erlaubt-
Sie haben beispielsweise die Möglichkeit, monatliche Clubgebühren abzuziehen
Jetzt möchten Sie diese Funktion für ein anderes Clubmitglied wiederverwenden. Beachten Sie, dass die monatliche Gebühr von Mitglied zu Mitglied unterschiedlich ist.
Stellen wir uns vor, Rachel hat einen Kontostand von 500 und einen monatlichen Mitgliedsbeitrag von 90.
Erstellen Sie jetzt eine Funktion, mit der Sie die Gebühr jeden Monat immer wieder von ihrem Konto abziehen können
Jetzt kann dieselbe Funktion getMonthlyFee für ein anderes Mitglied mit einem anderen Mitgliedsbeitrag verwendet werden. Zum Beispiel hat Ross Geller ein Guthaben von 250 und eine monatliche Gebühr von 25
quelle
Von der MDN - Dokumentation auf
Function.prototype.bind()
:Was bedeutet das?!
Nehmen wir eine Funktion, die so aussieht:
Nehmen wir nun ein Objekt, das so aussieht:
Wir können unsere Funktion folgendermaßen an unser Objekt binden:
Jetzt können wir
Obj.log
überall in unserem Code ausführen:Dies funktioniert, weil wir den Wert von
this
an unser Objekt gebunden habenObj
.Was wirklich interessant wird, ist, wenn Sie nicht nur einen Wert für
this
, sondern auch für sein Argument bindenprop
:Wir können dies jetzt tun:
Anders als bei
Obj.log
müssen wir nicht übergebenx
odery
, weil wir diese Werte bei unserer Bindung übergeben haben.quelle
Variablen haben lokale und globale Bereiche. Nehmen wir an, wir haben zwei Variablen mit demselben Namen. Einer ist global definiert und der andere ist innerhalb eines Funktionsabschlusses definiert, und wir möchten den Variablenwert erhalten, der sich innerhalb des Funktionsabschlusses befindet. In diesem Fall verwenden wir diese bind () -Methode. Bitte sehen Sie das einfache Beispiel unten:
quelle
Zusammenfassung:
Die
bind()
Methode nimmt ein Objekt als erstes Argument und erstellt eine neue Funktion. Wenn die Funktion aufgerufen wird, ist der Wert vonthis
im Funktionskörper das Objekt, das als Argument in derbind()
Funktion übergeben wurde.Wie funktioniert das überhaupt
this
in JS?Der Wert von
this
in Javascript hängt immer davon ab, welches Objekt die Funktion aufruft. Der Wert bezieht sich immer auf das Objekt links vom Punkt, von dem aus die Funktion aufgerufen wird . Im Falle des globalen Geltungsbereichs ist dieswindow
(oderglobal
innodeJS
). Nurcall
,apply
undbind
kann anders die diese Bindung ändern. Hier ist ein Beispiel, um zu zeigen, wie dieses Schlüsselwort funktioniert:Wie wird bind verwendet?
Bind kann helfen, Schwierigkeiten mit dem
this
Schlüsselwort zu überwinden, indem ein festes Objekt vorhanden ist, aufthis
das verwiesen wird. Zum Beispiel:Sobald die Funktion an einen bestimmten
this
Wert gebunden ist, können wir sie weitergeben und sogar Eigenschaften anderer Objekte zuweisen. Der Wert vonthis
wird gleich bleiben.quelle
obj
ist das Objekt, weil es vom Punkt übrig bleibt undwindow
das Objekt, weil es eine Abkürzung fürwindow.custFunc()
undwindow
links vom Punkt ist, waren für mich sehr aufschlussreich.Ich werde das Binden sowohl theoretisch als auch praktisch erklären
Binden in Javascript ist eine Methode - Function.prototype.bind. bind ist eine Methode. Es wird auf Funktionsprototyp aufgerufen. Diese Methode erstellt eine Funktion, deren Hauptteil der Funktion ähnelt, für die sie aufgerufen wird. Das 'this' bezieht sich jedoch auf den ersten Parameter, der an die bind-Methode übergeben wird. Die Syntax lautet
Beispiel:--
quelle
Die Methode bind () erstellt eine neue Funktionsinstanz, deren Wert an den Wert gebunden ist, der an bind () übergeben wurde. Zum Beispiel:
Hier wird aus sayColor () eine neue Funktion namens objectSayColor () erstellt, indem bind () aufgerufen und das Objekt o übergeben wird. Die Funktion objectSayColor () hat einen Wert, der o entspricht. Wenn Sie die Funktion auch als globaler Aufruf aufrufen, wird die Zeichenfolge "blau" angezeigt.
Referenz: Nicholas C. Zakas - PROFESSIONAL JAVASCRIPT® FÜR WEBENTWICKLER
quelle
Erstellen einer neuen Funktion durch Binden von Argumenten an Werte
Die
bind
Methode erstellt eine neue Funktion aus einer anderen Funktion mit einem oder mehreren Argumenten, die an bestimmte Werte gebunden sind, einschließlich des implizitenthis
Arguments.Teilanwendung
Dies ist ein Beispiel für eine teilweise Anwendung . Normalerweise liefern wir eine Funktion mit all ihren Argumenten, die einen Wert ergibt. Dies wird als Funktionsanwendung bezeichnet. Wir wenden die Funktion auf ihre Argumente an.
Eine Funktion höherer Ordnung (HOF)
Die Teilanwendung ist ein Beispiel für eine Funktion höherer Ordnung (HOF), da sie eine neue Funktion mit weniger Argumenten ergibt.
Mehrere Argumente binden
Sie können
bind
Funktionen mit mehreren Argumenten in neue Funktionen umwandeln.Konvertieren von der Instanzmethode in die statische Funktion
Im häufigsten Anwendungsfall erstellt die
bind
Methode beim Aufruf mit einem Argument eine neue Funktion, derenthis
Wert an einen bestimmten Wert gebunden ist. Tatsächlich wandelt dies eine Instanzmethode in eine statische Methode um.Implementieren eines Stateful CallBack
Das folgende Beispiel zeigt, wie mithilfe der Bindung von
this
eine Objektmethode als Rückruf fungieren kann, mit dem der Status eines Objekts problemlos aktualisiert werden kann.quelle
Wie bereits erwähnt,
Function.bind()
können Sie den Kontext angeben, in dem die Funktion ausgeführt wird (dh, Sie können übergeben, in welches Objekt dasthis
Schlüsselwort im Hauptteil der Funktion aufgelöst wird.Einige analoge Toolkit-API-Methoden, die einen ähnlichen Dienst ausführen:
jQuery.proxy ()
Dojo.hitch ()
quelle
quelle
Betrachten Sie das unten aufgeführte einfache Programm.
quelle
Die Bindungsfunktion erstellt eine neue Funktion mit demselben Funktionskörper wie die aufgerufene Funktion. Sie wird mit diesem Argument aufgerufen. Warum verwenden wir Bindungsspaß? : Wenn jedes Mal, wenn eine neue Instanz erstellt wird und wir die erste Anfangsinstanz verwenden müssen, verwenden wir Bindungsspaß. Wir können den Bindungsspaß nicht überschreiben. Einfach speichert er das Anfangsobjekt der Klasse.
quelle
Eine andere Verwendung besteht darin, dass Sie eine gebundene Funktion als Argument an eine andere Funktion übergeben können, die in einem anderen Ausführungskontext ausgeführt wird.
quelle
Einfaches Beispiel
quelle
Bindungsmethode
Eine Bindungsimplementierung könnte ungefähr so aussehen:
Die Bindungsfunktion kann eine beliebige Anzahl von Argumenten annehmen und eine neue Funktion zurückgeben .
Die neue Funktion ruft die ursprüngliche Funktion mit der JS-
Function.prototype.apply
Methode auf.Die
apply
Methode verwendet das erste an die Zielfunktion übergebene Argument als Kontext (this
), und das zweite Array-Argument derapply
Methode ist eine Kombination der übrigen Argumente der Zielfunktion, die mit den Argumenten übereinstimmen, die zum Aufrufen der Rückgabe verwendet werden Funktion (in dieser Reihenfolge).Ein Beispiel kann ungefähr so aussehen:
quelle
Einfache Erklärung:
bind () erstellt eine neue Funktion, eine neue Referenz auf eine Funktion, die an Sie zurückgegeben wird.
In Parameter nach diesem Schlüsselwort übergeben Sie den Parameter, den Sie vorkonfigurieren möchten. Eigentlich wird es nicht sofort ausgeführt, sondern bereitet sich nur auf die Ausführung vor.
Sie können so viele Parameter vorkonfigurieren, wie Sie möchten.
Einfaches Beispiel zum Verständnis von bind:
quelle
bind ist eine Funktion, die im Java-Skript-Prototyp verfügbar ist, da der Name vermuten lässt, dass bind verwendet wird, um Ihren Funktionsaufruf an den Kontext zu binden, mit dem Sie sich beispielsweise befassen:
quelle