Explication détaillée des compétences JavaScript function_javascript

1. Définition de la fonction

Les fonctions contiennent un ensemble d'instructions, qui sont les unités de module de base de JavaScript et sont utilisées pour la réutilisation du code, la dissimulation d'informations et les appels combinés. Les fonctions sont utilisées pour spécifier le comportement des objets

Quatre modes d'appel de fonctions et initialisation de celle-ci

Le premier : le mode d'appel de méthode
L'exemple suivant prouve que lorsqu'il est appelé via le mode d'appel de méthode, this est lié à l'objet qui possède la méthode. Tel que :

Copier le code Le code est le suivant :

var personne = {
nom : "nom par défaut",
setName : fonction(nom){
This.name = nom;
>
};
personne.setName("zhangsan");
alert(person.name);

Deuxième type : Mode d'appel de fonction
L'exemple suivant prouve que lorsqu'il est appelé via le mode d'appel de fonction, this est lié à l'objet global. Tel que :

Copier le code Le code est le suivant :

var test = ajouter(valeur1, valeur2);
var nom = "nom par défaut";
var personne = {
nom : "zhangsan", // nom
défini en personne GetName : function(){
// Cette méthode peut changer le this de la fonction de test en this objet de personne
        var that = this ; // Solution
                // nom
défini dans getName         var nom = "lisi";
         var test = fonction(){
//Accédez aux objets en personne grâce à cela
// cela pointe vers l'objet Global
                            // this.name = defaultName
                       // that.name = zhangsan
alert([ce.nom, ce.nom]);
        };
          test(); // Mode d'appel de fonction
>
>
personne.getName();

Troisième type : Mode d'appel du constructeur

Copier le code Le code est le suivant :

//Définissez un constructeur Person, qui doit être appelé avec new
var Personne = fonction(nom){
This.name = nom;
>
// Ajouter une méthode à Person
Personne.prototype.getName = function(){
Renvoie this.name;
};
//Construire un objet Personne
var personne = nouvelle Personne("zhangsan");
alert(person.getName()); // Appelez getName pour obtenir la valeur de l'attribut name dans l'objet personne

Quatrième : Appliquer le mode d'appel

Copier le code Le code est le suivant :

3. La différence entre postuler et appeler

Copier le code Le code est le suivant :

// Définit un objet, incluant une méthode add, renvoyant la somme de a et b
var Personne = {
'ajouter' : function(a, b){
          retourner un b ;
>
};
// Affiche la somme de a et b
fonction showInfo(a, b){
alert(this.add(a, b));
>
// Modifiez ce point de la méthode showInfo via la méthode apply
//showInfo(1, 3); // L'objet ne prend pas en charge les objets secondaires
showInfo.apply(Personne, [1, 3]);
showInfo.call(Personne, 1, 3);
// Comme le montre ce qui précède, la différence entre apply et call est que apply accepte un tableau comme paramètre de la fonction appelée,
// Et l'appel développe tous les paramètres de la fonction appelée sous forme séparée par des virgules

4. Paramètres de fonction (arguments)
arguments n'est pas un tableau, mais similaire à un tableau. En plus d'avoir la propriété length, arguments n'a pas toutes les propriétés et méthodes du tableau. Utilisez des arguments pour implémenter une fonction cumulative.

Copier le code Le code est le suivant :

fonction somme(){
var total = 0;
for(var i=0; i          total = arguments[i];
>
Retour total ;
>
alert("somme : " somme(1, 3, 2, 4));

5. Valeur de retour de la fonction (retour)
Lorsqu'une fonction est appelée, elle est généralement exécutée du { au } de la fonction. Si vous souhaitez terminer l'exécution de la fonction plus tôt, vous pouvez utiliser l'instruction return. À ce stade, toutes les instructions suivant l'instruction return ne seront jamais exécutées. Tel que :

Copier le code Le code est le suivant :

fonction test(){
alert("premier");
Retour ;
alert("second"); // Cette instruction ne sera jamais exécutée
>
test();
// Une fonction renvoie toujours une valeur. Si la valeur de retour n'est pas utilisée, undefined est renvoyé par défaut. Tel que :
fonction test(){
alert("premier");
>
alert(test()); // Sortie : non défini
// Si la fonction est appelée à l'aide d'une nouvelle méthode et que la valeur de retour n'est pas un objet, renvoyez ceci (nouvel objet). Tel que :
fonction test(){
alert("premier");
>
var t = nouveau test();
alert(typeof t); // Sortie : 'objet'
alert(t instanceof test); // Sortie : true

6. Exception

Les anomalies sont des accidents anormaux (peut-être intentionnels) qui interfèrent avec le déroulement normal du programme. Lorsqu'un tel incident est détecté, une exception doit être levée. Tel que :

Copier le code Le code est le suivant :

function add(a, b){ // Définir une fonction d'addition
// Si le paramètre passé n'est pas de type numérique, un message d'exception est renvoyé
If(typeof a != 'number' || typeof b != 'number'){
lancer {
             'name' : "typeError", // L'attribut est personnalisé et le nom peut être n'importe quoi
              'message' : "La méthode d'ajout doit utiliser des nombres comme paramètres"
        };
>
Renvoyer un b ;
>
(fonction(){
//Attrapez les exceptions possibles générées par la méthode add
Essayez{
         add(10, "");
} attraper(e){
​​​​ //Une instruction try n'a qu'une seule instruction catch. Si plusieurs exceptions doivent être gérées, elles se distinguent par l'attribut name de l'exception
​​​​ // Déterminer le type d'exception
Si(e.name === "typeError"){
alerte(e.message);
>
>
})();

7. Ajouter des méthodes aux types
JavaScript permet d'ajouter des méthodes aux types de base. Tels que : booléen, chaîne, Nombre
Exemple : ajoutez une fonction de méthode à Function, qui ajoute d'autres fonctions personnalisées à Function (évitez d'utiliser un prototype), puis utilisez la fonction de méthode pour ajouter une fonction d'ajout à Function, et enfin testez que la fonction d'ajout existe dans Function. Cette méthode ajoute la fonction func à Function et la nomme avec name. Ensuite, renvoyez l'objet Function

Copier le code Le code est le suivant :

Function.prototype.method = function(nom, func){
// Évitez d'écraser les méthodes existantes
Si(!this.prototype[nom]){
This.prototype[nom] = func;
>
Renvoyez ceci ;
};
//Ajoutez une fonction d'addition à Function via la méthode Function.method Le nom de la fonction est "add"
. Function.method("ajouter", function(a, b){
If(typeof a != 'number' || typeof b != 'number'){
lancer {
            'nom' : "typeError",
            'message' : "La méthode add doit transmettre un nombre"
        };
>
Renvoyer un b ;
});
// Appelez la méthode add de Function pour voir si elle existe
(fonction(){
Essayez{
alert(Function.add(1, 3)); // Sortie : 4
} attraper(e){
Si(e.name === 'typeError'){
alerte(e.message);
>
>
})();
//Supprimer les espaces aux deux extrémités de la chaîne
String.method("trim", function(){
Renvoie this.replace(/^s |s $/g, '');
});
alert('|' " bonjour le monde ".trim() '|'); // Sortie : '|bonjour le monde |'
//Ajouter une fonction d'arrondi des nombres
Number.method("integer", function(){
// Vous pouvez appeler des fonctions de cette manière, comme : Math.random() == Math['random']() == Math["random"]()
Retour Math[this < 0 ? 'ceil' : 'floor'](this);
});
alert((-10 / 3).integer()); // Sortie : -3

8. Appel récursif (arguments.callee)
L'appel récursif signifie s'appeler soi-même. Les appels sont divisés en : appels directs et appels indirects. Ce qui suit montre l'utilisation d'appels récursifs pour calculer la séquence de Fibonacci de la valeur spécifiée.

Copier le code Le code est le suivant :

// Trouver la factorielle de i
fonction factorielle(i){
Si (je < 2) {
Retour 1 ;
>
Return i*factorial(i-1); // Appel récursif
>
alert(factorial(5)); // Trouver la factorielle de 5
// Y a-t-il un problème avec la méthode ci-dessus ? Comme suit :
var factorielle = fonction(i){
Si (je < 2) {
Retour 1 ;
>
Return i*factorial(i-1); // La factorielle peut-elle toujours être appelée ? Je ne peux pas
>
var test = factoriel;
factorielle = nulle
alerte(test(2));
//Solution :
var factorielle = fonction(i){
Si (je < 2) {
Retour 1 ;
>
Return i*arguments.callee(i-1); // arguments.callee renvoie l'objet Function en cours d'exécution, qui est le corps de l'objet Function spécifié
>
var test = factoriel;
factorielle = nulle;
alerte(test(5));

9. Portée

Copier le code Le code est le suivant :

// Dans un programme, scope contrôle la visibilité et le cycle de vie des variables.
var name = "default"; // Portée globale
fonction getName(){
var nom = "getName"; // getName scope
pour(var je=0; je<2; je ){
          var inName = "inName";
>
alert(i "," inName); // 2, inName Remarque : Il n'y a pas de portée au niveau du bloc dans js et les variables déclarées dans if, for, while sont placées dans la portée du bloc
Retourner le nom ;
>
alert(getName()); // getName Remarque : js a une portée de fonction, donc les variables définies à l'intérieur de la fonction ne sont pas visibles à l'extérieur de
alert(nom); // par défaut

Remarque : Dans de nombreuses langues modernes, il est recommandé de retarder autant que possible la déclaration des variables. Tel que : java, mais en js, cela n'est pas recommandé car js ne prend pas en charge la portée au niveau du bloc. Il est recommandé de déclarer toutes les variables utilisées au début de la fonction.

10. Clôture
Le contexte dans lequel une fonction a accès à l'environnement lors de sa création est appelé fermeture. L'avantage de la portée est que la fonction interne peut accéder à toutes les variables de la fonction externe (sauf celle-ci et les arguments).

Copier le code Le code est le suivant :

var monObjet = {
valeur : 0,
incrément : fonction (inc) {
This.value = typeof inc === 'number' inc : 1;
},
GetValue : fonction(){
         renvoie this.value;
>
};
monObjet.increment(10);
alert(myObject.value);
alert(myObject.getValue());
// Ce qui précède définit un objet myObject en utilisant des constantes littérales. Mais la variable valeur est accessible aux objets externes
var monObjet = fonction(){
valeur var = 0;
Retour {
incrément : fonction (inc) {
valeur = typeof inc === 'numéro' inc : 1;
},
         getValue : fonction(){
             valeur de retour ;
>
};
}();
monObjet.increment(10);
alert(myObject.value); // Impossible d'accéder aux objets externes
alert(myObject.getValue()); // 10
// Couleur de fond du corps dégradé (jaune à blanc)
var fondu = fonction (nœud){
niveau var = 1;
var étape = fonction(){
        var hex = level.toString(16);
           node.style.backgroundColor = '#FFFF' hex hex;
Si(niveau <15){
Niveau = 1;
                setTimeout(step, 500); // Si le niveau est inférieur à 15, la fonction interne s'appelle
>
};
setTimeout(step, 1); // Appel de la fonction interne
};
fade(document.body);
// Voici un très mauvais exemple
Cliquez sur moi...
// Afficher 3
lorsque vous cliquez dessus Cliquez sur moi...
// Afficher 3
lorsque vous cliquez dessus Cliquez sur moi...
// Afficher 3
lorsque vous cliquez dessus var add_the_handlers = fonction (nœuds){
var je;
pour (i = 0; i < nodes.length; i = 1) {
Nodes[i].onclick = function(e){ // Construction de la fonction : i
alerte(i);
        };
>
};
var objs = document.getElementsByName("test");
add_the_handlers(objs);
//La raison de ce qui précède est que la fonction d'événement de la balise a est liée à la variable i, qui n'est pas la valeur i lorsque la fonction a été construite.
// La solution est la suivante :
var add_the_handlers = fonction (nœuds){
var je;
pour (i = 0; i < nodes.length; i = 1) {
nœuds[i].onclick = fonction(i){
              fonction(s) de retour{
                       alert(i); // La sortie i est celle transmise par le constructeur, et non celle liée au traitement de l'événement.
            };
         }(i);
>
};
var objs = document.getElementsByName("test");
add_the_handlers(objs);

11. Rappels

Copier le code Le code est le suivant :

// data représente les paramètres et call_function représente la fonction de rappel
fonction sendRequest(data, call_function){
// setTimeout pour simuler le temps nécessaire au client pour demander la transmission des données depuis le serveur.
// Appelez la fonction de rappel après 3 secondes (il existe un client qui implémente la fonction de rappel)
setTimeout(function(){
          call_function(data); // Appeler la fonction de rappel
}, 3000);
>
//Test de la fonction sendRequest
sendRequest("paramètre", fonction(contexte){
alert("context=" contexte);
});

12.Module
Un module est une fonction ou un objet qui fournit une interface mais cache l'état et l'implémentation.
Forme générale : une fonction qui définit des variables et des fonctions privées ; utilise des fermetures pour créer des fonctions privilégiées pouvant accéder aux variables et fonctions privées ; renvoie finalement cette fonction privilégiée, ou les enregistre dans un endroit où elles sont accessibles.

Copier le code Le code est le suivant :

Function.prototype.method = function(nom,func){
This.prototype[nom] = func;
Renvoyez ceci ;
};
String.method("deentityify",function(){
var entité = {
         quot: '"',
                                                                                                        gt : '>'
};
Fonction de retour(){
             return this.replace(/&([^&;] );/g, function(a, b){ // Comment connaître les valeurs​​de a et b, comprendre les expressions régulières
          var r = entité[b];
                return typeof r === "string" ? r : a;
        });
};
}());
alert("<">.deentityify()); // Test : <">

Remarque : le mode module est généralement utilisé en combinaison avec le mode singleton de JavaScript. Le mode singleton de JavaScript est un objet créé à l'aide de littéraux d'objet. La valeur d'attribut de l'objet peut être une valeur numérique ou une fonction, et la valeur d'attribut. ne change pas pendant le cycle de vie de l'objet. Des changements se produiront.

13. Cascade (fonctionnement en chaîne) Pour certaines méthodes qui ne renvoient pas de valeur, nous renvoyons celle-ci au lieu de indéfini, nous pouvons alors commencer la mise en cascade (chaînage) pour faire fonctionner l'objet. Comme suit :

Copier le code Le code est le suivant :

var $ = fonction(id){
    var obj = document.getElementById(id);
    obj.setColor = fonction (couleur){
        this.style.color = couleur;
        rends ceci ;
    };
    obj.setBgColor = fonction (couleur){
        this.style.backgroundColor = couleur;
        rends ceci ; // 返回this对象，启动级联
    };
    obj.setFontSize = fonction(taille){
        this.style.fontSize = taille;
        rends ceci ;
    };
    retourner obj ;
};
$("test").setColor("rouge")
         .setFontSize("30px")
         .setBgColor("bleu");
// 改进后的代码：
(fonction(id){
    var _$ = fonction(id){
        this.element = document.getElementById(id);
    };
    _$.prototype = {
        setColor : fonction(couleur){
            this.element.style.color = couleur;
            rends ceci ;
        },
        setBgColor : fonction(couleur){
            this.element.style.backgroundColor = couleur;
            rends ceci ;
        },
        setFontSize : fonction(taille){
            this.element.style.fontSize = taille;
            rends ceci ;
        >
    };
    
    // 添加到fenêtre原型链中
    fenêtre.$ = fonction(id){
        renvoyer un nouveau _$(id);
    };
})();
$("test").setColor("rouge")
         .setFontSize("30px")
         .setBgColor("bleu");

14、套用
    La fonction 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 ;
>
        renvoie 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