Heim > Web-Frontend > js-Tutorial > Ausführliche Erläuterung der Quell- und Kontaktunterschiede zwischen den Aufruf-, Apply- und Bind-Methoden in Javascript mit Beispielen

Ausführliche Erläuterung der Quell- und Kontaktunterschiede zwischen den Aufruf-, Apply- und Bind-Methoden in Javascript mit Beispielen

伊谢尔伦
Freigeben: 2017-07-20 14:04:43
Original
1554 Leute haben es durchsucht

Der Ursprung der Call/Apply/Bind-Methode

Zuallererst müssen wir bei der Verwendung der Call-, Apply- und Bind-Methoden wissen, wo sich diese drei befinden Methoden kommen her? Warum können diese drei Methoden verwendet werden?

Die drei Methoden call, apply und bind werden tatsächlich von Function.prototype geerbt und sind Instanzmethoden.


 console.log(Function.prototype.hasOwnProperty('call')) //true
 console.log(Function.prototype.hasOwnProperty('apply')) //true
 console.log(Function.prototype.hasOwnProperty('bind')) //true
Nach dem Login kopieren

Im obigen Code wird true zurückgegeben, was darauf hinweist, dass die drei Methoden von Function.prototype geerbt werden. Natürlich erben alle gewöhnlichen Objekte, Funktionen und Arrays die drei Methoden im Function.prototype-Objekt, sodass diese drei Methoden in Objekten, Arrays und Funktionen verwendet werden können.

Objekt, das an die Rückruffunktion gebunden ist

Wenn dieses Objekt in der Rückruffunktion verwendet wird, zeigt dieses Objekt auf das DOM-Objekt, das das Schaltflächenobjekt ist. Wenn Sie das Problem dieses Zeigens in der Rückruffunktion lösen möchten, können Sie die folgende Methode verwenden.


var o = {
 f: function() {
 console.log(this === o);
 }
 }
 $('#button').on('click', function() {
 o.f.apply(o);
 //或者 o.f.call(o);
 //或者 o.f.bind(o)();
 });
Nach dem Login kopieren

Nachdem Sie auf die Schaltfläche geklickt haben, zeigt die Konsole true an. Da die Apply-Methode (oder Call-Methode) nicht nur das Objekt bindet, an dem die Funktion ausgeführt wird, sondern die Funktion auch sofort ausführt (während die Bind-Methode nicht sofort ausgeführt wird, beachten Sie bitte den Unterschied), muss die Bindungsanweisung geschrieben werden ein Funktionskörper.

Die Verbindung und der Unterschied zwischen den Aufruf-, Anwendungs- und Bindungsmethoden

Tatsächlich werden diese drei Methoden verwendet, um das Problem anzugeben, auf das hingewiesen wird Dies innerhalb der Funktion Sie sind fast gleich, aber es gibt Unterschiede in der Form. Leser können versuchen, die obigen Beispiele auf drei Arten umzusetzen.

Um die Aufruf-, Anwendungs- und Bindungsmethoden zusammenzufassen:

a: Der erste Parameter gibt den Zeiger innerhalb der Funktion an (den Bereich, in dem die Funktion ausgeführt wird) und dann Diese Funktion wird entsprechend dem angegebenen Bereich aufgerufen.

b: Beim Aufruf von Funktionen können Parameter übergeben werden. Die Methoden call und bind müssen direkt übergeben werden, während die Methode apply in Form eines Arrays übergeben werden muss.

 c: Die Call- und Apply-Methoden führen die Funktion unmittelbar nach dem Aufruf aus, während die Bind-Methode nicht sofort ausgeführt wird und die Funktion erneut ausgeführt werden muss. Es riecht etwas verschlossen.

 d: Das Ändern der Ausrichtung dieses Objekts umfasst nicht nur die Methoden call, apply und bind, sondern auch die Variable that, um die Ausrichtung dieses Objekts festzulegen.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Quell- und Kontaktunterschiede zwischen den Aufruf-, Apply- und Bind-Methoden in Javascript mit Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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