Continuez avec l'article précédent "Comment écrire le code JS de haute qualité" Cette fois, je trierai les points de connaissance des fonctions JavaScript.
2. Utilisez des fonctions
Les fonctions fournissent aux programmeurs des fonctions abstraites principales et des mécanismes de mise en œuvre. Les fonctions peuvent implémenter indépendamment plusieurs fonctionnalités différentes dans d'autres langues, telles que les procédures, les méthodes, les constructeurs et même les classes ou les modules.
2.1 Comprendre les différences entre les appels de fonction, les appels de méthode et les appels du constructeur
Pour la programmation orientée objet, le constructeur des fonctions, des méthodes et des classes est trois concepts différents.
Mode d'utilisation:
1. Appel de fonction
La copie de code est la suivante:
fonction bonjour (nom d'utilisateur) {
Renvoie le nom d'utilisateur "Hello" +;
}
2. Appel de méthode
La copie de code est la suivante:
var obj = {
Bonjour: fonction () {
return "Hello", + this.Username;
},
Nom d'utilisateur: "Floralam"
};
ohj.hello (); // "Bonjour, Floralam"
Cette variable est liée à l'objet car la méthode Hello est définie dans l'objet OBJ. Nous pouvons également attribuer une copie de la même référence de fonction dans un autre objet et obtenir la même réponse.
La copie de code est la suivante:
var obj2 = {
Bonjour: obj.hello (),
Nom d'utilisateur: "Floralam"
};
3. Utilisez le constructeur
La copie de code est la suivante:
fonction user (nom, mot de passehash) {
this.name = name;
this.passwordhash = mot de passehash;
}
L'appel d'appel à l'aide du nouvel opérateur est considéré comme un constructeur.
La copie de code est la suivante:
var u = nouvel utilisateur ("Floralam", "123");
Contrairement aux appels de fonction et aux appels de méthode, l'appel constructeur prend un objet complètement nouvel comme la valeur de cette variable et renvoie implicitement ce nouvel objet en tant que résultat de l'appel. La responsabilité principale du constructeur est d'initialiser le nouvel objet.
2.2 compétent dans les fonctions avancées
Les fonctions d'ordre supérieur ne sont rien de plus que des fonctions qui prennent des fonctions comme des paramètres ou des valeurs de retour, et utilisent les fonctions comme paramètres (généralement appelés fonctions de rappel, car les fonctions d'ordre supérieur "l'appellent ensuite" IT) est un idiome particulièrement puissant et expressif, et est également largement utilisé dans les programmes JS.
Considérez la méthode de tri standard des tableaux. Afin de travailler pour tous les tableaux, la méthode de tri nécessite l'appelant pour décider comment comparer deux éléments dans le tableau.
La copie de code est la suivante:
Fonction CompareNumber (x, y) {
if (x <y) {
retour -1;
}
if (x> y) {
retour 1;
}
retour 0;
}
[3,1,4,1,5,9] .Sort (comparaison); // [1,1,3,4,5,9]
La copie de code est la suivante:
[3,1,4,1,5,9] .Sort (fonction (x, y) {
if (x <y) {
retour -1;
}
if (x> y) {
retour 1;
}
retour 0;
}); // [1,1,3,4,5,9]
L'exemple ci-dessus utilise une fonction anonyme pour simplifier davantage.
Apprendre à utiliser des fonctions d'ordre supérieur peut souvent simplifier le code et éliminer le code de chauffeur fastidieux. Pour une conversion simple des tableaux de chaînes, nous pouvons utiliser une boucle pour l'implémenter comme ceci:
La copie de code est la suivante:
var noms = ["Fred", "Wilma", "Pebbles"];
var supérieur = [];
pour (var i = 0, n = noms.length; i <n; i ++) {
Upper [i] = noms [i] .touppercase ();
}
supérieur; // ["Fred", "Wilma", "Pebbles"];
En utilisant la méthode de carte pratique des tableaux, vous pouvez éliminer les boucles et convertir les éléments un par un en utilisant une seule fonction locale.
La copie de code est la suivante:
var noms = ["Fred", "Wilma", "Pebbles"];
var upper = noms.map (fonction (nom) {
RETOUR NAME.TOUPPERCASE ();
});
supérieur; // ["Fred", "Wilma", "Pebbles"];
De plus, par exemple, nous voulons créer plusieurs méthodes pour créer différentes chaînes avec une logique d'implémentation commune, et chaque boucle crée une chaîne en connectant les résultats de calcul de chaque pièce indépendante.
La copie de code est la suivante:
fonction BulidString (n, rappel) {
var result = "";
pour (var i = 0; i <n; i ++) {
Résultat + = rappel (i);
}
Résultat de retour;
}
var alphabet = BulidString (26, fonction (i) {
return String.FromCharcode (Aindex + I);
});
Alphabet; // "ABCDEFGHIJKLMNOPQRXTUVWXYZ";
var chiffres = buildString (10, fonction (i) {return i;})
chiffres; // "0123456789"
var random = buildString (9, function () {
Random + = String.FromCharcode (Math.floor (Math.Random () * 26) + Aindex
});
aléatoire; // "yefjmcef" (aléatoire)
Cela donnera aux lecteurs une compréhension plus claire de ce que le code peut faire sans les détails de mise en œuvre approfondie.
Remarque
JavaScript renvoie la formule pour les nombres aléatoires (entre MNS) de la plage spécifiée: math.random () * (nm) + m
Dans le même temps, faites attention aux exigences de la question et s'il est nécessaire de retourner un entier positif.
2.3 Mode d'appel
L'appel d'une fonction suscitera l'exécution de la fonction actuelle et passe les droits de contrôle et les paramètres à la nouvelle fonction. En plus des paramètres formels définis au moment de la déclaration, chaque fonction reçoit deux nouveaux paramètres supplémentaires: ceci et les arguments.
Il s'agit d'un paramètre très important, et sa valeur est déterminée par le modèle d'appel.
Voici 4 modèles d'appel très importants en JavaScript:
un. Modèle d'invocation de la méthode
né Le modèle d'invocation de la fonction
c. Le modèle d'invocation du constructeur
d. Appliquer le modèle d'appel le modèle d'invocation d'appliquer
Il existe des différences dans la façon dont ces modèles initialisent les paramètres clés
1. Méthode d'invocation de la méthode
Lorsqu'une fonction est une méthode d'un objet, nous l'appelons une méthode. Lorsqu'une méthode est appelée, ceci est lié à l'objet appelé.
La copie de code est la suivante:
var myobj = {
Val: 0,
incrément: fonction (inc) {
this.val + = typeof inc === "nombre"? Inc: 1;
},
get_val: function () {return this.val;}
}
myobj.increment (); // 1
myobj ["incrément"] (2); // 3
résumé:
1. La méthode dans laquelle le contexte de l'objet auquel ils appartiennent peut être obtenu à travers ceci est appelé une méthode publique
2. Lorsque vous utilisez une fonction avec a. ou l'expression des indices, c'est le mode d'appel de méthode, et cet objet est lié à l'objet précédent.
3. Une fonction peut l'utiliser pour accéder à un objet, afin qu'il puisse récupérer la valeur de l'objet ou modifier la valeur de l'objet. Ligner ceci à l'objet se produit lorsqu'il est appelé.
2. Le modèle d'invocation de la fonction
Lorsqu'une fonction n'est pas la propriété d'un objet, elle est appelée en fonction. Lorsqu'une fonction est appelée modèle d'appel de fonction, ceci est lié à l'objet global. Il s'agit d'une erreur de conception JavaScript et se poursuit.
La copie de code est la suivante:
fonction add (x, y) {
retour x + y;
}
myobj.double = fonction () {
var that = this;
var helper = function () {
that.val = add (that.value, that.value);
// La mauvaise façon d'écrire peut être comme ça, pourquoi est-ce mal? Parce que lorsque la fonction est appelée fonction interne, cela a été lié à l'objet mauvais et l'objet global n'a pas de propriété Val, donc la valeur incorrecte est renvoyée.
//this.val = this.val + this.val;
}
auxiliaire();
}
myobj.double (); // 6
3. Le modèle d'invocation du constructeur
JavaScript est un langage basé sur l'héritage du prototype, ce qui signifie que les objets peuvent directement hériter des attributs à partir d'autres objets, et la langue est sans classe.
Si vous appelez une fonction avec NOUVEAU, vous obtiendrez un nouvel objet qui masque le membre du prototype connecté à la fonction, et cela sera également lié au nouvel objet.
Le nouveau préfixe modifie également le comportement de l'instruction de retour. Ce n'est pas non plus la méthode de programmation recommandée.
La copie de code est la suivante:
var foo = fonction (status) {
this.status = statut;
}
Foo.prototype.get_status = fonction () {
Renvoyez ce.status;
}
// construire une instance foo
var myfoo = new foo ("bar");
myfoo.get_status (); // "bar"
4. Appliquer appelez le modèle le modèle d'invocation applique
Parce que JavaScript est un langage fonctionnel orienté objet, les fonctions peuvent avoir des méthodes.
La méthode d'application a deux paramètres. Le premier consiste à lier la valeur à cela, et le second est le tableau des paramètres. C'est-à-dire que la méthode d'application nous permet de créer un tableau et de l'utiliser pour appeler la fonction, ce qui nous permet de sélectionner la valeur de cela et nous permet également de sélectionner la valeur du tableau.
La copie de code est la suivante:
Var Array = [3,4];
var sum = add.Apply (null, array); // 7
var statusobj = {status: "ABCDEFG"};
Foo.prototype.pro_get_status = fonction (préfixe) {
return préfixe + "-" + this.status;
}
var status = foo.prototype.get_status.apply (statusobj); // "ABCDEFG"
var pro_status = foo.prototype.get_status.apply (statusobj, ["prefix"]); // "prefix -abcdefg"
En règle générale, le récepteur d'une fonction ou d'une méthode (niveau lié à la valeur de ce mot-clé spécial) est déterminé par la syntaxe de l'appelant. En particulier, la syntaxe de l'appel de méthode lie la méthode à cette variable par l'objet de recherche. Cependant, il est parfois nécessaire d'appeler des fonctions à l'aide d'un récepteur personnalisé. Pour le moment, vous devez utiliser la méthode d'appel ou lier la méthode pour personnaliser le récepteur pour appeler la méthode
2.4 Extraire des méthodes avec définir les destinataires en utilisant la méthode de liaison
Étant donné que la méthode n'est pas différente des attributs dont les valeurs sont des fonctions, il est également facile d'extraire la méthode de l'objet et d'extraire la fonction comme une fonction de rappel et de la transmettre directement à la fonction d'ordre supérieur.
Mais il est également facile d'oublier de lier la fonction extraite à l'objet extrait.
La copie de code est la suivante:
var tampon = {
Entrées: [],
ajouter: fonction (s) {
this.entries.push (s);
}
}
var source = ["867", "-", "5309"];
Source.ForEach (Butter.Add); // Erreur: les entrées sont non définies
À l'heure actuelle, le bénéficiaire de beurre.Add n'est pas l'objet de beurre. Le récepteur de la fonction dépend de la façon dont elle est appelée, et la méthode FOREEAC est appelée dans la portée globale, de sorte que l'implémentation de la méthode Foreach utilise l'objet global comme récepteur par défaut. Puisqu'il n'y a pas d'attribut d'entrée dans l'objet global, ce code lance une erreur.
La méthode foreach permet à l'appelant de fournir un paramètre facultatif comme récepteur de la fonction de rappel.
La copie de code est la suivante:
var source = ["867", "-", "5309"];
Source.ForEach (beurre.add, beurre);
Mais toutes les fonctions d'ordre supérieur ne sont pas prudentes et réfléchies pour fournir aux utilisateurs le récepteur des fonctions de rappel.
Il y a deux solutions:
1) Créez une méthode d'objet tampon explicite pour appeler la fonction d'ajout d'encapsulation. Quelle que soit la façon dont la fonction d'encapsulation est appelée, elle garantit toujours que ses paramètres sont poussés dans le tableau cible.
La copie de code est la suivante:
var source = ["867", "-", "5309"];
source.ForEach (fonction (s) {
beurre.add (s);
});
2) La méthode de liaison de l'objet de fonction nécessite un objet récepteur et génère une fonction d'encapsulation qui appelle la fonction d'origine avec la méthode appelée par l'objet récepteur.
La copie de code est la suivante:
var source = ["867", "-", "5309"];
Source.ForEach (beurre.add.bind (tampon));
Remarque
buffer.add.bind (tampon) crée une nouvelle fonction au lieu de modifier la fonction tampon.add:
buffer.add === buffer.add.bind (tampon); //FAUX
Ce qui précède est tout sur cet article, j'espère que vous l'aimez.