Vergleichende Analyse der Verwendung von Call, Apply und Bind in Javascript_Grundkenntnisse

Die Verwendung der drei Funktionen Aufruf, Anwenden und Binden ist ein unüberwindbarer Wissenspunkt beim Erlernen der Sprache JavaScript. Im Folgenden fasse ich die Verwendung der einzelnen drei und gängige Anwendungsszenarien zusammen.

Schauen Sie sich zunächst die Anruffunktion an, die als „Ausleihen“ und „Anfordern“ verstanden werden kann. Stellen Sie sich das folgende Szenario vor: Sie sind allein und wandern draußen und möchten zu Hause anrufen, wenn etwas Dringendes passiert, aber leider ist Ihr Telefon nicht zahlungsfähig, der Akku ist leer oder es ist in eine Falle getappt. Ihr Telefon kann einfach nicht verwendet werden. Sie müssen diesen Anruf jedoch tätigen, damit Sie das Mobiltelefon eines Freundes, eines Nachbarn oder eines öffentlichen Telefons ausleihen können. Auf diese Weise können Sie einen Anruf tätigen, auch wenn Sie kein Mobiltelefon zur Verfügung haben Es spielt keine Rolle, mit welchem ​​Telefon Sie den Anruf getätigt haben. Der Effekt ist jedoch derselbe, als würden Sie von Ihrem eigenen Mobiltelefon aus anrufen. Die ursprüngliche Absicht der Aufruffunktion ähnelt dieser. Im Folgenden verwende ich Code, um ihr Anwendungsszenario zu simulieren:

Code kopieren Der Code lautet wie folgt:

var frog = {
Name: 'Frosch',
             sagen Sie: function(){
alarm(this.name);
}
}
var Rabbit = {
Name: 'Kaninchen'
}
frog.say.call(rubbit) // Kaninchen

Rubbit ist ein stummes Objekt, aber es ist unmöglich, es mit seiner eigenen Fähigkeit zu erreichen, und es kann sprechen. Also bat Rubbit den Frosch, diesen Wunsch zu verwirklichen. Der erste Parameter von frog.say.call() muss mit der Person ausgefüllt werden, die den Antrag gestellt hat, was Anwälte gerne als Mandanten bezeichnen. Hier bittet Rubbit den Frosch, seinen Namen dafür zu nennen, also geben Sie Rubbit ein. Auf diese Weise wird beim Sprechen der Name des Rubbits anstelle des Namens des Frosches gesucht. Wie würde es aussehen, wenn ich hier den Frosch ausfüllen würde? Das ist so, als würde man sich selbst bitten, etwas zu tun. Du kannst es ausprobieren:

Code kopieren Der Code lautet wie folgt:

var frog = {
Name: 'Frosch',
             sagen Sie: function(){
alarm(this.name);
}
}
var Rabbit = {
Name: 'Kaninchen'
}
frog.say.call(frog) // frog

Wenn Sie sich eine Tüte Salz gönnen, müssen Sie Ihren Namen gesagt haben. Es gibt überhaupt keine Überraschung. Werfen wir einen Blick auf die klassische Verwendung von call:

Code kopieren Der Code lautet wie folgt:

//Parameter in echte Array-Objekte konvertieren
Funktion frog(){
var arr = [].slice.call(arguments);
console.log(arguments.slice,arr.slice)
// undefinierte Funktion Slice() { [nativer Code] }
}
Frosch(1,2,3,4)

Nach einem solchen Aufruf können wir das Argumentobjekt als Array-Objekt verwenden. Es gibt viele Verwendungsmöglichkeiten für Anrufe. Öffnen Sie den Quellcode von jquery und Sie können leicht viele Anwendungen finden. Ich werde sie hier nicht alle auflisten, aber kehren wir zu unserer vorherigen Szene zurück. Es ist zu einfach, ein Telefon auszuleihen. Ich möchte auf jeden Fall etwas mitnehmen Ich habe so viele Jahre verbracht und den älteren Menschen keinen gebührenden Respekt entgegengebracht. Es wäre auf jeden Fall großartig, noch einmal dorthin zurückzukehren und ein paar lokale Spezialitäten zu kaufen. Allerdings ist der Druck des Lebens draußen so groß, dass man zusätzlich zur Arbeit jeden Tag Überstunden machen muss. Wenn man um Urlaub bittet, wird einem nicht nur das Gehalt abgezogen, sondern es fallen auch viele Reisekosten an Der Gesamtbetrag reicht wahrscheinlich aus, um ältere Menschen ein Jahr lang zu Hause zu bleiben. Es war nicht kosteneffizient, darüber nachzudenken, also habe ich darüber nachgedacht, diese Funktion anzurufen und um Hilfe zu bitten. Es ist eine sehr kluge Entscheidung, es mitzunehmen. Außerdem wird dafür keine Gebühr erhoben Begrenzen Sie die Menge und das Gewicht. Sie können so viel mitbringen, wie Sie möchten. Lassen Sie es mich noch einmal mit dem Code demonstrieren:

Code kopieren Der Code lautet wie folgt:

var frog = {
Name: 'Frosch',
Senden: function(money,food,milk,suagate){
Warnung(Geld Essen Milch Suagat);
}
}
var Rabbit = {
Name: 'Kaninchen'
}
frog.send.call(rubbit,'money','food','milk','suagate')

Wenn Sie Geld und Willenskraft haben, können Sie sogar ein paar iPhone6 ​​plus oder so zurückschicken. .^_^.

Der Anruf ist zu diesem Zeitpunkt fast beendet. Ich weiß nicht, ob das obige Melodrama Ihnen klar gemacht hat, worum es in dem Anruf geht. Wenn es nur Ihr Heimweh geweckt hat, tut es mir leid.

Call hat auch einen Halbbruder namens Apply. Wenn Sie verstehen, wie man Call verwendet, ist Apply eigentlich dasselbe. Der einzige Unterschied besteht darin, dass Apply nicht gerne Dinge weitergibt umweltfreundlich. Es bietet also eine große Box zum Aufbewahren von Dingen, und Sie legen einfach alle Dinge, die Sie transportieren möchten, in die bereitgestellte Box. Diese große Box ist ein Array. Das obige Beispiel würde bei Anwendung wie folgt aussehen:

Code kopieren Der Code lautet wie folgt:

var frog = {
Name: 'Frosch',
Senden: function(money,food,milk,suagate){
Warnung(Geld Essen Milch Suagat);
}
}
var Rabbit = {
Name: 'Kaninchen'
}
//Achten Sie auf den Unterschied in den Parametern
frog.send.apply(rubbit,['money','food','milk','suagate'])

Das Obige ist das vergangene und gegenwärtige Leben von Apply und Call. Aber sie hätten nie damit gerechnet, dass der Vater von Apply und Call vor ein paar Jahren ein Vermögen mit Immobilien gemacht hatte und außerdem einen unehelichen Sohn namens Bind Outside hatte. Obwohl er einige Jahre später als seine beiden Brüder Call and Apply debütierte, sollten seine Fähigkeiten nicht unterschätzt werden. Allerdings wird seine Identität mancherorts nicht erkannt. Wie IE6. Im Folgenden werde ich Code verwenden, um seine Fähigkeiten zu demonstrieren:

Code kopieren Der Code lautet wie folgt:

var name = 'rubbit';
var frog = {
Name: 'Frosch',
           sagen: function(){
             setTimeout(function(money,milk){
Alert(this.name Geldmilch)
              }.bind(this,'money','milk'),1000)
}
}
frog.say();

Durch Vergleich haben wir herausgefunden, dass bind direkt nach function(){} verwendet werden kann. Dies entspricht dem Weglassen von call und apply und der Angabe des Clients und der zu übergebenden Parameter direkt nach der Funktion. In Bezug auf den Stil der Parameterübergabe ähnelt es eher einem Aufruf.

Was Bind betrifft, schauen wir uns eine klassische Verwendung an:

Code kopieren Der Code lautet wie folgt:

var obj = {
Name: 'Frosch'
}
document.addEventListener('click',function(){
​​alert(this.name); // frog
}.bind(obj),false);

Zusammenfassend lässt sich sagen, dass die Ähnlichkeiten zwischen diesen drei Brüdern „apply“, „call“ und „bind“ wie folgt sind:

1. Der erste Parameter ist der gebundene Bereich, d. h., in wessen Gebiet die Arbeit ausgeführt wird.

2. Sie können Parameter

übergeben

Der Unterschied ist:

apply, call hat eine bessere Kompatibilität und bind wird von einigen Browsern niedrigerer Versionen nicht unterstützt.

Die von apply übergebenen Parameter müssen in ein Array eingeschlossen werden, während call und bind die zu übergebenden Parameter einzeln auflisten.

Haben Sie ein tieferes Verständnis für die Verwendung der drei Funktionen „Aufrufen“, „Anwenden“ und „Binden“? Ich hoffe, dieser Artikel kann Ihnen hilfreich sein.