Eine kurze Analyse der Verwendung und Implementierung von Bind () in JavaScript

Bevor Sie die Methode Bind () diskutieren, werfen wir einen Blick auf eine Frage:

var Altwrite = document.write;

Altwrite ("Hallo");

// 1. Was ist das Problem mit dem obigen Code?

// 2. Wie ist die richtige Operation wie

// 3. So implementieren Sie die Bind () -Methode

Für die obige Frage ist die Antwort nicht zu schwierig. Der Hauptprüfpunkt ist das Problem, auf das dadurch hingewiesen wird. Die Funktion altwrite () ändert diesen Hinweis auf globale oder Fensterobjekte, was einen abnormalen Aufruf während der Ausführung verursacht. Die richtige Lösung besteht darin, die Methode Bind () zu verwenden:

Altwrite.bind (Dokument) ("Hallo")

Natürlich können Sie auch die Call () -Methode verwenden:

Altwrite.call (Dokument, "Hallo")

Der Schwerpunkt dieses Artikels liegt auf der Erörterung der Implementierung der Bind () -Methode in der dritten Ausgabe. Bevor wir mit der Implementierung von Bind () beginnen, schauen wir uns die Verwendung der Bind () -Methode an:

Bindungsfunktion

Der einfachste Weg, Bind () zu verwenden, besteht darin, eine Funktion so zu erstellen, dass die Funktion den gleichen Wert hat, egal wie sie aufgerufen wird. Häufige Fehler sind wie das obige Beispiel, die die Methode aus dem Objekt herausnehmen, dann aufrufen und diese auf das ursprüngliche Objekt verweisen sollen. Wenn keine Sonderbehandlung durchgeführt wird, geht das ursprüngliche Objekt im Allgemeinen verloren. Mithilfe von Bind () können Sie dieses Problem wunderbar lösen:

 this.num = 9; var MyModule = {num: 81, getNum: function () {return this.num; }}; module.getNum (); // 81var getNum = modul.getNum; Getnum (); // 9, weil in diesem Beispiel "dies" auf das globale Objekt zeigt // eine Funktion erstellen, die an das Modul var bandgetNum = getNum.bind (Modul) gebunden ist; bigTetnum (); // 81

Teilfunktionen

Teilfunktionen werden auch als Teilanwendungen bezeichnet. Hier ist ein Abschnitt mit Definitionen zu Teilfunktionen:

Eine teilweise Anwendung kann als eine Funktion beschrieben werden, die eine Reihe von Argumenten akzeptiert, Werte an ein oder mehrere dieser Argumente verbindet und eine neue Funktion zurückgibt, die nur die verbleibenden, ungebundenen Argumente akzeptiert.

Dies ist eine gute Funktion. Mit Bind () haben wir die vordefinierten Parameter der Funktion festgelegt und dann beim Aufrufen anderer Parameter übergeben:

 Funktionsliste () {return array.prototype.slice.call (Argumente);} var list1 = list (1, 2, 3); // [1, 2, 3] // vordefinierter Parameter 37var LeadingThirtySevenlist = list.bind (undefined, 37); var list2 = LeadingThirtySevenlist (); // [37] var list3 = LeadingThirtySevenList (1, 2, 3); // [37, 1, 2, 3]

Verwendung mit SetTimeout

Im Allgemeinen verweist dieser setTimeout () auf ein Fenster oder ein globales Objekt. Wenn Sie eine Klassenmethode verwenden, muss dies auf die Klasseninstanz verweisen, können Sie Bind () an die Rückruffunktion binden, um die Instanz zu verwalten.

 Funktion Bloomer () {this.petalCount = math.ceil (math.random () * 12) + 1;} // Nennen Sie die Deklar -Funktion Bloomer.Prototype.bloom = function () {window.settimeout (this.declare.bind (this), 1000);}; this.petalcount + 'petal!');};

HINWEIS: Die obige Methode kann auch für Veranstaltungsfunktionen und SetInterval -Methoden verwendet werden.

Bindungsfunktion als Konstruktor binden

Bindungsfunktionen eignen sich auch für die Verwendung des neuen Operators, um Instanzen der Zielfunktion zu konstruieren. Hinweis, dass Bindungsfunktionen zur Konstruktion einer Instanz verwendet werden: Dies wird ignoriert, aber die übergebenen Parameter sind weiterhin verfügbar.

 Funktionspunkt (x, y) {this.x = x; this.y = y;} point.prototype.toString = function () {return this.x + ',' + this.y; }; var p = neuer Punkt (1, 2); P.ToString (); // '1,2'var leeroBj = {}; var yaxispoint = point.bind (leereObj, 0/*x*/); // Beispiele in der Implementierung werden nicht unterstützt, // native Bindung unterstützt: var yaxispoint = point.bind (null, 0/*x*/); var axispoint = neuer yaxispoint (5); AxiSpoint.ToString (); // '0,5'axispoint Instance von Punkt; // echte Axispoint -Instanz von Yaxispoint; // wahrer neuer Punkt (17, 42) Instanz von Yaxispoint; // WAHR

Im obigen Beispiel teilen Punkte und Yaxispoint -Prototypen, sodass es zutreffend ist, wenn sie mit dem Instanz des Operators beurteilt werden.

Abkürzung

Bind () kann auch Verknüpfungen für Funktionen erstellen, die einen bestimmten Wert davon erfordern.

Um beispielsweise ein Array -Objekt einer Klasse in ein reales Array umzuwandeln, sind die möglichen Beispiele wie folgt:

 var Slice = array.prototype.slice; // ... Slice.call (Argumente);

Wenn Sie Bind () verwenden, wird die Situation einfacher:

 var unbrundslice = array.prototype.slice; var Slice = function.prototype.call.bind (ungebunden); // ... Slice (Argumente);

erreichen

In den obigen Abschnitten können Sie sehen, dass Bind () viele Verwendungsszenarien aufweist, aber die Bind () -Funktion wurde in der fünften Version von ECMA-262 hinzugefügt. Es kann nicht auf allen Browsern laufen. Dies erfordert, dass wir die Bind () -Funktion selbst implementieren.

Zunächst können wir einfach die Methode Bind () implementieren, indem wir den Umfang der objektiven Funktion angeben:

 Function.prototype.bind = Funktion (Kontext) {self = this; // Speichern Sie dies, dh die objektive Funktion, die die Bind -Methode aufruft, function () {return self.apply (Kontext, Argumente); };};

In Anbetracht der Currying der Funktion können wir einen robusteren Bind () erstellen:

 Function.prototype.bind = function (context) {var args = array.prototype.lice.call (Argumente, 1), self = this; return function () {var innerargs = array.prototype.slice.call (Argumente); var FinalArgs = args.concat (Innerargs); return self.apply (Kontext, FinalArgs); };};

Dieses Mal kann die Bind () -Methode Objekte binden und unterstützt auch die Übergabe von Parametern während der Bindung.

Weiter, JavaScript -Funktionen können auch als Konstruktoren verwendet werden. Wenn gebundene Funktionen auf diese Weise aufgerufen werden, ist die Situation subtiler und muss an der Übergabe der Prototypkette beteiligt sein:

 Function.prototype.bind = function (context) {var args = array.prototype.slice (Argumente, 1), f = function () {}, self = this, bound = function () {var innerargs = array.Prototype.slice.call (Argumente); var FinalArgs = args.concat (Innerargs); return self.apply ((diese Instanz von f? Dies: Kontext), FinalArgs); }; F.Prototype = self.Prototype; bound.Prototype = new f (); return gebunden;};

Dies ist die Implementierung von Bind () in dem Buch "JavaScript -Webanwendung": Durch Einstellen eines Relaiskonstruktors F befindet sich die gebundene Funktion auf derselben Prototypkette wie die Funktion, die Bind () aufruft. Verwenden Sie den neuen Bediener, um die gebundene Funktion aufzurufen, und das zurückgegebene Objekt kann auch normale Instanz verwenden. Daher ist dies die strengste Implementierung von Bind ().

Um die Funktion Bind () im Browser zu unterstützen, müssen Sie die obige Funktion nur geringfügig ändern:

 Function.prototype.bind = function (othis) {if (typeof this! } var aArgs = Array.prototype.slice.call(arguments, 1), fToBind = this, fNOP = function () {}, fBound = function () { return fToBind.apply( this instanceof fNOP && oThis ? this : oThis || window, aArgs.concat(Array.prototype.slice.call(arguments)) ); }; fnop.Prototype = this.Prototype; fBound.Prototype = new fnop (); FBOund zurückgeben; };

Die obige kurze Analyse der Verwendung und Implementierung der Bind () -Methode in JavaScript ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, es kann Ihnen eine Referenz geben und ich hoffe, Sie können Wulin.com mehr unterstützen.