Clevere Verwendung von Anwendung, Anruf und Binden in JavaScript

bewerben, rufen Sie an

In JavaScript, rufen Sie an und wenden Sie sich an, um den Kontext (Kontext) einer Funktion zu ändern, wenn sie ausgeführt wird. Mit anderen Worten, es soll die Richtung dieses innerhalb des Funktionskörpers verändern.

Ein wichtiges Merkmal von JavaScript ist, dass Funktionen die Konzepte des "Definitionskontexts" und "Laufzeitkontext" und "Kontext können geändert werden" haben.

Lassen Sie uns zuerst eine Kastanie bekommen:

 function fruits () {} fruits.prototype = {color: "rot", sagen: function () {console.log ("Meine Farbe ist" + this.color);}} var Apple = new fruits; Apple.Say (); // Meine Farbe ist rot

Aber wenn wir ein Objekt Banana = {Farbe: "gelb"} haben und wir die Methode dafür nicht neu definieren möchten, können wir die Methode von Apple durch Anruf oder Bewerben verwenden:

 Banana = {Farbe: "gelb"} Apple.say.call (Banana); // Meine Farbe ist Yellowapple.say.Apply (Banane); // Meine Farbe ist gelb

Daher ist ersichtlich, dass Aufruf und Anwendung dies dynamisch ändern scheinen. Wenn ein Objekt keine bestimmte Methode hat (Banane sagt keine Methode in dieser Kastanie), aber andere sind (Apple hat eine Methode in dieser Kastanie), wir können den Anruf verwenden oder anwenden, um es mit anderen Objektmethoden zu bedienen.

Der Unterschied zwischen Anwendung und Anruf

Sowohl für Anwendung als auch für Anrufe sind die Funktionen genau gleich, aber die Methoden zur Akzeptanz von Parametern sind unterschiedlich. Zum Beispiel gibt es eine Funktion wie folgt:

 var func = function (arg1, arg2) {};

Sie können es folgendermaßen nennen:

 func.call (this, arg1, arg2); func.apply (this, [arg1, arg2])

Wenn dies der Kontext ist, den Sie angeben möchten, kann es jedes JavaScript -Objekt sein (alles in JavaScript ist ein Objekt), der Aufruf muss die Parameter in der Reihenfolge übergeben und Mittel anwenden, um Parameter in das Array zu setzen.

In JavaScript ist die Anzahl der Parameter einer Funktion nicht behoben. Wenn Sie also die anwendbaren Bedingungen sagen möchten, verwenden Sie den Anruf, wenn Ihre Parameter eindeutig bekannt sind.

Wenn Sie sich nicht sicher sind, verwenden Sie Anwendung und drücken Sie den Parameter in das Array und geben Sie ihn ein. Wenn die Anzahl der Parameter ungewiss ist, können alle Parameter auch durch das Pseudo -Array der Argumente innerhalb der Funktion durchquert werden.

Um das Gedächtnis zu konsolidieren und zu vertiefen, sind die folgenden üblichen Verwendungszwecke:

An Arrays anhängen

 var array1 = [12, "foo", {name "joe"}, -2458]; var array2 = ["doe", 555, 100]; Array.Prototype.push.Apply (Array1, Array2); / * Array1 Der Wert ist [12, "foo", {name "joe"}, -2458, "doe", 555, 100] */

Holen Sie sich die maximalen und minimalen Werte im Array

 VAR -Zahlen = [5, 458, 120, -215]; var maxinnumbers = math.max.apply (math, number), // 458maxinnumbers = math.max.call (Math, 5, 458, 120, -215); // 458

Die Nummer selbst hat keine maximale Methode, aber Mathematik hat sie, sodass wir ihre Methode mit Anruf oder Bewerbung verwenden können.

Überprüfen Sie, ob es sich um ein Array handelt (vorausgesetzt, die Methode toString () wurde nicht umgeschrieben)

 FunktionisArray (obj) {return Object.Prototype.toString.call (obj) === '[Objektarray]';};

Klasse (Pseudo) Array mit Array -Methode

 var domnodes = array.prototype.slice.call (document.getElementsByTagName ("*"));

In JavaScript gibt es eine Objektstruktur, die Pseudo-Array namens Pseudo-Array gibt. Besonderes ist das Argumenteobjekt, und es gibt auch diejenigen, die GetElements bytagname, document.childnodes usw. nennen, die Nodelist-Objekte zurückgeben, alle zu Pseudo-Arrays gehören. Sie können Push, Pop und andere Methoden unter Array nicht verwenden.

Aber wir können Array.Prototype.lice.call in ein reales Array mit dem Objekt mit dem Längenattribut konvertieren, damit Domnodes alle Methoden unter Array anwenden können.

Zutiefst verstehen und verwenden, um zu bewerben und anzurufen

Lassen Sie uns eine Interviewfrage ausleihen, um zu verstehen, dass Beantragung beantragt und eingehender angerufen wird.

Definieren Sie eine Protokollmethode, damit die Konsole.log -Methode proxy kann. Die gemeinsame Lösung ist:

 Funktion log (msg) {console.log (msg);} log (1); // 1log (1,2); // 1

Die obige Methode kann die grundlegendsten Anforderungen lösen, aber wenn die Anzahl der übergebenen Parameter ungewiss ist, fällt die obige Methode aus. Zu diesem Zeitpunkt können Sie in Betracht ziehen, Anwendung oder Anruf zu verwenden. Beachten Sie, dass die Anzahl der hier übergebenen Parameter ungewiss ist, daher ist es am besten, Anwendung zu verwenden. Die Methode lautet wie folgt:

 Funktion log () {console.log.apply (Konsole, Argumente);}; log (1); // 1log (1,2); // 1 2

Die nächste Anforderung besteht darin, jeder Protokollnachricht einen "(App)" -Stropfen hinzuzufügen, wie z. B.:

 log ("Hallo Welt"); // (App) Hallo Welt

Wie mache ich es eleganter? Zu diesem Zeitpunkt müssen Sie glauben, dass der Parameter von Argumenten ein Pseudo-Array ist, das über Array.Prototype.slice.call in ein Standard-Array konvertiert wird und dann die Array-Methode unschsiert wie folgt verwenden:

 Funktion log () {var args = array.prototype.slice.call (Argumente); args.unshift ('(App)'); console.log.apply (Konsole, Args);};

Binden Sie eine detaillierte Erklärung

Nachdem wir über Bewerbung und Anruf gesprochen haben, sprechen wir über Bind. Die Bind () -Methode ist sehr ähnlich wie angewendet und aufgerufen und kann auch das Zeigen dieses im Funktionskörper verändern.

Die Erklärung von MDN lautet: Die Methode Bind () erzeugt eine neue Funktion, die als Bindungsfunktion bezeichnet wird. Wenn diese Bindungsfunktion aufgerufen wird, verwendet die Bindungsfunktion den ersten Parameter der Bind () -Methode, wenn sie als diese erstellt wird, und den zweiten Parameter der Bind () -Methode und die nachfolgenden Parameter plus die Parameter der Bindungsfunktionsruntzeit selbst als Parameter der ursprünglichen Funktion, um die ursprüngliche Funktion aufzurufen.

Schauen wir uns an, wie man es benutzt. Im gemeinsamen Monomermodus verwenden wir normalerweise _this, das, sich selbst usw., um dies zu sparen, damit wir ihn nach dem Ändern des Kontextes weiter verweisen können. So was:

 var foo = {bar: 1, eventbind: function () {var _this = this; $ ('. Someclass'). on ('click', function (Ereignis) {/ * auf das Ereignis */console.log (_this.bar); // 1});}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}.

Aufgrund des JavaScript-spezifischen Mechanismus hat sich die Kontextumgebung in Eventbind: function () {} zu $ ('. Someclass'). On ('Click', Funktion (Ereignis) {}) geändert. Die obigen Methoden zur Verwendung von Variablen zum Speichern sind nützlich und es gibt kein Problem. Natürlich kann die Verwendung von Bind () dieses Problem eleganter lösen:

 var foo = {bar: 1, eventbind: function () {$ ('. someclass'). on ('click', function (Ereignis) {/ * auf das Ereignis */console.log (this.bar); //1}.bind(This);}}}}}}}}}}}}}}}}}

Im obigen Code erstellt Bind () eine Funktion. Wenn dieses Klickereignis aufgerufen werden soll, wird dieses Schlüsselwort auf den in übergebenen Wert festgelegt (hier bezieht sich auf die Parameter, die in Bind () aufgerufen werden). Daher geben wir hier in den gewünschten Kontext über diese (eigentlich foo) in die Bind () -Funktion. Wenn dann die Rückruffunktion ausgeführt wird, weist dies auf das FOO -Objekt hin. Eine weitere einfache Kastanie:

 var bar bar = function () {console.log (this.x);} var foo = {x: 3} bar (); // undefinedvar func = bar.bind (foo); func (); // 3

Hier erstellen wir einen neuen Funktionsfunktion. Bei Verwendung von Bind (), um eine Bindungsfunktion zu erstellen, wird dies bei ihrer Ausführung eher auf Foo als den globalen Bereich eingestellt, wie wenn wir Bar () aufrufen.

Es gibt eine interessante Frage. Wenn Bind () zweimal in einer Zeile ist oder Bind () dreimal in einer Zeile ist, was ist dann der Ausgangswert? So was:

 var bar bar = function () {console.log (this.x);} var foo = {x: 3} var sed = {x: 4} var func = bar.bind (foo) .bind (sed); func (); //? var fiv = {x: 5} var func = bar.bind (foo) .bind (sed) .bind (fiv); func (); //? var fiv = {x: 5} var func = bar.bind (foo) .bind (sed) .bind (fiv); func (); //?

Die Antwort ist, dass beide Male immer noch 3 anstelle der erwarteten 4 und 5 ausgeben. Der Grund dafür ist, dass in JavaScript mehrmals Bind () ungültig ist. Aus einem tieferen Grund ist die Implementierung von Bind () gleichwertig der Verwendung einer Funktion, um einen Aufruf / Bewerben intern zu wickeln. Der zweite Bind () entspricht dem ersten Bind () erneut, sodass die Bindung nach dem zweiten Mal nicht wirksam wird.

Bewerben, anrufen, Vergleiche binden

Was sind die Unterschiede und Unterschiede zwischen Anwendung, Anruf und Binden? Wenn Sie verwenden, wenden Sie sich an, rufen Sie an und wann Sie Bind verwenden. Eine einfache Kastanie:

 var obj = {x: 81,}; var foo = {getX: function () {return this.x;}} console.log (foo.getX.bind (obj) ()); //81console.log(foo.getX.call(obj)); //81console.log(foo.getX.Apply(obj)); //81console.log(foo.getX.Apply(obj)); //81console.log(foo.getX.Apply(obj)); // 81

Alle drei Ausgänge sind 81, achten Sie jedoch auf die mit der Bind () -Methode, die anschließend mehr Klammern hat.

Das heißt, der Unterschied besteht darin, dass wenn Sie den Kontext ändern und nicht sofort ausführen, sondern die Rückrufbacks die Bind () -Methode verwenden möchten. Bewerben/Aufruf führt die Funktion sofort aus.

Lassen Sie uns erneut zusammenfassen:

• Wenden Sie sich an, rufen Sie an, binden Sie alle, um das Zeigen dieses Objekts der Funktion zu ändern.

• Die ersten Parameter von Anwenden, Aufrufen und Binden sind die Objekte, auf die sich die Kontext, die Sie angeben möchten, hinweisen.

• Anwenden, aufrufen und binden können nachfolgende Parameter zum Übergeben von Parametern verwenden.

• Bind gibt die entsprechende Funktion zurück, die später leicht aufzurufen ist. Bewerben Sie sich und rufen Sie sofort auf.

Das obige ist die clevere Verwendung von Anwendung, Anruf und Binden in JavaScript, die Ihnen vom Editor vorgestellt wurden. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!