Comment écrire du code JS de haute qualité (suite)_compétences javascript

Poursuivant l'article précédent "Comment écrire du code JS de haute qualité", cette fois je vais trier les points de connaissance des fonctions javascript.

2. Utiliser la fonction

Les fonctions fournissent aux programmeurs les principales fonctions abstraites et les mécanismes de mise en œuvre. Les fonctions peuvent implémenter indépendamment plusieurs fonctionnalités différentes dans d'autres langages, telles que des procédures, des méthodes, des constructeurs et même des classes ou des modules.

2.1 Comprendre les différences entre les appels de fonction, les appels de méthode et les appels de constructeur

Pour la programmation orientée objet, les fonctions, les méthodes et les constructeurs de classes sont trois concepts différents.

Mode d'utilisation :

1, appel de fonction

Copier le code Le code est le suivant :

fonction bonjour(nom d'utilisateur){
Renvoie le nom d'utilisateur "bonjour" ;
>

2, appel de méthode

Copier le code Le code est le suivant :

var obj = {
Bonjour : function(){
          return "bonjour, " 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 la même référence de fonction à un autre objet et obtenir la même réponse.

Copier le code Le code est le suivant :

var obj2 = {
Bonjour : obj.hello(),
Nom d'utilisateur : "floraLam"
};

3, le constructeur utilise

Copier le code Le code est le suivant :

fonction Utilisateur (nom, mot de passeHash){
This.name = nom;
This.passwordHash = passwordHash;
>

L'utilisation de l'opérateur new pour appeler User est considérée comme un constructeur.

Copier le code Le code est le suivant :

var u = nouvel utilisateur("floraLam","123");

Différent des appels de fonction et des appels de méthode, les appels de constructeur utilisent un tout nouvel objet comme valeur de cette variable et renvoient implicitement ce nouvel objet comme résultat de l'appel. La principale responsabilité du constructeur est d'initialiser ce nouvel objet.

2.2 Maîtrise des fonctions d'ordre élevé

Les fonctions d'ordre supérieur ne sont rien de plus que les fonctions qui prennent une fonction comme paramètre ou renvoient une valeur (souvent appelée fonction de rappel car la fonction d'ordre supérieur "l'appelle ensuite") l'est. une manière particulièrement puissante et expressive de Les expressions idiomatiques sont également largement utilisées dans les programmes js.

Considérez la méthode de tri standard pour les tableaux. Afin de fonctionner pour tous les tableaux, la méthode de tri nécessite que l'appelant décide comment comparer deux éléments du tableau.

Copier le code Le code est le suivant :

fonction compareNumber(x,y){
Si(x          return -1;
>
Si (x > y){
Retour 1 ;
>
Renvoie 0 ;
>
[3,1,4,1,5,9].sort(compareNumbers);//[1,1,3,4,5,9]

Copier le code Le code est le suivant :

[3,1,4,1,5,9].sort(function(x,y){
Si(x          return -1;
>
Si (x > y){
Retour 1 ;
>
Renvoie 0 ;
});//[1,1,3,4,5,9]

L'exemple ci-dessus est encore simplifié à l'aide d'une fonction anonyme.

Apprendre à utiliser des fonctions d'ordre supérieur simplifie souvent le code et élimine le code passe-partout fastidieux. Nous pouvons utiliser une boucle pour implémenter une simple conversion d'un tableau de chaînes :

Copier le code Le code est le suivant :

var noms = ["Fred","Wilma","Cailloux"];
var supérieur = [];
pour(var i = 0,n = noms.longueur ;i< n;i ){
upper[i] = noms[i].toUpperCase();
>
supérieur;//["FRED","WILMA","PEBBLES"];

L'utilisation de la méthode pratique de mappage du tableau peut éliminer les boucles et utiliser uniquement une fonction locale pour convertir les éléments un par un.

Copier le code Le code est le suivant :

var noms = ["Fred","Wilma","Cailloux"];
var supérieur = noms.map(fonction(nom){
Renvoie nom.toUpperCase();
});
supérieur;//["FRED","WILMA","PEBBLES"];

De plus, par exemple, nous souhaitons créer plusieurs méthodes pour créer des chaînes différentes, avec une logique d'implémentation commune, et chaque boucle crée une chaîne en concaténant les résultats de calcul de chaque partie indépendante.

Copier le code Le code est le suivant :

fonction bulidString(n,callback){
var résultat = "";
pour(var je = 0 ; je < n ;je ){
          résultat = callback(i);
>
Résultat de retour ;
>
var alphabet = bulidString(26,function(i){
Retour String.fromCharCode(aIndex i);
});
alphabet;//"abcdefghijklmnopqrxtuvwxyz";
var chiffres = buildString(10,function(i){ return i;})
chiffres ;//"0123456789"
var aléatoire = buildString(9,function(){
Random = String.fromCharCode(Math.floor(Math.random()*26) aIndex
});
aléatoire;//"yefjmcef"(aléatoire)

Cela permet aux lecteurs d'avoir une compréhension plus claire de ce que le code peut faire sans entrer dans les détails de mise en œuvre.

Remarques

javascript renvoie la formule pour un nombre aléatoire dans la plage spécifiée (entre m-n) : Math.random()*(n-m) m

En même temps, faites attention aux exigences de la question et s'il est nécessaire de renvoyer un entier positif

2.3 Mode d'appel

L'appel d'une fonction mettra en pause l'exécution de la fonction actuelle et transmettra le contrôle et les paramètres à la nouvelle fonction. En plus des paramètres formels définis lors de la déclaration, chaque fonction reçoit deux nouveaux paramètres supplémentaires : this et arguments.

C'est un paramètre très important, et sa valeur est déterminée par le mode d'appel.

Voici 4 modèles d'appel importants en JavaScript :

a. le modèle d'invocation de la méthode
b. le modèle d'invocation de fonction
c. le modèle d'invocation du constructeur
d. Appliquer le modèle d'invocation d'application

Ces modes diffèrent par la façon d'initialiser le paramètre clé ceci

1. La méthode d'invocation de méthode

Quand une fonction sert de méthode à un objet, on appelle la fonction une méthode. Lorsqu'une méthode est appelée, elle est liée à l'objet appelant.

Copier le code Le code est le suivant :

var monObj={
val:0,
incrément:fonction(inc){
This.val =typeof inc ==="numéro" inc:1;
},
Get_val:function(){return this.val;}
>
monObj.increment();// 1
monObj["increment"](2);//3

Résumé :

1. Les méthodes qui peuvent obtenir le contexte des objets auxquels ils appartiennent grâce à cela sont appelées méthodes publiques

2. Lorsque vous utilisez . ou une expression d'indice pour utiliser une fonction, c'est le mode d'appel de la méthode, et cet objet est lié à l'objet précédent.

3. Une fonction peut utiliser ceci pour accéder à l'objet, afin de pouvoir récupérer la valeur de l'objet ou modifier la valeur de l'objet. La liaison à l'objet se produit au moment de l'appel.

2. le modèle d'invocation de fonction

Quand une fonction n'est pas une propriété d'un objet, alors elle est appelée en tant que fonction. Lorsqu'une fonction est appelée en mode d'appel de fonction, elle est liée à l'objet global. Il s'agissait d'une erreur de conception en JavaScript qui persiste.

Copier le code Le code est le suivant :

fonction ajouter(x,y){
retourner x y ;
>
monObj.double=fonction(){
var ça = ceci;
var helper=fonction(){
That.val=ajouter(that.value,that.value);
//La mauvaise façon d'écrire peut être comme ça, pourquoi est-ce faux ? Parce que lorsque la fonction est appelée en tant que fonction interne, elle a été liée au mauvais objet et l'objet global n'a pas d'attribut val, donc une valeur incorrecte est renvoyée.
​​​​ //this.val = this.val this.val;
}
​aide();
>
monObj.double();//6 

3. le modèle d'invocation du constructeur

JavaScript est un langage basé sur l'héritage prototypique, ce qui signifie que les objets peuvent directement hériter des propriétés d'autres objets, et le langage est sans classe.

Si vous appelez une fonction avec new devant elle, vous obtiendrez un nouvel objet qui masque le membre prototype connecté à la fonction, et celui-ci sera également lié au nouvel objet.

Le nouveau préfixe modifie également le comportement de l'instruction return. Ce n’est pas non plus une méthode de programmation recommandée.

Copier le code Le code est le suivant :

var Foo = fonction (statut) {
This.status = statut;
>
Foo.prototype.get_status = function(){
Renvoyez this.status;
>
//Construire une instance Foo
var myFoo = new Foo("bar");
myFoo.get_status();//"bar"

4. Appliquer le modèle d'invocation d'application

JavaScript étant un langage fonctionnel orienté objet, les fonctions peuvent avoir des méthodes.

La méthode Apply a deux paramètres, le premier est la valeur qui y sera liée, et le second est le tableau de paramètres. En d'autres termes, la méthode Apply nous permet de construire un tableau et de l'utiliser pour appeler la fonction. , ce qui nous permet de sélectionner cette valeur nous permet également de sélectionner la valeur du tableau.

Copier le code Le code est le suivant :

var tableau = [3,4];
var somme = add.apply(null,array); // 7
var statusObj = {status:"ABCDEFG"};
Foo.prototype.pro_get_status = fonction (préfixe){
Renvoie le 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"

Normalement, le récepteur d'une fonction ou d'une méthode (la valeur liée au mot-clé spécial this) est déterminé par la syntaxe de l'appelant. En particulier, la syntaxe de l'appel de méthode lie l'objet méthode à la variable this. Cependant, il est parfois nécessaire d'utiliser un récepteur personnalisé pour appeler une fonction. À ce stade, vous devez utiliser la méthode d'appel ou la méthode de liaison pour personnaliser le récepteur afin qu'il appelle la méthode

2.4 Utiliser la méthode bind pour extraire des méthodes avec des destinataires déterminés

Comme il n'y a pas de différence entre les méthodes et les propriétés dont la valeur est une fonction, il est également facile d'extraire la méthode de l'objet et d'extraire la fonction en tant que fonction de rappel et de la transmettre directement à la fonction d'ordre supérieur.

Mais il est aussi facile d'oublier de lier le récepteur de la fonction extraite à l'objet à partir duquel la fonction a été extraite.

Copier le code Le code est le suivant :

var tampon = {
Entrées : [],
       ajouter :fonction(s){
This.entries.push(s);
}  
>
var source = ["867","-","5309"];
source.forEach(butter.add);//error:entries n'est pas défini

À l'heure actuelle, le destinataire de butter.add n'est pas l'objet beurre. Le récepteur de la fonction dépend de la façon dont elle est appelée. La méthode forEach est appelée dans la portée globale, donc 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ées dans l'objet global, ceci. le code lance Une erreur s'est produite.

La méthode forEach permet à l'appelant de fournir un paramètre facultatif en tant que récepteur de la fonction de rappel.

Copier le code Le code est le suivant :

var source = ["867","-","5309"];
source.forEach(beurre.ajouter,beurre);

Mais toutes les fonctions d'ordre élevé ne sont pas suffisamment réfléchies pour fournir aux utilisateurs des récepteurs de fonctions de rappel.

Il existe deux solutions :

1) Créez une fonction wrapper qui appelle explicitement add via une méthode objet tampon. Quelle que soit la manière dont la fonction encapsulée est appelée, il est toujours garanti d'insérer ses paramètres dans le tableau cible.

Copier le code Le code est le suivant :

var source = ["867","-","5309"];
source.forEach(fonction(s){
Beurre.ajouter(s);
});

2) La méthode bind de l'objet fonction nécessite un objet récepteur et génère une fonction wrapper qui appelle la fonction d'origine en utilisant l'appel de méthode de l'objet récepteur.

Copier le code Le code est le suivant :

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

Remarques

buffer.add.bind(buffer) crée une nouvelle fonction au lieu de modifier la fonction buffer.add :

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

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.