Detaillierte Erklärung der JavaScript-Funktionen_Grundkenntnisse

Einführung

In vielen traditionellen Sprachen (C/C/Java/C# usw.) existieren Funktionen als Bürger zweiter Klasse. Sie können eine Funktion nur mit Sprachschlüsselwörtern deklarieren und sie dann aufrufen Funktion als Parameter Um sie an eine andere Funktion zu übergeben, sie einer lokalen Variablen zuzuweisen oder als Rückgabewert zu verwenden, sind spezielle Methoden wie Funktionszeiger und Delegaten erforderlich.
In der JavaScript-Welt sind Funktionen erstklassige Bürger. Sie verfügen nicht nur über alle Möglichkeiten, herkömmliche Funktionen zu verwenden (Deklaration und Aufruf), sondern können auch Werte zuweisen, Parameter übergeben und solche einfachen Werte zurückgeben -Klassenfunktionen. Darüber hinaus fungiert die Funktion in JavaScript auch als Konstruktor der Klasse und ist eine Instanz der Function-Klasse. Aufgrund dieser Mehrfachidentitäten sind JavaScript-Funktionen sehr wichtig.

1. JavaScript-Funktionen für Einsteiger

Wie andere Sprachen folgen auch JavaScript-Funktionen dem Prinzip der Deklaration und späteren Verwendung. Funktionsnamen dürfen nur Buchstaben, Zahlen, Unterstriche oder $ enthalten und dürfen nicht mit Zahlen beginnen. Es gibt zwei gängige Möglichkeiten, Funktionen zu deklarieren:

Code kopieren Der Code lautet wie folgt:

// Funktion myfunc
direkt deklarieren Funktion myfunc(/* Argumente */) {
}

//Weisen Sie die anonyme Funktion der lokalen Variablen myfunc
zu var myfunc = function(/* arguments */) {
}

Beachten Sie, dass es subtile Unterschiede zwischen den beiden oben genannten Methoden der Funktionsdeklaration gibt: Die erste Methode ist bei der Deklaration eine benannte Funktion, unabhängig davon, ob sie vor dem Aufruf, nach dem Aufruf oder sogar an einer Position deklariert wird, die nicht ausgeführt wird (z. B. eine Return-Anweisung oder eine Verzweigung, die niemals wahr sein wird) sind im gesamten Bereich zugänglich. Die zweite Möglichkeit besteht darin, einer Variablen eine anonyme Funktion zuzuweisen, bei der es sich nicht unbedingt um eine Funktionsdeklaration (Funktionsdeklaration) handelt Auf diese Funktion kann vor der Zuweisung kein Code zugreifen, was bedeutet, dass die Zuweisung vor dem Aufruf abgeschlossen sein muss, andernfalls tritt beim Aufruf ein Fehler auf: „TypeError: undefiniert ist keine Funktion“. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

myfunc1(); // Kann normal aufgerufen werden, da myfunc1 direkt deklariert wird

Funktion myfunc1() {
}

myfunc2(); // FehlertypFehler: undefiniert ist keine Funktion

var myfunc2 = function() {
};

Die grundlegende Methode zum Aufrufen einer Funktion ist die gleiche wie in traditionellen Sprachen unter Verwendung eines Klammerpaars: myfunc(). JavaScript-Funktionen unterstützen auch direkte oder indirekte rekursive Aufrufe. Beispielsweise kann die klassische Fibonacci-Funktion wie folgt in JavaScript implementiert werden:

Code kopieren Der Code lautet wie folgt:

Funktion fib(n) {
Wenn (n == 1 || n == 2) {
Rückgabe 1;
} else {
Rückgabe fib(n - 2) fib(n - 1); }
}

Funktionen in JavaScript können Parameter variabler Länge verarbeiten. Innerhalb der Funktion gibt es eine lokale Variable mit dem Namen „Argumente“, bei der es sich um ein Array-ähnliches Objekt handelt, das alle beim Aufruf übergebenen Parameter enthält . Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

Funktionstest() {
alarm(arguments.length);
}

test(1); // 1
test(1, 'a'); // 2
test(true, [], {}); // 3 Argumente können zur Implementierung ähnlicher Funktionen wie printf in der C-Sprache und auch zur Implementierung von Methodenpolymorphismus verwendet werden.

2. Erweiterte JavaScript-Funktionen

2.1 Anonyme Funktionen und verschachtelte Funktionen

In JavaScript können Sie eine Funktion ohne Namen deklarieren, die als anonyme Funktion bezeichnet wird. Gleichzeitig ermöglicht JavaScript auch die Deklaration von Funktionen innerhalb von Funktionen, sogenannte verschachtelte Funktionen. Der Geltungsbereich einer verschachtelten Funktion ist die gesamte übergeordnete Funktion.

Im vorherigen Abschnitt zur Funktionsdeklaration haben wir die Verwendung anonymer Funktionen und verschachtelter Funktionen gesehen. Da anonyme Funktionen keine Namen haben, führen sie keine neuen Variablen ein, die den Kontext verschmutzen, und bringen daher häufig neue Variablenbereiche mit sich zur Vermeidung globaler Umweltverschmutzung eingesetzt.

In der JavaScript-Laufzeit gibt es eine spezielle globale Umgebung (globales Objekt). In der tatsächlichen Entwicklung werden häufig mehrere Bibliotheken von Drittanbietern oder mehrere js-Dateien verwendet oder Funktionsdeklaration führt zu Verwirrung bei der Codeausführung. Beispielsweise werden zwei js-Dateien nacheinander eingeführt und jede definiert ihr eigenes Funktionsprotokoll für den internen Gebrauch. Die zweite eingeführte Funktion überschreibt die erste Definition und löst keine Fehler aus. Der Aufruf der Protokollfunktion bei nachfolgenden Ausführungen kann zu Problemen führen. Fehler verursachen. Derzeit kann dieser Fehler vermieden werden, indem eine anonyme Funktion zum Einschließen der Logik in das gesamte JS verwendet wird. Diese Methode wurde von den meisten Open-Source-JS-Bibliotheken verwendet.

Code kopieren Der Code lautet wie folgt:

(function() { // Anonyme Funktion

Funktionsprotokoll(Nachricht) {
console.log(msg);
}

// Andere Codes

}()); // Sofort ausführen

Der obige Code ist ein einfaches Beispiel. Der Umfang der Protokollfunktion ist auf diese anonyme Funktion beschränkt, und die anonyme Funktion wird von einem Paar Klammern () umgeben, um einen Funktionsausdruck zu bilden Funktion, gefolgt von einem Klammerpaar, um anzugeben, dass die Funktion sofort ausgeführt wird, sodass der ursprüngliche Code normal ausgeführt werden kann. Auf diese Weise deklarierte Funktionen, über var deklarierte Variablen usw. sind jedoch intern und können von keinem anderen Code als anonymen Funktionen aufgerufen werden. Wenn Sie einige Funktionen als Schnittstellen verfügbar machen müssen, gibt es mehrere Methoden:

Code kopieren Der Code lautet wie folgt:

var mylib = (function(global) {

Funktionsprotokoll(Nachricht) {
console.log(msg);
}

log1 = log; // Methode 1: Verwenden Sie das Standardverhalten der Variablendeklaration ohne var und machen Sie log1 zu einer globalen Variablen (nicht empfohlen)

global.log2 = log; // Methode 2: Fügen Sie das log2-Attribut direkt zum globalen Objekt hinzu und weisen Sie den Wert der Protokollfunktion zu (empfohlen)

return { // Methode 3: Erhalten Sie eine Reihe von Schnittstellenfunktionssammlungsobjekten über den Rückgabewert der anonymen Funktion und weisen Sie sie der globalen Variablen mylib zu (empfohlen)
Protokoll: Protokoll
};

}(Fenster));

2.2 Funktion höherer Ordnung

Wenn eine Funktion als Parameter oder Rückgabewert verwendet wird, wird sie als Funktion höherer Ordnung bezeichnet. Alle Funktionen in JavaScript können als Funktionen höherer Ordnung verwendet werden. Im Folgenden werden wir diese beiden Verwendungsmethoden analysieren.

Code kopieren Der Code lautet wie folgt:

Funktion negativ(n) {
Return -n; // Nimm den entgegengesetzten Wert von n
}

Funktion Quadrat(n) {
Rückgabe n*n; // n im Quadrat
}

Funktionsprozess(Nums, Rückruf) {
var result = [];

for(var i = 0, length = nums.length; i < length; i ) {
result[i] = callback(nums[i]); // Alle Elemente im Array nums zur Verarbeitung an Callback übergeben und den Rückgabewert als Ergebnis
speichern }

Ergebnis zurückgeben;
}

var nums = [-3, -2, -1, 0, 1, 2, 3, 4]; var n_neg = process(nums, negative); // n_neg = [3, 2, 1, 0, -1, -2, -3, -4]; var n_square = process(nums, quadrat); // n_square = [9, 4, 1, 0, 1, 4, 9, 16];

Der obige Code zeigt ein Beispiel für die Übergabe einer Funktion als Parameter an einen anderen Funktionsprozessaufruf. Bei der Implementierung der Prozessfunktion wird der Rückruf als Blackbox behandelt, die für die Übergabe der Parameter an diese und das anschließende Abrufen verantwortlich ist Der Rückgabewert war vorher nicht klar. Nur wenn die Zeilen 20 und 22 ausgeführt werden, wird der Rückruf durch einen negativen bzw. quadratischen Wert dargestellt und die umgekehrte bzw. quadratische Wertoperation wird für jedes Element ausgeführt.

Code kopieren Der Code lautet wie folgt:

Funktionsgenerator() {
var i = 0;
Rückgabefunktion() {
Zurück i ; };
}

var gen1 = Generator(); // Holen Sie sich einen Generator für natürliche Zahlen
var gen2 = Generator(); // Holen Sie sich einen weiteren Generator für natürliche Zahlen
var r1 = gen1(); // r1 = 0
var r2 = gen1(); // r2 = 1
var r3 = gen2(); // r3 = 0
var r4 = gen2(); // r4 = 1

Der obige Code zeigt ein Beispiel für die Verwendung einer Funktion als Rückgabewertgenerator. Es handelt sich um eine Generatorfunktion für natürliche Zahlen, und der Rückgabewert ist eine Generatorfunktion für natürliche Zahlen. Bei jedem Aufruf des Generators wird als Ergebnis eine anonyme Funktion zurückgegeben. Diese anonyme Funktion gibt nacheinander jede natürliche Zahl zurück, wenn sie tatsächlich aufgerufen wird. Die Variable i im Generator erhöht sich bei jedem Aufruf dieser anonymen Funktion um 1. Dies ist eigentlich ein Abschluss. Lassen Sie uns unten Verschlüsse vorstellen.

2.3 Schließung Schließung (Closure) ist kein neues Konzept. Schließungen werden in vielen funktionalen Sprachen verwendet. In JavaScript werden Abschlüsse verwendet, wenn Sie Variablen im Rahmen einer externen Funktion innerhalb einer Inline-Funktion verwenden. Verwenden Sie eine gängige Analogie, um die Beziehung zwischen Abschlüssen und Klassen zu erklären: Klassen sind Daten mit Funktionen und Abschlüsse sind Funktionen mit Daten.
Ein Merkmal der in Abschlüssen verwendeten Variablen besteht darin, dass sie nicht freigegeben werden, wenn die übergeordnete Funktion zurückkehrt, sondern enden, wenn der Lebenszyklus des Abschlusses endet. Beispielsweise verwenden gen1 und gen2 wie im Generatorbeispiel im vorherigen Abschnitt unabhängige Variablen i (wenn i von gen1 um 1 zunimmt, ist i von gen2 nicht betroffen und umgekehrt), solange gen1 oder gen2 die beiden Variablen sind Da sie nicht von der JavaScript-Engine als Garbage Collection erfasst werden, werden ihre jeweiligen Variablen i nicht freigegeben. In der JavaScript-Programmierung werden Abschlüsse unbewusst verwendet. Diese Funktion von Abschlüssen ist zwar benutzerfreundlicher, kann aber auch leicht zu Problemen wie Speicherverlusten führen. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

var elem = document.getElementById('test');
elem.addEventListener('click', function() {
warning('Sie haben auf ' elem.tagName geklickt); });

Die Funktion dieses Codes besteht darin, den Labelnamen eines Knotens anzuzeigen, wenn darauf geklickt wird. Er registriert eine anonyme Funktion als Klickereignisverarbeitungsfunktion eines DOM-Knotens, auf den in der Funktion verwiesen wird geschlossene Tasche. Dadurch wird ein Zirkelverweis generiert, nämlich: DOM-> Closure->DOM-> Das DOM-Objekt wird nicht freigegeben, bevor der Abschluss freigegeben wird, und der Abschluss dient als Ereignisbehandlungsfunktion des DOM Das Objekt ist vorhanden, daher wird der Abschluss nicht freigegeben, bevor das DOM-Objekt freigegeben wird. Selbst wenn das DOM-Objekt im DOM-Baum gelöscht wird, werden aufgrund der Existenz dieses Zirkelverweises weder das DOM-Objekt noch der Abschluss freigegeben. Sie können diesen Speicherverlust vermeiden, indem Sie die folgende Methode verwenden:

Code kopieren Der Code lautet wie folgt:

var elem = document.getElementById('test');

elem.addEventListener('click', function() {
warning('Sie haben auf ' this.tagName geklickt); // Verweisen Sie nicht mehr direkt auf die elem-Variable
});

Im obigen Code wird this anstelle von elem verwendet (in der DOM-Ereignisbehandlungsfunktion zeigt dieser Zeiger auf das DOM-Element selbst), sodass die JS-Laufzeit nicht mehr denkt, dass die Variable der übergeordneten Klasse verwendet wird In dieser Funktion wird also kein Abschluss mehr gebildet. Schließungen führen auch zu vielen ähnlichen Problemen mit Speicherlecks. Achten Sie beim Schreiben von Code nur auf Schließungen, um solche Probleme zu vermeiden.

2.4 Klassenkonstruktor
JavaScript-Funktionen dienen auch als Konstruktoren von Klassen. Solange Sie also eine Funktion deklarieren, können Sie das Schlüsselwort new verwenden, um eine Instanz der Klasse zu erstellen.

Code kopieren Der Code lautet wie folgt:

Funktion Person(name) {
This.name = name;
This.toString = function() {
Return 'Hallo, ' this.name '!'; };
}

var p = neue Person('Ghostheaven'); Alert(p); // Hallo, Ghostheaven! Die Person-Funktion wird zu diesem Zeitpunkt auf das neu erstellte Instanzobjekt verwiesen Detaillierte Informationen zur objektorientierten JavaScript-Programmierung finden Sie in diesem Artikel. Worüber ich hier sprechen möchte, ist das Problem des Rückgabewerts, wenn JavaScript-Funktionen als Klassenkonstruktoren verwendet werden.

Code kopieren Der Code lautet wie folgt:

Funktion MyClass(name) {

This.name = name;
Rückgabename; // Rückgabewert des Konstruktors
}

var obj1 = new MyClass('foo'); var obj2 = MyClass('foo'); var obj3 = new MyClass({}); var obj4 = MyClass({});



Der obige Konstruktor ist etwas ganz Besonderes, er hat eine Return-Anweisung. Auf welche Objekte zeigen also obj1 ~ obj4 jeweils? Das tatsächliche Ergebnis ist dieses:

Code kopieren

Der Code lautet wie folgt: obj1 = MyClass-Objekt obj2 = 'foo' obj3 = {}

obj4 = {}

Der spezifische Grund wird in diesem Artikel erläutert, und ich werde in diesem Artikel nicht auf Details eingehen. Da der Konstruktor mit einem Rückgabewert seltsame Ergebnisse liefert, rufen Sie im Konstruktor keine Rückgabeanweisung mit einem Rückgabewert auf leere Rückgabe ist in Ordnung).

3. JavaScript-Funktionsmonsterebene

Willkommen im Funktionslehrbereich auf Monsterebene, wo wir Ihnen beibringen, wie Sie Monstern ruhig und entspannt begegnen können. . .

3.1 Funktionsklasse

In der JavaScript-Laufzeit gibt es eine integrierte Klasse namens Function. Das Deklarieren einer Funktion mit dem Schlüsselwort function ist eigentlich eine Kurzform zum Erstellen eines Function-Klassenobjekts. Alle Funktionen verfügen über alle Methoden der Function-Klasse, z. B. call, apply, und bind Warten Sie, Sie können diese Aussage über das Schlüsselwort „instanceof“ überprüfen.
Da Function eine Klasse ist, ist ihr Konstruktor Function (selbst ist auch ein Objekt der Function-Klasse), und es sollte möglich sein, über das Schlüsselwort new ein Funktionsobjekt zu generieren. Hier kommt das erste Monster: Wie man eine Funktion mithilfe der Function-Klasse erstellt. Die Syntax der Funktion lautet wie folgt:

Code kopieren

Der Code lautet wie folgt: neue Funktion ([arg1[, arg2[, ... argN]],] functionBody)

Darunter sind arg1, arg2, ... argN Zeichenfolgen, die Parameternamen darstellen, und functionBody ist auch eine Zeichenfolge, die den Funktionskörper darstellt. Die vorherigen Parameternamen können mehr oder weniger sein letzter Parameter als Im Funktionskörper werden die vorherigen als Parameter behandelt.

Code kopieren

Der Code lautet wie folgt: var func1 = new Function('name', 'return "Hallo, " name "!";'); func1('Ghostheaven'); // Hallo, Ghostheaven!

Die obige Methode erstellt eine Funktion über Function. Diese Funktion ist genau die gleiche wie andere mit dem Schlüsselwort function deklarierte Funktionen.
Angesichts dessen fragen sich viele vielleicht, warum so ein Monster nötig ist? „Was auch immer vorhanden ist, ist sinnvoll.“ Die Function-Klasse hat ihren einzigartigen Nutzen. Sie können sie verwenden, um verschiedene Funktionslogiken dynamisch zu generieren oder die Funktion der Auswertungsfunktion zu ersetzen und zu verhindern, dass die aktuelle Umgebung verschmutzt wird*.

3.2 Selbstaktualisierungsfunktion

In vielen Sprachen kann eine Funktion mit demselben Namen nicht erneut deklariert werden, da sonst ein Syntaxfehler auftritt. Funktionen in JavaScript können jedoch nicht nur wiederholt deklariert werden, sondern sich auch selbst aktualisieren. Das Monster, das sich selbst frisst, ist da!

Code kopieren

Der Code lautet wie folgt:

Funktion selfUpdate() {
window.selfUpdate = function() {
alarm('zweiter Lauf!');
};

alarm('erster Lauf!');
}

selfUpdate(); // Erster Lauf! selfUpdate(); // zweiter Durchlauf! Diese Funktion kann verwendet werden, um die Logik nur einmal auszuführen und nach dem ersten Durchlauf die gesamte Logik durch einen neuen Teil der Logik zu ersetzen.

Zusammenfassung

JavaScript-Funktionen sind sehr leistungsfähig, während sie viele Probleme wunderbar lösen, aber auch viele negative Probleme mit sich bringen. Die Verwendung von Funktionen auf Monsterebene ist in der Regel wenig bekannt. Verwenden Sie sie nicht leichtfertig, es sei denn, dies ist besonders notwendig. Andernfalls wird es schwierig, den Code zu lesen, und die Entwicklungseffizienz wird beeinträchtigt.

* Im neuen ECMAScript wird der strikte Modus eingeführt. Im strikten Modus ist die Auswertungsfunktion stark eingeschränkt und kann auch sicherstellen, dass die Umgebung nicht verschmutzt wird

Haben Sie es verstanden, Freunde? Es ist sehr praktisch. Wenn Ihnen etwas fehlt, fragen Sie bitte die Experten um Rat, dann können wir gemeinsam Fortschritte machen.