Fahren Sie mit dem vorherigen Artikel "So schreiben Sie qualitativ hochwertiger JS-Code" fort. Diesmal werde ich die Wissenspunkte von JavaScript-Funktionen sortieren.
2. Verwenden Sie Funktionen
Funktionen bieten den Programmierern Hauptfunktionen und Implementierungsmechanismen. Funktionen können unabhängig voneinander mehrere verschiedene Funktionen in anderen Sprachen implementieren, z. B. Verfahren, Methoden, Konstruktoren und sogar Klassen oder Module.
2.1 Verstehen Sie die Unterschiede zwischen Funktionsaufrufen, Methodenaufrufen und Konstruktoraufrufen
Für die objektorientierte Programmierung sind der Konstruktor von Funktionen, Methoden und Klassen drei verschiedene Konzepte.
Verwendungsmodus:
1. Funktionsaufruf
Die Codekopie lautet wie folgt:
Funktion Hallo (Benutzername) {
Rückgabe "Hallo" + Benutzername;
}
2. Methodenaufruf
Die Codekopie lautet wie folgt:
var obj = {
Hallo: function () {
zurück "Hallo", + this.username;
},
Benutzername: "Floralam"
};
ohj.hello (); // "Hallo, Floralam"
Diese Variable ist an das Objekt gebunden, da die Hallo -Methode im OBJ -Objekt definiert ist. Wir können auch eine Kopie derselben Funktionsreferenz in einem anderen Objekt zuweisen und dieselbe Antwort erhalten.
Die Codekopie lautet wie folgt:
var obj2 = {
Hallo: obj.hello (),
Benutzername: "Floralam"
};
3. Verwenden Sie den Konstruktor
Die Codekopie lautet wie folgt:
Funktion Benutzer (Name, PasswordHash) {
this.name = name;
this.Passwordhash = passwordHash;
}
Das Aufrufen von Benutzern mit dem neuen Bediener wird als Konstruktor angesehen.
Die Codekopie lautet wie folgt:
var u = neuer Benutzer ("Floralam", "123");
Im Gegensatz zu Funktionsaufrufen und Methodenaufrufen nimmt der Konstruktoraufruf ein völlig neues Objekt als Wert dieser Variablen und gibt dieses neue Objekt implizit als Aufrufergebnis zurück. Die Hauptverantwortung des Konstruktors besteht darin, das neue Objekt zu initialisieren.
2.2 fortgeschrittene Funktionen kompetent
Funktionen höherer Ordnung sind nichts anderes als Funktionen, die Funktionen als Parameter oder Rückgabeteile betrachten und Funktionen als Parameter verwenden (normalerweise als Rückruffunktionen genannt, da Funktionen höherer Ordnung anschließend "IT aufrufen") eine besonders leistungsstarke und ausdrucksstarke Idiom sind und auch in JS-Programmen häufig verwendet werden.
Betrachten Sie die Standard -Sortiermethode von Arrays. Um für alle Arrays zu arbeiten, muss der Anrufer entscheiden, wie zwei Elemente im Array verglichen werden.
Die Codekopie lautet wie folgt:
Funktion vergleiche (x, y) {
if (x <y) {
Return -1;
}
if (x> y) {
Rückkehr 1;
}
Rückkehr 0;
}
[3,1,4,1,5,9] .Sort (vergleiche); // [1,1,3,4,5,9]
Die Codekopie lautet wie folgt:
[3,1,4,1,5,9] .sort (Funktion (x, y) {
if (x <y) {
Return -1;
}
if (x> y) {
Rückkehr 1;
}
Rückkehr 0;
}); // [1,1,3,4,5,9]
Das obige Beispiel verwendet eine anonyme Funktion, um weiter zu vereinfachen.
Das Erlernen der Verwendung von Funktionen höherer Ordnung kann den Code häufig vereinfachen und mühsame Kesselplattencode beseitigen. Für die einfache Konvertierung von String -Arrays können wir eine Schleife verwenden, um sie so zu implementieren:
Die Codekopie lautet wie folgt:
var names = ["Fred", "Wilma", "Kieselsteine"];
var ober = [];
für (var i = 0, n = names.length; i <n; i ++) {
ober [i] = names [i] .touppercase ();
}
ober; // ["Fred", "Wilma", "Kieselsteine"];
Mit der praktischen Kartenmethode von Arrays können Sie Schleifen beseitigen und die Elemente nacheinander mit nur einer lokalen Funktion konvertieren.
Die Codekopie lautet wie folgt:
var names = ["Fred", "Wilma", "Kieselsteine"];
var ober = names.map (Funktion (Name) {
return name.touppercase ();
});
ober; // ["Fred", "Wilma", "Kieselsteine"];
Darüber hinaus möchten wir beispielsweise verschiedene Methoden erstellen, um unterschiedliche Zeichenfolgen mit gemeinsamer Implementierungslogik zu erstellen, und jede Schleife erstellt eine Zeichenfolge, indem die Berechnungsergebnisse jedes unabhängigen Teils verbunden werden.
Die Codekopie lautet wie folgt:
Funktion bulidstring (n, radback) {
var result = "";
für (var i = 0; i <n; i ++) {
Ergebnis += Rückruf (i);
}
Rückgabeergebnis;
}
var alphabet = bulidstring (26, function (i) {
return string.fromCharCode (aindex + i);
});
Alphabet; // "abcdefghijklMnopqrxtuvwxyz";
var digits = BuildString (10, Funktion (i) {return i;})
Ziffern; // "0123456789"
var random = buildString (9, function () {
random += string.fromcharcode (math.floor (math.random ()*26) +aindex
});
zufällig; // "yefjmcef" (zufällig)
Dadurch wird die Leser ein klareres Verständnis dafür vermitteln, was der Code ohne eingehende Implementierungsdetails tun kann.
Bemerkung
JavaScript gibt die Formel für Zufallszahlen (zwischen MNS) des angegebenen Bereichs zurück: math.random ()*(nm)+m
Achten Sie gleichzeitig auf die Anforderungen der Frage und der Frage, ob es erforderlich ist, eine positive Ganzzahl zurückzugeben.
2.3 Anrufmodus
Wenn Sie eine Funktion aufrufen, pausieren Sie die Ausführung der aktuellen Funktions- und Übergabekontrollrechte und -parameter in die neue Funktion. Zusätzlich zu den zum Zeitpunkt der Deklaration definierten formalen Parameter erhält jede Funktion zwei neue zusätzliche Parameter: dies und Argumente.
Dies ist ein sehr wichtiger Parameter, und sein Wert wird durch das Aufrufmuster bestimmt.
Hier sind 4 sehr wichtige Aufrufmuster in JavaScript:
A. Methodenaufrufmuster
B. Das Funktionsaufrufmuster
C. Das Konstruktor -Aufrufmuster
D. Anrufmuster anwenden Das Anwenden -Aufrufmuster anwenden
Es gibt Unterschiede darin, wie diese Muster die Schlüsselparameter initialisieren
1. Methodenaufrufmethode
Wenn eine Funktion eine Methode eines Objekts ist, nennen wir sie eine Methode. Wenn eine Methode aufgerufen wird, ist dies an das aufgerufene Objekt gebunden.
Die Codekopie lautet wie folgt:
var myobj = {
val: 0,
Inkrement: Funktion (Inc) {
this.val+= typeof inc === "Nummer"? Inc: 1;
},
get_val: function () {return this.val;}
}
myobj.increment (); // 1
myobj ["Inkrement"] (2); // 3
Zusammenfassung:
1. Die Methode, bei der der Kontext des Objekts, zu dem sie gehören, durch diese erhalten werden kann, wird als öffentliche Methode bezeichnet
2. Wenn Sie eine Funktion mit a verwenden. oder der Ausdruck des Indexs, es ist der Methodenaufrufmodus, und dieses Objekt ist an das vorherige Objekt gebunden.
3. Eine Funktion kann dies verwenden, um auf ein Objekt zuzugreifen, damit der Wert des Objekts abgerufen oder den Wert des Objekts geändert wird. Binden Sie dies an das Objekt, wenn aufgerufen wird.
2. Das Funktionsaufrufmuster
Wenn eine Funktion keine Eigenschaft eines Objekts ist, wird sie als Funktion aufgerufen. Wenn eine Funktion als Funktionsmuster aufgerufen wird, ist dies an das globale Objekt gebunden. Dies ist ein JavaScript -Designfehler und wird fortgesetzt.
Die Codekopie lautet wie folgt:
Funktion add (x, y) {
Rückgabe x+y;
}
myobj.double = function () {
var das = dies;
var helper = function () {
that.val = add (this.value, this.value);
// Der falsche Schreiben kann so sein, warum ist es falsch? Da die Funktion als interne Funktion bezeichnet wird, wurde dies an das falsche Objekt gebunden, und das globale Objekt hat keine VAL -Eigenschaft, sodass der falsche Wert zurückgegeben wird.
//this.val = this.val+this.val;
}
Helfer();
}
myobj.double (); // 6
3. Das Konstruktor -Aufrufmuster
JavaScript ist eine Sprache, die auf Prototyp -Vererben basiert, was bedeutet, dass Objekte Attribute direkt von anderen Objekten erben können und die Sprache klassenlos ist.
Wenn Sie eine Funktion mit neu aufrufen, erhalten Sie ein neues Objekt, das das mit der Funktion verbundene Prototyp -Mitglied verbirgt, und dies ist auch an das neue Objekt gebunden.
Das neue Präfix ändert auch das Verhalten der Return -Erklärung. Dies ist auch nicht die empfohlene Programmiermethode.
Die Codekopie lautet wie folgt:
var foo = Funktion (Status) {
this.status = Status;
}
Foo.prototype.get_status = function () {
kehre dies zurück.
}
// eine FOO -Instanz konstruieren
var myfoo = new foo ("bar");
myfoo.get_status (); // "Bar"
4. Anwenden Sie das Muster an, das Muster anwenden
Da JavaScript eine funktionale objektorientierte Sprache ist, können Funktionen Methoden haben.
Die Anwendenmethode hat zwei Parameter. Die erste besteht darin, den Wert daran zu binden, und das zweite ist das Parameter -Array. Das heißt, mit der Antragsmethode können wir ein Array erstellen und es verwenden, um die Funktion aufzurufen, sodass wir den Wert dieser auswählen und auch den Wert des Arrays auswählen können.
Die Codekopie lautet wie folgt:
var array = [3,4];
var sum = add.apply (null, array); // 7
var statusObj = {status: "abcdefg"};
Foo.prototype.pro_get_status = function (prefix) {
Präfix zurückgeben +"-" +this.status;
}
var status = foo.prototype.get_status.apply (statusObj); // "abcdefg"
var pro_status = foo.prototype.get_status.apply (StatusObj, ["Präfix"]); // "Präfix -abcdefg"
Typischerweise wird der Empfänger einer Funktion oder Methode (auf den Wert dieses speziellen Schlüsselworts gebunden) von der Syntax des Anrufers bestimmt. Insbesondere bindet die Methodenaufrufsyntax die Methode durch das Suchobjekt an diese Variable. Manchmal ist es jedoch erforderlich, Funktionen mit einem benutzerdefinierten Empfänger anzurufen. Zu diesem Zeitpunkt müssen Sie die Anrufmethode verwenden oder die Methode binden, um den Empfänger so anzupassen, dass die Methode aufgerufen wird
2.4 Methoden extrahieren mit der Definition von Empfängern mithilfe der Bind -Methode
Da sich die Methode nicht von den Attributen unterscheidet, deren Werte Funktionen sind, ist es auch einfach, die Methode des Objekts zu extrahieren und die Funktion als Rückruffunktion zu extrahieren und sie direkt an die Funktion höherer Ordnung zu übergeben.
Es ist aber auch leicht zu vergessen, die extrahierte Funktion an das extrahierte Objekt zu binden.
Die Codekopie lautet wie folgt:
var buffer = {
Einträge: [],
Hinzufügen: Funktion (s) {
this.entries.push (s);
}
}
var source = ["867", "-", "5309"];
Source.foreach (Butter.Add); // Fehler: Einträge sind undefiniert
Zu diesem Zeitpunkt ist der Empfänger von Butter.Add nicht das Butterobjekt. Der Empfänger der Funktion hängt davon ab, wie sie aufgerufen wird, und die Foreach -Methode wird im globalen Bereich aufgerufen, sodass die Implementierung der Foreach -Methode das globale Objekt als Standardempfänger verwendet. Da es im globalen Objekt kein Einträge zu Attribut gibt, wirft dieser Code einen Fehler aus.
Mit der foreach -Methode kann der Anrufer einen optionalen Parameter als Empfänger der Rückruffunktion angeben.
Die Codekopie lautet wie folgt:
var source = ["867", "-", "5309"];
Source.foreach (Butter.add, Butter);
Aber nicht alle Funktionen höherer Ordnung sind vorsichtig und nachdenklich, um den Benutzern den Empfänger von Rückruffunktionen zu bieten.
Es gibt zwei Lösungen:
1) Erstellen Sie eine explizite Puffer -Objektmethode, um die Kapselungsfunktion hinzuzufügen. Unabhängig davon, wie die Kapselungsfunktion aufgerufen wird, stellt sie immer sicher, dass ihre Parameter in das Zielarray gedrückt werden.
Die Codekopie lautet wie folgt:
var source = ["867", "-", "5309"];
Source.foreach (Funktion (s) {
Butter.add (s);
});
2) Die Bindungsmethode des Funktionsobjekts benötigt ein Empfängerobjekt und generiert eine Kapselungsfunktion, die die ursprüngliche Funktion mit der vom Empfängerobjekt aufgerufenen Methode aufruft.
Die Codekopie lautet wie folgt:
var source = ["867", "-", "5309"];
Source.foreach (Butter.add.bind (Puffer));
Bemerkung
Buffer.add.bind (Buffer) erstellt eine neue Funktion, anstatt die Funktion buffer.add zu modifizieren:
buffer.add === buffer.add.bind (buffer); //FALSCH
Das obige dreht sich alles um diesen Artikel, ich hoffe es gefällt euch.