Explication détaillée du prototype en js

Le prototype est une méthode introduite dans IE 4 et les versions ultérieures pour les objets d'une certaine classe, et la particularité est : c'est une méthode pour ajouter des méthodes aux objets d'une classe ! Cela peut paraître un peu déroutant, ne vous inquiétez pas, je vais vous expliquer cette méthode spéciale à travers des exemples ci-dessous :

Tout d'abord, nous devons comprendre le concept de classes, JavaScript lui-même est un objet. -langage orienté, et les éléments impliqués sont rattachés à une classe spécifique en fonction de leurs attributs. Nos classes communes incluent : les variables de tableau (Array), les variables logiques (Boolean), les variables de date (Date), les variables de structure (Function), les variables numériques (Number), les variables d'objet (Object), les variables de chaîne (String), etc. et les méthodes de classe associées sont également souvent utilisées par les programmeurs (ici, nous devons faire la distinction entre l'attention de classe et les méthodes d'envoi d'attributs), telles que la méthode push du tableau, la méthode get series de la date, la méthode split de la chaîne, etc. .,
Mais dans le processus de programmation proprement dit, ressentez-vous les lacunes des méthodes existantes ? La méthode prototype est née ! Ci-dessous, nous expliquerons l'utilisation spécifique du prototype du superficiel au profond à travers des exemples :

1 L'exemple le plus simple pour comprendre le prototype :

(1) Number.add. ( num) : Fonction, ajout de nombres

Méthode d'implémentation : Number.prototype.add = function(num){return(this+num);>
Test : alert((3).add(15 )) -> Afficher 18

(2) Boolean.rev() : Fonction, inverser la variable booléenne

Méthode d'implémentation : Boolean.prototype.rev = function(){ return (!this);}
Test : alert((true).rev()) -> Est-il simple d'afficher false

 ? Cette section indique simplement aux lecteurs une autre méthode et comment cette méthode est utilisée.

2. Implémentation et amélioration des méthodes existantes, première introduction au prototype :

(1) Array.push(new_element)
Fonction : in Ajouter un nouvel élément à la fin du tableau

Méthode d'implémentation :

Array.prototype.push = function(new_element){
this[this.length]=new_element ;
           renvoyer cette.longueur ;

                                                                                                                                                                               

Méthode d'implémentation :

Array.prototype.pushPro = function() {

var currentLength = this.length;

for (var i = 0; i < ; arguments.length; i++) {
this[currentLength + i] = arguments[i];
}
renvoie this.length;


}

Ça ne devrait pas être difficile à comprendre, non ? Par analogie, vous pouvez envisager comment supprimer n'importe quel nombre d'éléments à n'importe quelle position en améliorant Array.pop (le code spécifique ne sera pas détaillé)

(2) String.length

Fonction : C'est en fait un attribut de la classe String, mais comme JavaScript traite les caractères pleine chasse et demi-chasse comme un seul caractère, cela peut causer certains problèmes dans certaines applications pratiques. Nous utilisons maintenant le prototype pour compenser cette lacune.

Méthode d'implémentation :

String.prototype.cnLength = function(){

var arr=this.match(/[^x00-xff]/ig);

return this.length+ (arr==null?0:arr.length);


}

Test : alert("EaseWe Spaces".cnLength()) -> Affichage 16

Certaines méthodes d'expression régulière et les principes de codage des caractères pleine chasse sont utilisés ici. Puisqu'ils appartiennent à deux autres catégories plus larges, cet article ne les expliquera pas.

3. Implémentation de nouvelles fonctions, prototype approfondi : Dans la programmation réelle, ce qui est définitivement utilisé n'est pas seulement l'amélioration des méthodes existantes, mais aussi des exigences plus fonctionnelles. Ci-dessous, je vais donner deux solutions utilisant des prototypes. Exemples de problèmes réels :

(1) String.left()

Problème : Toute personne ayant utilisé VB devrait connaître la fonction left, qui prend n caractères du côté gauche d'une chaîne, mais l'inconvénient est qu'il convertit la pleine largeur et la demi-largeur comme un seul caractère, ce qui entraîne l'impossibilité d'intercepter des chaînes de longueur égale dans une disposition mixte chinoise et anglaise

Fonction : intercepter n caractères du côté gauche de la chaîne, et prend en charge la distinction entre les caractères pleine chasse et demi-chasse
Méthode d'implémentation :

String.prototype.left = function(num,mode){

If(!/d+/.test( num))return(this);

var str = this.substr(0 ,num);
if(!mode) return str;
var n = str.Tlength() - str.length;
num = num - parseInt(n/2);
renvoie ce .substr(0,num);


}

Test :
alert("EaseWe Spaces".left(8)) -> Afficher l'espace EaseWe
alert("EaseWe Spaces".left(8,true)) -> 🎜> Cette méthode utilise la méthode String.Tlength() mentionnée ci-dessus, et quelques bonnes nouvelles méthodes peuvent également être combinées entre des méthodes personnalisées !

(2) Date.DayDiff()

Fonction : Calculer l'intervalle entre deux variables de date (année, mois, jour, semaine)
Méthode de mise en œuvre :

Date.prototype.DayDiff = function(cDate,mode){
         try{
             cDate.getYear();
         }catch(e){
             return(0);
         }
         var base =60*60*24*1000;
         var result = Math.abs(this - cDate);
         switch(mode){
             case "y":
                 result/=base*365;
                 break;
             case "m":
                 result/=base*365/12;
                 break;
             case "w":
                 result/=base*7;
                 break;
             default:
                 result/=base;
                 break;
         }
         return(Math.floor(result));
     }

Test : alert((new Date()).DayDiff((new Date(2002,0,1)))) -> Afficher 329

alert((new Date()).DayDiff((new Date(2002 ,0,1)),"m")) -> Affichage 10

Bien sûr, il peut également être étendu pour obtenir les heures, les minutes ou même les secondes de réponse.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!