Heim  >  Artikel  >  Web-Frontend  >  Analyse der Erstellungs- und Aufrufmethoden anonymer Funktionen in js_javascript-Kenntnissen

Analyse der Erstellungs- und Aufrufmethoden anonymer Funktionen in js_javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 16:25:361395Durchsuche

In diesem Artikel werden die Erstellungs- und Aufrufmethoden anonymer Funktionen in js anhand von Beispielen analysiert. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

Eine anonyme Funktion ist eine Funktion ohne Namen, auch Abschlussfunktion (Closure) genannt, mit der Sie vorübergehend eine Funktion ohne angegebenen Namen erstellen können. Der am häufigsten als Parameter der Rückruffunktion (Callback) verwendete Wert. Viele unerfahrene Freunde verstehen anonyme Funktionen nicht. Lassen Sie es uns hier analysieren.

Funktionsname (Parameterliste) {Funktionskörper;}

Wenn Sie eine anonyme Funktion erstellen, sollte diese wie folgt lauten:
function(){Funktionskörper;}

Da es sich um eine anonyme Funktion handelt, werden ihr im Allgemeinen keine Parameter übergeben.

Warum eine anonyme Funktion erstellen? Unter welchen Umständen werden anonyme Funktionen verwendet? Es gibt zwei gängige Hauptszenarien für anonyme Funktionen: das eine ist die Rückruffunktion und das andere die direkte Funktionsausführung.

Die Rückruffunktion erfordert wie der asynchrone Betrieb von Ajax eine Rückruffunktion. Ich werde es hier nicht im Detail erklären. Was die direkte Ausführung von Funktionen betrifft, kann ich es anhand eines Beispiels verstehen:

Code kopieren Der Code lautet wie folgt:

Im obigen Code werden nacheinander zwei Warnfelder ausgegeben. Der Inhalt des ersten Benachrichtigungsfelds ist b und der zweite ist a. Haben Sie irgendwelche Vorteile gesehen? Ja, die Verwendung von Funktionen zur direkten Ausführung kann den Umfang von Variablen einschränken, sodass dieselben Variablen in verschiedenen Skripten nebeneinander existieren können.

Als nächstes werfen wir zunächst einen ersten Blick auf die Konzepte im Zusammenhang mit anonymen Funktionen.

Funktionsdeklaration (Funktionsanweisung) Um eine Funktion verwenden zu können, müssen wir zunächst ihre Existenz deklarieren. Die am häufigsten verwendete Methode besteht darin, die Funktionsanweisung zum Definieren einer Funktion zu verwenden, z. B.:

Code kopieren Der Code lautet wie folgt:
Funktion abc(){
// Code zum Verarbeiten von
}
function abc(){ // zu verarbeitender Code }

Natürlich kann Ihre Funktion auch Parameter annehmen oder sogar einen Wert zurückgeben.

Code kopieren Der Code lautet wie folgt:
Klarkopie in Zwischenablage anzeigen und drucken?
Funktion abc(x,y){
return x y;
}
Funktion abc(x,y){ return x y;
Unabhängig davon, wie Sie Ihre Funktion definieren, übersetzt der JS-Interpreter sie in ein Funktionsobjekt. Wenn Sie beispielsweise die Funktionsnummer in einem der obigen Beispiele definieren, geben Sie den folgenden Code ein:


Code kopieren Der Code lautet wie folgt:alert(typeof abc);// "function"
Ihr Browser öffnet ein Eingabeaufforderungsfeld, das Sie daran erinnert, dass abc ein Funktionsobjekt ist. Was genau ist ein Funktionsobjekt?

Funktionsobjekt

Funktionsobjekte sind in JavaScript integrierte Objekte und alle Funktionen sind tatsächlich Funktionsobjekte. Schauen wir uns zunächst an, ob das Funktionsobjekt den Konstruktor direkt zum Erstellen einer neuen Funktion verwenden kann. Die Antwort ist ja. Zum Beispiel:


Code kopieren Der Code lautet wie folgt:var abc = new Function("x","y"," return x* y;");
alarm(abc(2,3)); // "6"

Ich glaube, Sie haben jetzt verstanden, wie man eine Funktion deklariert. Was ist also eine anonyme Funktion?

Anonyme Funktion deklarieren

Wie der Name schon sagt, ist eine anonyme Funktion eine Funktion ohne tatsächlichen Namen. Entfernen wir beispielsweise den Namen der Funktion im obigen Beispiel und ermitteln wir dann, ob es sich um eine Funktion handelt:


Code kopieren Der Code lautet wie folgt:alert(typeof function(){});// "function"
alarm(typeof function(x,y){return x y;});// "function"
alarm(typeof new Function("x","y","return x*y;"))// "function"
alarm(typeof function(){});// "function"
alarm(typeof function(x,y){return x y;});// "function"
alarm(typeof new Function("x","y","return x*y;"))// "function"

Wir können leicht erkennen, dass sie alle Funktionsobjekte sind, mit anderen Worten, sie sind alle Funktionen, aber sie haben alle ein Merkmal – keinen Namen. Deshalb nennen wir sie „anonyme Funktionen“. Doch nur weil sie keinen „Namen“ haben, haben wir keine Möglichkeit, sie zu finden. Dies führt zu der Frage, wie man eine anonyme Funktion aufruft.

Aufruf der anonymen Funktion

Um eine Funktion aufzurufen, müssen wir eine Möglichkeit haben, sie zu finden und darauf zu verweisen. Also müssen wir einen Namen dafür finden. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:
var abc=function(x,y){
return x y;
}
alarm(abc(2,3)); // "5"

Die obige Operation entspricht tatsächlich einer anderen Definition der Funktion. Diese Verwendung kommt häufiger vor. Wenn wir beispielsweise eine Ereignisbehandlungsfunktion für DOM-Elemente festlegen, geben wir ihnen normalerweise keinen Namen, sondern weisen der entsprechenden Ereignisreferenz eine anonyme Funktion zu.

Es gibt tatsächlich eine andere Möglichkeit, anonyme Funktionen aufzurufen, nämlich das jQuery-Fragment, das wir gesehen haben: Verwenden Sie (), um die anonyme Funktion einzuschließen, und fügen Sie dann ein Klammerpaar hinzu (einschließlich der Parameterliste). Schauen wir uns noch einmal das folgende Beispiel an:

Code kopieren Der Code lautet wie folgt:
alert((function(x,y){return x y;}) (2, 3));// "5"
alarm((new Function("x","y","return x*y;"))(2,3));// "6"

Viele Leute fragen sich vielleicht, warum diese Methode erfolgreich aufgerufen werden kann? Für diejenigen, die diese Anwendung seltsam finden, lesen Sie bitte meine Erklärung unten.

Kennen Sie die Funktion von Klammern? Klammern können unsere Ausdruckskombination in Blöcke unterteilen, und jeder Block, dh jedes Klammerpaar, hat einen Rückgabewert. Dieser Rückgabewert ist tatsächlich der Rückgabewert des Ausdrucks in Klammern. Wenn wir also ein Klammerpaar verwenden, um eine anonyme Funktion zu umgeben, gibt das Klammerpaar tatsächlich ein Funktionsobjekt der anonymen Funktion zurück. Daher wird ein Klammerpaar plus eine anonyme Funktion von uns genauso referenziert wie eine benannte Funktion. Wenn Sie also nach dieser Referenzvariablen eine Parameterliste hinzufügen, wird die Aufrufform einer gewöhnlichen Funktion erreicht.

Ich weiß nicht, ob Sie den obigen Textausdruck verstehen können. Wenn Sie ihn immer noch nicht verstehen, schauen Sie sich den folgenden Code an.

Code kopieren Der Code lautet wie folgt:
var abc=function(x,y){return x y;}; // Das anonyme Funktionsobjekt wird abc
zugewiesen // Der Konstruktor von abc ist derselbe wie der Konstruktor der anonymen Funktion. Mit anderen Worten, die Implementierung der beiden Funktionen ist dieselbe.
alarm((abc).constructor==(function(x,y){return x y;}).constructor);

PS: Konstruktor bezieht sich auf die Funktion, die Objekte erstellt. Das heißt, der Funktionskörper, der durch das Funktionsobjekt dargestellt wird.
Kurz gesagt, verstehen Sie es (die in Klammern eingeschlossene anonyme Funktion) als das vom Klammerausdruck zurückgegebene Funktionsobjekt, und dann können Sie einen normalen Parameterlistenaufruf für dieses Funktionsobjekt durchführen. (Ich habe zuvor einen Fehler gemacht. Sie können eine Funktion nicht direkt mit nur einem Funktionsausdruck aufrufen. Das Entfernen der anonymen Funktionsklammern muss mit der Zuweisung des Ausdrucks einhergehen. Das heißt, (function(){alert(1)})() sollte sein Das Gleiche wie a =function(){alert(1)}() ist äquivalent, Sie können a= )

nicht entfernen.

Schließung

Was ist eine Schließung? Der Abschluss bezieht sich auf einen Codeblock in einer bestimmten Programmiersprache, der die Existenz einer Funktion der ersten Ebene ermöglicht und die in der Funktion der ersten Ebene definierten freien Variablen nicht freigegeben werden kann, bis die Funktion der ersten Ebene freigegeben wird Wird außerhalb der Funktion der ersten Ebene angewendet.

Wie? Du musst schwitzen, nachdem du es gesehen hast ... Es ist okay, ich auch (obwohl ich es verstehe, ist es nur eine Frage meiner Fähigkeit, mich auszudrücken). Lassen Sie es uns einfacher erklären: Der Abschluss ist eigentlich eine Sprachfunktion. Er bezieht sich auf eine Programmiersprache, die es ermöglicht, Funktionen als Objekte zu behandeln, und dann können Instanzen in Funktionen wie Operationen in Objekten (lokale Variablen) definiert werden Variablen können in der Funktion gespeichert werden, bis das Instanzobjekt der Funktion zerstört wird. Andere Codeblöcke können die Werte dieser Instanzvariablen (lokal) auf irgendeine Weise abrufen und die Anwendung erweitern.

Ich weiß nicht, ob es nach dieser Erklärung klarer wird. Wenn Sie es immer noch nicht verstehen, vereinfachen wir es noch einmal: Der Abschluss bezieht sich tatsächlich auf lokale Variablen, die in einer Programmiersprache definiert sind und es dem Code ermöglichen, einen Lauf aufzurufen Funktion.

Schauen wir uns nun ein Beispiel an:

Code kopieren Der Code lautet wie folgt:
var abc=function(y){
var x=y;// Dies ist eine lokale Variable
Rückgabefunktion(){
alarm(x);// Hier wird das x der lokalen Funktionsvariablen der ersten Ebene in der Abschlussfunktion aufgerufen und darauf bearbeitet
alarm(y--);//Die referenzierte Parametervariable ist auch eine freie Variable
}}(5);//Initialisierung
abc();// "5" "5"
abc();// "6" "4"
abc();// "7" "3"
alarm(x); // Fehler! „x“ ist nicht definiert!

Können Sie angesichts dessen erkennen, ob das jQuery-Code-Snippet geschlossen ist?

Lassen Sie uns mein Verständnis nutzen. Unabhängig davon, ob die Abschlussfunktion angewendet wird, müssen Sie feststellen, ob der Code das wichtigste Element enthält: lokale Variablen, die nicht zerstört wurden. Dann ist es offensichtlich, dass eine anonyme Funktion ohne Implementierung die Schließungsfunktion nicht anwenden kann. Was aber, wenn es eine Implementierung in der anonymen Funktion gibt? Dann müssen Sie sicherstellen, dass bei der Implementierung alle lokalen Variablen verwendet werden, die nicht zerstört wurden. Wenn ich Sie also frage: Welche Funktionen von JS werden im jQuery-Codeausschnitt im Eröffnungsartikel verwendet? Dann sind es nur anonyme Funktionen und anonyme Funktionsaufrufe. Es impliziert jedoch die Eigenschaften von Verschlüssen, und Verschlüsse können jederzeit angewendet werden.

Häufigste Verwendung:

Code kopieren Der Code lautet wie folgt:
(function() {
alarm('water');
})();

Natürlich können Sie auch Parameter mitbringen:
Code kopieren Der Code lautet wie folgt:
(function(o) {
alarm(o);
})('Wasser');

Möchten Sie verkettete Aufrufe an anonyme Funktionen verwenden? Ganz einfach:
Code kopieren Der Code lautet wie folgt:
(function(o) {
alarm(o);
return arguments.callee;
})('water')('down');

Sie kennen alle gängigen anonymen Funktionen, werfen wir einen Blick auf die ungewöhnlichen:
Code kopieren Der Code lautet wie folgt:
~(function(){
alarm('water');
})();//Der Text ist etwas cool~

void function(){
alarm('water');
}();//Es soll das effizienteste sein~

function(){
alarm('water');
}();

-function(){
alarm('water');
}();

~function(){
alarm('water');
}();

!function(){
alarm('water');
}();

(function(){
alarm('water');
}());//Es fühlt sich ein bisschen wie Durchsetzung an~

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme:
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