So schreiben Sie hochwertigen JS-Code (Fortsetzung)_Javascript-Kenntnisse

In Fortsetzung des vorherigen Artikels „So schreiben Sie hochwertigen JS-Code“ werde ich dieses Mal die Wissenspunkte von Javascript-Funktionen klären.

2. Verwenden Sie die Funktion

Funktionen bieten Programmierern die wichtigsten abstrakten Funktionen und Implementierungsmechanismen. Funktionen können unabhängig voneinander verschiedene Funktionen in anderen Sprachen implementieren, z. B. Prozeduren, Methoden, Konstruktoren und sogar Klassen oder Module.

2.1 Verstehen Sie die Unterschiede zwischen Funktionsaufrufen, Methodenaufrufen und Konstruktoraufrufen

Für die objektorientierte Programmierung sind Funktionen, Methoden und Klassenkonstruktoren drei verschiedene Konzepte.

Nutzungsmodus:

1, Funktionsaufruf

Code kopieren Der Code lautet wie folgt:

Funktion hallo(Benutzername){
„Hallo“-Benutzernamen zurückgeben;
}

2, Methodenaufruf

Code kopieren Der Code lautet wie folgt:

var obj = {
Hallo: function(){
          return „Hallo,“ this.username;
},
Benutzername: „floraLam“
};
ohj.hello();//"Hallo, floraLam"

Diese Variable ist an das Objekt gebunden, da die Hello-Methode im obj-Objekt definiert ist. Wir können dieselbe Funktionsreferenz auch einem anderen Objekt zuweisen und dieselbe Antwort erhalten.

Code kopieren Der Code lautet wie folgt:

var obj2 = {
Hallo: obj.hello(),
Benutzername: „floraLam“
};

3, der Konstruktor verwendet

Code kopieren Der Code lautet wie folgt:

Funktion Benutzer(Name,PasswortHash){
This.name = name;
This.passwordHash = passwordHash;
}

Die Verwendung des neuen Operators zum Aufrufen des Benutzers wird als Konstruktor betrachtet.

Code kopieren Der Code lautet wie folgt:

var u = neuer Benutzer("floraLam","123");

Anders als Funktionsaufrufe und Methodenaufrufe verwenden Konstruktoraufrufe ein brandneues Objekt als Wert dieser Variablen und geben dieses neue Objekt implizit als Aufrufergebnis zurück. Die Hauptaufgabe des Konstruktors besteht darin, dieses neue Objekt zu initialisieren.

2.2 Beherrscht Funktionen höherer Ordnung

Funktionen höherer Ordnung sind nichts anderes als solche Funktionen, die eine Funktion als Parameter annehmen oder einen Wert zurückgeben (oft als Callback-Funktion bezeichnet, weil die Funktion höherer Ordnung sie „dann aufruft“) Eine besonders kraftvolle und ausdrucksstarke Art und Weise. Redewendungen werden auch häufig in JS-Programmen verwendet.

Betrachten Sie die Standard-Sortiermethode für Arrays. Damit sie für alle Arrays funktioniert, muss der Aufrufer entscheiden, wie zwei beliebige Elemente im Array verglichen werden sollen.

Code kopieren Der Code lautet wie folgt:

Funktion vergleichenNumber(x,y){
If(x < y){
         return -1;
}
If(x > y){
Rückgabe 1;
}
Rückgabe 0;
}
[3,1,4,1,5,9].sort(compareNumbers);//[1,1,3,4,5,9]

Code kopieren Der Code lautet wie folgt:

[3,1,4,1,5,9].sort(function(x,y){
If(x < y){
         return -1;
}
If(x > y){
Rückgabe 1;
}
Rückgabe 0;
});//[1,1,3,4,5,9]

Das obige Beispiel wird durch die Verwendung einer anonymen Funktion weiter vereinfacht.

Das Erlernen der Verwendung von Funktionen höherer Ordnung vereinfacht oft den Code und eliminiert langwierigen Standardcode. Wir können eine Schleife verwenden, um eine einfache Konvertierung eines String-Arrays zu implementieren:

Code kopieren Der Code lautet wie folgt:

var name = ["Fred", "Wilma", "Pebbles"];
var Upper = [];
for(var i = 0,n = name.length ;i< n;i ){
Upper[i] = Namen[i].toUpperCase();
}
Upper;//["FRED", "WILMA", "PEBBLES"];

Durch die Verwendung der praktischen Kartenmethode des Arrays können Schleifen vermieden werden und nur eine lokale Funktion verwendet werden, um Elemente einzeln zu konvertieren.

Code kopieren Der Code lautet wie folgt:

var name = ["Fred", "Wilma", "Pebbles"];
var Upper = Namen.map(Funktion(Name){
Geben Sie name.toUpperCase();
zurück });
Upper;//["FRED", "WILMA", "PEBBLES"];

Darüber hinaus möchten wir beispielsweise mehrere Methoden zum Erstellen unterschiedlicher Zeichenfolgen mit gemeinsamer Implementierungslogik erstellen, und jede Schleife erstellt eine Zeichenfolge, indem die Berechnungsergebnisse jedes unabhängigen Teils verkettet werden.

Code kopieren Der Code lautet wie folgt:

Funktion bulidString(n,callback){
var result = "";
for(var i = 0 ; i < n ;i ){
          result = callback(i);
}
Ergebnis zurückgeben;
}
var alphabet = bulidString(26,function(i){
Rückgabe String.fromCharCode(aIndex i);
});
alphabet;//"abcdefghijklmnopqrxtuvwxyz";
var digits = buildString(10,function(i){ return i;})
Ziffern;//"0123456789"
var random = buildString(9,function(){
Random = String.fromCharCode(Math.floor(Math.random()*26) aIndex
});
random;//"yefjmcef"(random)

Dies ermöglicht es den Lesern, ein klareres Verständnis davon zu bekommen, was der Code leisten kann, ohne auf Implementierungsdetails eingehen zu müssen.

Bemerkungen

Javascript gibt die Formel für eine Zufallszahl im angegebenen Bereich (zwischen m-n) zurück: Math.random()*(n-m) m

Achten Sie gleichzeitig auf die Anforderungen der Frage und darauf, ob die Rückgabe einer positiven Ganzzahl erforderlich ist

2.3 Anrufmodus

Durch den Aufruf einer Funktion wird die Ausführung der aktuellen Funktion angehalten und die Steuerung und Parameter an die neue Funktion übergeben. Zusätzlich zu den bei der Deklaration definierten formalen Parametern erhält jede Funktion zwei neue zusätzliche Parameter: this und arguments.

Dies ist ein sehr wichtiger Parameter, dessen Wert vom Aufrufmodus bestimmt wird.

Im Folgenden sind 4 wichtige Aufrufmuster in JavaScript aufgeführt:

a. das Methodenaufrufmuster
b. das Funktionsaufrufmuster
c. das Konstruktor-Aufrufmuster
d. Wenden Sie das Apply-Aufrufmuster an

Diese Modi unterscheiden sich darin, wie der Schlüsselparameter this initialisiert wird

1. Die Methodenaufrufmethode

Wenn eine Funktion als Methode eines Objekts dient, nennen wir die Funktion eine Methode. Beim Aufruf einer Methode wird diese an das aufrufende Objekt gebunden.

Code kopieren Der Code lautet wie folgt:

var myObj={
val:0,
inkrementieren:funktion(inc){
This.val =typeof inc ==="number"? inc:1;
},
Get_val:function(){return this.val;}
}
myObj.increment();// 1
myObj["increment"](2);//3

Zusammenfassung:

1. Methoden, die dadurch den Kontext der Objekte erhalten können, zu denen sie gehören, werden öffentliche Methoden genannt

2. Wenn Sie eine Funktion mit . oder einem tiefgestellten Ausdruck verwenden, handelt es sich um den Methodenaufrufmodus, und dieses Objekt ist an das vorherige Objekt gebunden.

3. Eine Funktion kann damit auf das Objekt zugreifen, sodass sie den Wert des Objekts abrufen oder den Wert des Objekts ändern kann. Die Bindung an das Objekt erfolgt zum Zeitpunkt des Aufrufs.

2. das Funktionsaufrufmuster

Wenn eine Funktion keine Eigenschaft eines Objekts ist, wird sie als Funktion aufgerufen. Wenn eine Funktion als Funktionsaufrufmodus aufgerufen wird, ist diese an das globale Objekt gebunden. Dies war ein Designfehler in JavaScript, der weiterhin besteht.

Code kopieren Der Code lautet wie folgt:

Funktion add(x,y){
Rückkehr x y;
}
myObj.double=function(){
var that=this;
var helper=function(){
That.val=add(that.value,that.value);
// Die falsche Schreibweise könnte so sein, warum ist sie falsch? Denn wenn die Funktion als interne Funktion aufgerufen wird, wurde diese an das falsche Objekt gebunden und das globale Objekt hat kein val-Attribut, sodass ein falscher Wert zurückgegeben wird.
​​​​ //this.val = this.val this.val;
}
​helper();
}
myObj.double();//6 

3. das Konstruktor-Aufrufmuster

JavaScript ist eine Sprache, die auf prototypischer Vererbung basiert, was bedeutet, dass Objekte Eigenschaften direkt von anderen Objekten erben können und die Sprache klassenlos ist.

Wenn Sie eine Funktion mit new davor aufrufen, erhalten Sie ein neues Objekt, das das mit der Funktion verbundene Prototyp-Mitglied verbirgt, und dieses wird auch an das neue Objekt gebunden.

Das neue Präfix ändert auch das Verhalten der Return-Anweisung. Dies ist auch keine empfohlene Art der Programmierung.

Code kopieren Der Code lautet wie folgt:

var Foo = function(status){
This.status = status;
}
Foo.prototype.get_status = function(){
Geben Sie this.status zurück;
}
//Erstelle eine Foo-Instanz
var myFoo = new Foo("bar");
myFoo.get_status();//"bar"

4. Wenden Sie das Apply-Aufrufmuster an

Da JavaScript eine funktionale objektorientierte Sprache ist, können Funktionen Methoden haben.

Die Apply-Methode hat zwei Parameter, der erste ist der Wert, der daran gebunden wird, und der zweite ist das Parameter-Array. Mit anderen Worten, die Apply-Methode ermöglicht es uns, ein Array zu erstellen und es zum Aufrufen der Funktion zu verwenden , wodurch wir diesen Wert auswählen können. Mit dem Wert können wir auch den Wert des Arrays auswählen.

Code kopieren Der Code 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){
Rückgabepräfix „-“ this.status;
}
var status = Foo.prototype.get_status.apply(statusObj);// "ABCDEFG"
var pro_status = Foo.prototype.get_status.apply(statusObj,["prefix"]);// "prefix -ABCDEFG"

Normalerweise wird der Empfänger einer Funktion oder Methode (der an das spezielle Schlüsselwort this gebundene Wert) durch die Syntax des Aufrufers bestimmt. Insbesondere bindet die Methodenaufrufsyntax das Methodenobjekt an diese Variable. Manchmal ist es jedoch erforderlich, einen benutzerdefinierten Empfänger zum Aufrufen einer Funktion zu verwenden. Zu diesem Zeitpunkt müssen Sie die Aufrufmethode oder die Bindungsmethode verwenden, um den Empfänger so anzupassen, dass er die Methode

aufruft

2.4 Verwenden Sie die Bind-Methode, um Methoden mit bestimmten Empfängern zu extrahieren

Da es keinen Unterschied zwischen Methoden und Eigenschaften gibt, deren Wert eine Funktion ist, ist es auch einfach, die Methode des Objekts zu extrahieren und die Funktion als Rückruffunktion zu extrahieren und direkt an die Funktion höherer Ordnung zu übergeben.

Man vergisst aber auch leicht, den Empfänger der extrahierten Funktion an das Objekt zu binden, aus dem die Funktion extrahiert wurde.

Code kopieren Der Code lautet wie folgt:

var buffer = {
Einträge: [],
       :function(s){
hinzufügen This.entries.push(s);
}  
}
var source = ["867","-","5309"];
source.forEach(butter.add);//error:entries ist 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. Die forEach-Methode wird im globalen Bereich aufgerufen, daher verwendet die Implementierung der forEach-Methode das globale Objekt als Standardempfänger. Da es im globalen Objekt kein Einträge-Attribut gibt Code löst einen Fehler aus.

Die forEach-Methode ermöglicht es dem Aufrufer, einen optionalen Parameter als Empfänger der Rückruffunktion bereitzustellen.

Code kopieren Der Code lautet wie folgt:

var source = ["867","-","5309"];
source.forEach(butter.add,butter);

Aber nicht alle Funktionen höherer Ordnung sind durchdacht genug, um Benutzern Rückruffunktionsempfänger bereitzustellen.

Es gibt zwei Lösungen:

1) Erstellen Sie eine Wrapper-Funktion, die add explizit über eine Pufferobjektmethode aufruft. Unabhängig davon, wie die umschlossene Funktion aufgerufen wird, wird immer garantiert, dass sie ihre Parameter in das Zielarray schiebt.

Code kopieren Der Code lautet wie folgt:

var source = ["867","-","5309"];
source.forEach(function(s){
Butter.add(s);
});

2) Die Bindungsmethode des Funktionsobjekts erfordert ein Empfängerobjekt und generiert eine Wrapper-Funktion, die die ursprüngliche Funktion mithilfe des Methodenaufrufs des Empfängerobjekts aufruft.

Code kopieren Der Code lautet wie folgt:

var source = ["867","-","5309"];
source.forEach(butter.add.bind(buffer));

Bemerkungen

buffer.add.bind(buffer) erstellt eine neue Funktion, anstatt die buffer.add-Funktion zu ändern:

buffer.add === buffer.add.bind(buffer); //false

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.