Bases d'AJAX : implémentation de classes en JavaScript En JavaScript, vous pouvez utiliser le mot-clé function pour définir une « classe » et comment ajouter des membres à la classe. Les variables ou méthodes référencées via ce pointeur dans une fonction deviendront membres de la classe : Par exemple :
Ce qui suit est un extrait de code :
function class1(){.
var s="abc";
this.p1=s ;
this.method1=fonction(){
alert("ceci est une méthode de test");
}
}
var obj1=nouvelle classe1();
Obtenez l'objet obj1 via new class1(), et l'objet obj1 obtient automatiquement l'attribut p1 et la méthode method1.
En JavaScript, la définition de la fonction elle-même est le constructeur d'une classe. Combinant les propriétés des objets introduites précédemment et l'utilisation de l'opérateur new, ce qui suit décrit le processus de création d'objets à l'aide de new.
(1) Lorsque l'interpréteur rencontre l'opérateur new, il crée un objet vide ;
(2) Commence à exécuter la fonction class1 et pointe le pointeur this vers l'objet nouvellement créé
(3) Parce que lorsque l'objet n'existe pas, Lors de l'attribution d'une valeur à un attribut, l'interpréteur créera l'attribut pour l'objet. Par exemple, dans la classe 1, lorsque l'instruction this.p1=s est exécutée, un attribut p1 sera ajouté et la valeur de la variable s sera. qui lui est attribué, de sorte que L'exécution de la fonction est le processus d'initialisation de cet objet, c'est-à-dire la réalisation du rôle du constructeur
(4) Lorsque la fonction est exécutée, l'opérateur new renvoie l'objet initialisé ;
Tout au long de ce processus, le mécanisme de base orienté objet est implémenté en JavaScript. On peut voir qu'en JavaScript, la définition d'une fonction consiste en fait à implémenter le constructeur d'un objet, qui est complété par des fonctions. Les inconvénients de cette méthode sont les suivants :
· En réunissant toutes les instructions d'initialisation et les définitions de membres, la logique du code n'est pas assez claire et il est difficile d'implémenter des fonctions complexes.
· Chaque fois qu'une instance d'une classe est créée, le constructeur doit être exécuté une fois. Les propriétés et méthodes définies dans le constructeur sont toujours créées de manière répétée. Par exemple :
ce qui suit est un fragment de code :
this.method1=function(){.
alert("ceci est une méthode de test");
}
Chaque fois que méthode1 crée ici une instance de classe1, elle sera créée une fois, entraînant un gaspillage de mémoire. La section suivante présente un autre mécanisme de définition de classe : l'objet prototype, qui peut résoudre les inconvénients causés par la définition des membres de classe dans le constructeur.
Utiliser des objets prototypes pour définir les membres d'une classe
La section précédente a présenté le mécanisme d'implémentation des classes et l'implémentation des constructeurs. Nous introduisons maintenant un autre mécanisme pour ajouter des membres aux classes : les objets prototypes. Lors de la création d'une fonction, les membres de l'objet seront automatiquement affectés à l'objet créé. Par exemple :
Ce qui suit est un extrait de code :
<langage de script="JavaScript" type="text/javascript">
<!--
//Définissez une fonction de classe class1(){ avec un seul attribut prop
this.prop=1;
}
//Utilisez l'attribut prototype de la fonction pour définir de nouveaux membres pour la classe class1.prototype.showProp=function(){
alerte(this.prop);
}
//Créer une instance de class1 var obj1=new class1();
//Appelle la méthode showProp définie via l'objet prototype prototype obj1.showProp();
//-->
</script>
Le prototype est un objet JavaScript qui peut ajouter, modifier et supprimer des méthodes et des propriétés à l'objet prototype. Cela ajoute des définitions de membres à une classe.
Maintenant que nous comprenons l’objet prototype de la fonction, examinons le processus d’exécution de new.
(1) Créez un nouvel objet et laissez ce pointeur pointer vers lui ;
(2) Attribuez tous les membres de l'objet prototype de la fonction à ce nouvel objet
(3) Exécutez le corps de la fonction et initialisez l'objet
(4) ) renvoie l'objet ; créé en (1).
Par rapport au processus d'exécution de new introduit dans la section précédente, il existe un processus supplémentaire d'utilisation de prototype pour initialiser l'objet. Cela est également cohérent avec le sens littéral de prototype, qui est le prototype de l'instance de la classe correspondante. Ce processus d'initialisation se produit avant l'exécution du corps de la fonction (constructeur), de sorte que les propriétés et méthodes définies dans le prototype peuvent être appelées dans le corps de la fonction. Par exemple :
Ce qui suit est un extrait de code :
<langage de script="JavaScript" type="text/javascript">
<!--
//Définir une classe avec un seul attribut prop
fonction classe1(){
this.prop=1;
this.showProp();
}
//Utilisez l'attribut prototype de la fonction pour définir de nouveaux membres pour la classe
class1.prototype.showProp=fonction(){
alerte(this.prop);
}
//Créer une instance de classe1
var obj1=nouvelle classe1();
//-->
</script>
Par rapport au code précédent, ici la méthode showProp définie dans prototype est appelée à l'intérieur de la classe 1, de sorte qu'une boîte de dialogue apparaît pendant le processus de construction de l'objet, montrant que la valeur de l'attribut prop est 1.
Il convient de noter que la définition de l'objet prototype doit être avant l'instruction qui crée l'instance de classe, sinon cela ne fonctionnera pas. Par exemple :
Ce qui suit est un extrait de code :
<langage de script="JavaScript" type="text/javascript">
<!--
//Définir une classe avec un seul attribut prop
fonction classe1(){
this.prop=1;
this.showProp();
}
//Créer une instance de classe1
var obj1=nouvelle classe1();
//Utilisez l'attribut prototype de la fonction pour définir de nouveaux membres pour la classe après l'instruction qui crée l'instance. Cela ne sera efficace que pour les objets créés ultérieurement.
class1.prototype.showProp=fonction(){
alerte(this.prop);
}
//-->
</script>
Ce code générera une erreur d'exécution, indiquant que l'objet d'affichage n'a pas de méthode showProp car la méthode est définie après l'instruction qui instancie une classe.
On voit que l'objet prototype est dédié aux membres de la classe design. De plus, prototype possède également un attribut important : constructor, qui représente une référence au constructeur
. voici l'extrait de code :
fonction classe1(){
alerte(1);
}
class1.prototype.constructor(); //Appelle le constructeur de la classe
Une fois ce code exécuté, une boîte de dialogue apparaîtra avec le texte « 1 » affiché dessus. Cela montre qu'un prototype est étroitement lié à la définition d'une classe. En fait : class1.prototype.constructor===class1.
Un modèle de conception pour les classes JavaScript.
Nous avons déjà expliqué comment définir une classe et comment initialiser une instance d'une classe. La classe peut ajouter des membres au corps de la fonction défini par la fonction, et peut également utiliser un prototype pour définir les membres de la classe. . Le code de programmation semble déroutant. Comment définir les classes de manière claire ? Un modèle d’implémentation pour une classe est donné ci-dessous.
En JavaScript, en raison de la nature flexible des objets, des membres peuvent également être ajoutés à la classe dans le constructeur, ce qui augmente non seulement la flexibilité, mais augmente également la complexité du code. Afin d'améliorer la lisibilité et l'efficacité du développement du code, vous pouvez utiliser cette façon de définir les membres et utiliser l'objet prototype à la place. De cette façon, la définition de la fonction est le constructeur de la classe, ce qui est conforme à l'implémentation. de la classe traditionnelle : le nom de la classe et le nom du constructeur sont identiques. Par exemple :
Voici l’extrait de code :
fonction classe1(){
//Constructeur
}
//Définition du membre
class1.prototype.someProperty="exemple";
class1.prototype.someMethod=fonction(){
//Code d'implémentation de la méthode
}
Bien que le code ci-dessus ait rendu la définition de la classe beaucoup plus claire, chaque fois qu'une propriété ou une méthode est définie, class1.prototype doit être utilisée. Non seulement la taille du code devient plus grande, mais la lisibilité n'est pas suffisante. Pour une amélioration supplémentaire, vous pouvez utiliser le constructeur d'un objet non typé pour spécifier l'objet prototype afin d'implémenter la définition de membre de la classe :
Voici un extrait de code :
//Définir une classe class1
fonction classe1(){
//Constructeur
}
// Réaliser la définition des membres de la classe en spécifiant l'objet prototype
classe1.prototype={
someProperty : "échantillon", someMethod : function(){
//code de la méthode
},
...//Autres propriétés et méthodes.
}
Le code ci-dessus définit class1 de manière très claire. Le constructeur est implémenté directement avec le nom de la classe, et les membres sont définis à l'aide d'objets non typés. Toutes les propriétés et méthodes sont implémentées dans une liste et peuvent être initialisées en même temps. défini. La valeur de l’attribut. Cela ressemble également davantage à l’implémentation de classes dans les langages traditionnels orientés objet. C'est juste que les définitions du constructeur et des membres de classe sont divisées en deux parties. Cela peut être considéré comme un modèle fixe pour définir les classes en JavaScript, ce qui facilitera la compréhension lors de son utilisation.
Remarque : Les références entre les membres d'une classe doivent être faites via ce pointeur. Par exemple, dans la méthode someMethod de l'exemple ci-dessus, si vous souhaitez utiliser l'attribut someProperty, vous devez passer la forme de this.someProperty, car en JavaScript chacun la propriété et les méthodes sont indépendantes, elles sont connectées à un objet via ce pointeur.