Detaillierte Erläuterung der JavaScript-Funktionen_Javascript-Fähigkeiten

1. Funktionsdefinition

Funktionen enthalten eine Reihe von Anweisungen, die die grundlegenden Moduleinheiten von JavaScript sind und für die Wiederverwendung von Code, das Ausblenden von Informationen und kombinierte Aufrufe verwendet werden. Funktionen werden verwendet, um das Verhalten von Objekten festzulegen

2. Vier Aufrufmodi von Funktionen und deren Initialisierung

Der erste: Methodenaufrufmodus
Das folgende Beispiel beweist, dass bei Aufruf über den Methodenaufrufmodus diese an das Objekt gebunden ist, dem die Methode gehört. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

var person = {
Name: „defaultName“,
setName: Funktion(name){
This.name = name;
}
};
person.setName("zhangsan");
alarm(person.name);

Zweiter Typ: Funktionsaufrufmodus
Das folgende Beispiel beweist, dass dies bei Aufruf über den Funktionsaufrufmodus an das globale Objekt gebunden ist. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

var test = add(value1, value2);
var name = "defaultName";
var person = {
Name: „zhangsan“, // Name
persönlich definiert GetName: function(){
// Diese Methode kann das This der Testfunktion in das This-Objekt der Person
ändern         var that = this; // Lösung
                // name
definiert in getName         var name = "lisi";
         var test = function(){
//Greifen Sie dadurch persönlich auf die Objekte zu
// Dies zeigt auf das globale Objekt
                            // this.name = defaultName
                       // that.name = zhangsan
Alert([dieser.Name, dieser.Name]);
        };
          test(); // Funktionsaufrufmodus
}
}
person.getName();

Dritter Typ: Konstruktor-Aufrufmodus

Code kopieren Der Code lautet wie folgt:

//Definieren Sie einen Personenkonstruktor, der mit new
aufgerufen werden muss var Person = function(name){
This.name = name;
}
// Methode zu Person hinzufügen
Person.prototype.getName = function(){
Geben Sie diesen.Namen zurück;
};
//Erstelle ein Personenobjekt
var person = neue Person("zhangsan");
Alert(person.getName()); // Rufen Sie getName auf, um den Wert des Namensattributs im Personenobjekt abzurufen

Viertens: Anrufmodus anwenden

Code kopieren Der Code lautet wie folgt:

3. Der Unterschied zwischen bewerben und anrufen

Code kopieren Der Code lautet wie folgt:

// Definiere ein Objekt, einschließlich einer Add-Methode, die die Summe von a und b zurückgibt
var Person = {
'add' : function(a, b){
          return a b;
}
};
// Zeigt die Summe von a und b an
Funktion showInfo(a, b){
alarm(this.add(a, b));
}
// Ändern Sie diesen Punkt der showInfo-Methode durch die apply-Methode
//showInfo(1, 3); // Das Objekt unterstützt keine sekundären Objekte
showInfo.apply(Person, [1, 3]);
showInfo.call(Person, 1, 3);
// Wie aus dem Obigen ersichtlich ist, besteht der Unterschied zwischen apply und call darin, dass apply ein Array als Parameter der aufgerufenen Funktion akzeptiert,
// Und call erweitert alle Parameter der aufgerufenen Funktion in durch Kommas getrennter Form

4. Funktionsparameter (Argumente)
arguments ist kein Array, ähnelt aber einem Array. Zusätzlich zur Längeneigenschaft verfügen Argumente nicht über alle Eigenschaften und Methoden des Arrays. Verwenden Sie Argumente, um eine Akkumulationsfunktion zu implementieren.

Code kopieren Der Code lautet wie folgt:

Funktion sum(){
var total = 0;
for(var i=0; i          total = arguments[i];
}
Gesamtsumme zurückgeben;
}
alarm("sum: " sum(1, 3, 2, 4));

5. Funktionsrückgabewert (return)
Wenn eine Funktion aufgerufen wird, wird sie normalerweise von { bis } der Funktion ausgeführt. Wenn Sie die Ausführung der Funktion vorzeitig beenden möchten, können Sie die Return-Anweisung verwenden. Zu diesem Zeitpunkt werden alle Anweisungen, die auf die Return-Anweisung folgen, niemals ausgeführt. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

Funktionstest(){
alarm("first");
Zurück;
alarm("second"); // Diese Anweisung wird niemals ausgeführt
}
test();
// Eine Funktion gibt immer einen Wert zurück. Wenn der Rückgabewert nicht verwendet wird, wird standardmäßig undefiniert zurückgegeben. Zum Beispiel:
Funktionstest(){
alarm("first");
}
alarm(test()); // Ausgabe: undefiniert
// Wenn die Funktion mit einer neuen Methode aufgerufen wird und der Rückgabewert kein Objekt ist, geben Sie dieses (neues Objekt) zurück. Zum Beispiel:
Funktionstest(){
alarm("first");
}
var t = neuer Test();
alarm(typeof t); // Ausgabe: 'object'
Alert(t Instanz des Tests); // Ausgabe: true

6. Ausnahme

Anomalien sind ungewöhnliche (möglicherweise beabsichtigte) Unfälle, die den normalen Programmablauf beeinträchtigen. Wenn ein solcher Vorfall erkannt wird, sollte eine Ausnahme ausgelöst werden. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

function add(a, b){ // Definiere eine Additionsfunktion
// Wenn der übergebene Parameter nicht vom numerischen Typ ist, wird eine Ausnahmemeldung ausgegeben
If(typeof a != 'number' || typeof b != 'number'){
wirf {
             'name' : "typeError", // Das Attribut ist angepasst und der Name kann beliebig sein
              'message': „Die Add-Methode muss Zahlen als Parameter verwenden“
        };
}
Geben Sie a b;
zurück }
(function(){
//Mögliche Ausnahmen abfangen, die von der Add-Methode generiert werden
Versuchen Sie es{
         add(10, "");
} Catch(e){
​​​​ //Eine Try-Anweisung hat nur eine Catch-Anweisung. Wenn mehrere Ausnahmen behandelt werden sollen, werden sie durch das Namensattribut der Ausnahme unterschieden
​​​​ // Bestimmen Sie die Art der Ausnahme
If(e.name === "typeError"){
alarm(e.message);
}
}
})();

7. Methoden zu Typen hinzufügen
JavaScript ermöglicht das Hinzufügen von Methoden zu Basistypen. Zum Beispiel: Boolescher Wert, Zeichenfolge, Zahl
Beispiel: Fügen Sie eine Methodenfunktion zu Function hinzu, die andere benutzerdefinierte Funktionen zu Function hinzufügt (vermeiden Sie die Verwendung von Prototypen), und verwenden Sie dann die Methodenfunktion, um eine Add-Funktion zu Function hinzuzufügen, und testen Sie schließlich, ob die Add-Funktion in Function vorhanden ist. Diese Methode fügt die Funktion func zu Function hinzu und benennt sie mit name. Geben Sie dann das Funktionsobjekt

zurück

Code kopieren Der Code lautet wie folgt:

Function.prototype.method = function(name, func){
// Vermeiden Sie das Überschreiben vorhandener Methoden
If(!this.prototype[name]){
This.prototype[name] = func;
}
Geben Sie dies zurück;
};
//Hinzufügen einer Additionsfunktion zu Function über die Function.method-Methode. Der Name der Funktion ist „add“
Function.method("add", function(a, b){
If(typeof a != 'number' || typeof b != 'number'){
wirf {
            'name': "typeError",
            'message': „Die Add-Methode muss eine Zahl übergeben“
        };
}
Geben Sie a b;
zurück });
// Rufen Sie die Add-Methode von Function auf, um zu sehen, ob sie existiert
(function(){
Versuchen Sie es{
alarm(Function.add(1, 3)); // Ausgabe: 4
} Catch(e){
If(e.name === 'typeError'){
alarm(e.message);
}
}
})();
//Leerzeichen an beiden Enden der Zeichenfolge entfernen
String.method("trim", function(){
Geben Sie this.replace(/^s |s $/g, '');
zurück });
alarm('|' " hello world ".trim() '|'); // Ausgabe: '|hello world|'
//Zahlenrundungsfunktion hinzufügen
Number.method("integer", function(){
// Sie können Funktionen auf diese Weise aufrufen, wie zum Beispiel: Math.random() == Math['random']() == Math["random"]()
Return Math[this < 0 ? 'ceil' : 'floor'](this);
});
alarm((-10 / 3).integer()); // Ausgabe: -3

8. Rekursiver Aufruf (arguments.callee)
Rekursiver Aufruf bedeutet, sich selbst anzurufen. Aufrufe werden unterteilt in: direkte Aufrufe und indirekte Aufrufe. Im Folgenden wird die Verwendung rekursiver Aufrufe zur Berechnung der Fibonacci-Folge des angegebenen Werts gezeigt.

Code kopieren Der Code lautet wie folgt:

// Finden Sie die Fakultät von i
Funktion Fakultät(i){
If(i < 2){
Rückgabe 1;
}
Return i*factorial(i-1); // Rekursiver Aufruf
}
warning(factorial(5)); // Finden Sie die Fakultät von 5
// Gibt es ein Problem mit der oben genannten Methode? Wie folgt:
var faktoriell = Funktion(i){
If(i < 2){
Rückgabe 1;
}
Return i*factorial(i-1); // Kann Factorial noch aufgerufen werden? Kann nicht
}
var test = faktoriell;
Fakultät = null;
alarm(test(2));
// Lösung:
var faktoriell = Funktion(i){
If(i < 2){
Rückgabe 1;
}
Return i*arguments.callee(i-1); // arguments.callee gibt das ausgeführte Funktionsobjekt zurück, das den Hauptteil des angegebenen Funktionsobjekts
darstellt }
var test = faktoriell;
Fakultät = null;
alarm(test(5));

9. Geltungsbereich

Code kopieren Der Code lautet wie folgt:

// In einem Programm steuert der Bereich die Sichtbarkeit und den Lebenszyklus von Variablen.
var name = "default"; // Globaler Geltungsbereich
Funktion getName(){
var name = "getName"; // getName-Bereich
for(var i=0; i<2; i ){
          var inName = "inName";
}
warning(i "," inName); // 2, inName Hinweis: In js gibt es keinen Gültigkeitsbereich auf Blockebene, und in if, for, while deklarierte Variablen werden im Gültigkeitsbereich des Blocks
platziert Name zurückgeben;
}
warning(getName()); // getName Hinweis: js hat einen Funktionsumfang, daher sind innerhalb der Funktion definierte Variablen außerhalb von
nicht sichtbar Alert(Name); // Standard

Hinweis: In vielen modernen Sprachen wird empfohlen, die Deklaration von Variablen so weit wie möglich zu verzögern. Zum Beispiel: Java, aber in JS wird dies nicht empfohlen, da JS den Bereich auf Blockebene nicht unterstützt. Es wird empfohlen, alle verwendeten Variablen zu Beginn der Funktion zu deklarieren.

10. Schließung
Der Kontext, in dem eine Funktion bei ihrer Erstellung Zugriff auf die Umgebung hat, wird als Abschluss bezeichnet. Der Vorteil des Gültigkeitsbereichs besteht darin, dass die innere Funktion auf alle Variablen der äußeren Funktion zugreifen kann (außer dieser und den Argumenten).

Code kopieren Der Code lautet wie folgt:

var myObject = {
Wert: 0,
Inkrement: Funktion(inc){
This.value = typeof inc === 'number' ? inc : 1;
},
GetValue: function(){
         return this.value;
}
};
myObject.increment(10);
alarm(myObject.value);
alarm(myObject.getValue());
// Das Obige definiert ein myObject-Objekt mithilfe von Literalkonstanten. Auf die Wertvariable kann jedoch von externen Objekten
zugegriffen werden var myObject = function(){
var-Wert = 0;
Geben Sie {
zurück Inkrement: Funktion(inc){
value = typeof inc === 'number' ? inc : 1;
},
         getValue: function(){
             Rückgabewert;
}
};
}();
myObject.increment(10);
warning(myObject.value); // Externe Objekte können nicht darauf zugreifen
alarm(myObject.getValue()); // 10
// Hintergrundfarbe des Verlaufskörpers (gelb bis weiß)
var fade = function(node){
var level = 1;
var step = function(){
        var hex = level.toString(16);
           node.style.backgroundColor = '#FFFF' hex hex;
If(level < 15){
Stufe = 1;
                setTimeout(step, 500); // Wenn Level kleiner als 15 ist, ruft sich die interne Funktion selbst auf
}
};
setTimeout(step, 1); // Interne Funktion aufrufen
};
fade(document.body);
// Hier ist ein wirklich schlechtes Beispiel
Klicken Sie auf mich...
// Beim Anklicken 3 anzeigen
Klicken Sie auf mich...
// Beim Anklicken 3 anzeigen
Klicken Sie auf mich...
// Beim Anklicken 3 anzeigen
var add_the_handlers = function(nodes){
var i;
for(i = 0; i < nodes.length; i = 1) {
Nodes[i].onclick = function(e){ // Funktionskonstruktion: i
alarm(i);
        };
}
};
var objs = document.getElementsByName("test");
add_the_handlers(objs);
//Der Grund dafür ist, dass die Ereignisfunktion des a-Tags an die Variable i gebunden ist, die nicht der i-Wert ist, als die Funktion erstellt wurde.
// Die Lösung lautet wie folgt:
var add_the_handlers = function(nodes){
var i;
for(i = 0; i < nodes.length; i = 1) {
nodes[i].onclick = function(i){
              Rückgabefunktion(e){
                       warning(i); // Die i-Ausgabe ist das vom Konstruktor übergebene i, nicht das an die Ereignisverarbeitung gebundene i.
            };
         }(i);
}
};
var objs = document.getElementsByName("test");
add_the_handlers(objs);

11. Rückrufe

Code kopieren Der Code lautet wie folgt:

// Daten stellen Parameter dar und call_function stellt die Rückruffunktion
dar Funktion sendRequest(data, call_function){
// setTimeout, um die Zeit zu simulieren, die der Client benötigt, um die Übertragung von Daten vom Server anzufordern.
// Rufen Sie die Rückruffunktion nach 3 Sekunden auf (es gibt einen Client, der die Rückruffunktion implementiert)
setTimeout(function(){
          call_function(data); // Callback-Funktion aufrufen
}, 3000);
}
//SendRequest-Funktion testen
sendRequest("parameter", function(context){
alarm("context=" context);
});

12. Modul
Ein Modul ist eine Funktion oder ein Objekt, das eine Schnittstelle bereitstellt, aber Status und Implementierung verbirgt.
Allgemeine Form: Eine Funktion, die private Variablen und Funktionen definiert; verwendet Schließungen, um privilegierte Funktionen zu erstellen, die auf private Variablen und Funktionen zugreifen können, und gibt diese privilegierten Funktionen schließlich zurück oder speichert sie an einem Ort, an dem auf sie zugegriffen werden kann.

Code kopieren Der Code lautet wie folgt:

Function.prototype.method = function(name,func){
This.prototype[name] = func;
Geben Sie dies zurück;
};
String.method("deentityify",function(){
var-Entität = {
         quot: '"',
                                                                                                   gt : '>'
};
Rückgabefunktion(){
             return this.replace(/&([^&;] );/g, function(a, b){ // Wie man die Werte von a und b kennt, reguläre Ausdrücke versteht
          var r = entity[b];
                return typeof r === "string" ? r : a;
        });
};
}());
alarm("<">".deentityify()); // Test: <">

Hinweis: Der Modulmodus wird normalerweise in Kombination mit dem Singleton-Modus von JavaScript verwendet. Der Attributwert des Objekts kann ein numerischer Wert oder eine Funktion sein und der Attributwert ändert sich während des Lebenszyklus des Objekts nicht.

13. Kaskade (Kettenbetrieb) Bei einigen Methoden, die keinen Wert zurückgeben, geben wir diesen anstelle von undefiniert zurück. Anschließend können wir mit der Kaskadierung (Verkettung) beginnen, um das Objekt zu bedienen. Wie folgt:

Code kopieren Der Code lautet wie folgt:

var $ = function(id){
    var obj = document.getElementById(id);
    obj.setColor = function(color){
        this.style.color = Farbe;
        gib dies zurück;
    };
    obj.setBgColor = function(color){
        this.style.backgroundColor = color;
        gib dies zurück; // 返回this对象，启动级联
    };
    obj.setFontSize = function(size){
        this.style.fontSize = size;
        gib dies zurück;
    };
    return obj;
};
$("test").setColor("red")
         .setFontSize("30px")
         .setBgColor("blue");
// 改进后的代码：
(Funktion(id){
    var _$ = function(id){
        this.element = document.getElementById(id);
    };
    _$.prototype = {
        setColor: Funktion(Farbe){
            this.element.style.color = color;
            gib dies zurück;
        },
        setBgColor: Funktion(Farbe){
            this.element.style.backgroundColor = color;
            gib dies zurück;
        },
        setFontSize: Funktion(Größe){
            this.element.style.fontSize = size;
            gib dies zurück;
        }
    };
    
    // 添加到window原型链中
    window.$ = function(id){
        gib neues _$(id);
zurück     };
})();
$("test").setColor("red")
         .setFontSize("30px")
         .setBgColor("blue");

14、套用
    所谓套用就是将函数与传递给它的参数相结合,产生一个新的函数.如:下面代码中定义一个add()函数,该函数能够返回一个新的函数,并把参数值传递给这个新函数，从而实现连加操作.

复制代码 代码如下:

// Première façon :
var ajouter = fonction(a){
Fonction de retour (b){
          retourner un b ;
>
};
alerte(ajouter(1)(2)); // 3
// La deuxième façon : utiliser des arguments pour implémenter
var ajouter = fonction(){
var arg = arguments;
Fonction de retour(){
      var somme = 0;
pour(var i=0; i             sum = arg[i];
>
pour(i=0; i              somme = arguments[i];
>
        renvoyer la somme ;
>
};
alerte(ajouter(1,2,3)(4,5,6)); // 21
// La troisième voie : implémenter
via une méthode d'application (curry) var ajouter = fonction(){
var somme = 0;
pour(var i=0; i         somme = arguments[i];
>
Somme de retour ;
};
//Ajouter une méthode à la chaîne de prototypes de Function
Function.prototype.method = function(nom, func){
This.prototype[nom] = func;
Renvoyez ceci ;
};
//Appliquer la méthode
Function.method('curry', function(){
// Grâce à la méthode slice du tableau Array, les arguments ont également la méthode concat
var tranche = Array.prototype.slice,
        args = slice.apply(arguments), that = this ;
Fonction de retour(){
          return that.apply(null, args.concat(slice.apply(arguments)));
};
});
alerte(add.curry(1,2)(3,4)); // 10

15. Mémoire
Les fonctions peuvent utiliser des objets pour mémoriser les résultats des opérations précédentes, évitant ainsi les opérations inutiles. Cette optimisation s'appelle la mémorisation.

Copier le code Le code est le suivant :

var fibonacci = fonction(){
var mome = [0,1]; // Stocke les données calculées
var fib = fonction(n){
         var résultat = mome[n];
              // S'il n'y a pas de données calculées, calculez-les directement. Puis cachez les résultats du calcul
Si(type de résultat !== 'numéro'){
résultat = fib(n-1) fib(n-2);
              mome[n] = résultat ;
>
        renvoyer le résultat ;
};
Retourner fib ;
}();
pour(var je=0; je<=10; je ){
​ document.writeln("// " i ": " fibonacci(i) "
");
>
//==========================
//Créer une fonction avec mémoire
//==========================
var memoizer = function(mémo, fondamental){
var shell = fonction(n){
         var result = memo[n];
Si(type de résultat !== "numéro"){
résultat = fondamental(shell, n);
              memo[n] = résultat ;
>
        renvoyer le résultat ;
};
Coque de retour ;
};
//Complétez la séquence de Fibonacci via la fonction mémoire memoizer
var fibonacci = memoizer([0,1], fonction(shell, n){
Retour shell(n-1) shell(n-2);
});
// Factorielle complète via la fonction mémoire memoizer
var factorielle = memoizer([1,1], function(shell, n){
Renvoie n * shell(n-1);
});
pour(var je=0; je<=15; je ){
​ document.writeln("// " i ": " factorial(i) "
");
>

Vous l'avez compris, les amis ? C'est très pratique. S'il manque quelque chose, demandez conseil aux experts et nous pourrons progresser ensemble