Explication détaillée de trois méthodes de définition de classes dans les compétences Javascript_javascript

Il y a près de 20 ans, lorsque Javascript naissait, ce n'était qu'un simple langage de script web. Si vous oubliez de renseigner votre nom d'utilisateur, un avertissement apparaîtra.

Aujourd’hui, il est devenu presque omnipotent, du front-end au back-end, avec toutes sortes d’utilisations incroyables. Les programmeurs l'utilisent pour réaliser des projets de plus en plus importants.

La complexité du code Javascript est également montée en flèche. Il est depuis longtemps courant qu’une seule page Web contienne 10 000 lignes de code Javascript. En 2010, un ingénieur a révélé que la longueur du code de Gmail était de 443 000 lignes !

Écrire et maintenir un code aussi complexe nécessite une stratégie modulaire. À l'heure actuelle, l'approche dominante dans l'industrie consiste à adopter une « programmation orientée objet ». Par conséquent, la façon d’implémenter la programmation orientée objet en Javascript est devenue un sujet brûlant.
Le problème est que la syntaxe Javascript ne prend pas en charge la « classe » (classe), ce qui rend les méthodes de programmation orientées objet traditionnelles incapables d'être utilisées directement. Les programmeurs ont fait de nombreuses recherches sur la façon de simuler des « classes » en Javascript. Cet article résume trois façons de définir des « classes » en Javascript, discute des caractéristiques de chaque méthode et se concentre sur la meilleure méthode à mes yeux.

==============================================

Trois façons de définir des classes en Javascript

En programmation orientée objet, une classe est un modèle pour un objet, qui définit les propriétés et méthodes communes au même groupe d'objets (également appelés « instances »).

Le langage Javascript ne prend pas en charge les « classes », mais vous pouvez utiliser certaines solutions de contournement pour simuler les « classes ».

1. Méthode constructeur

C'est une méthode classique et une méthode qui doit être enseignée dans les manuels scolaires. Il utilise un constructeur pour simuler une "classe" et utilise le mot-clé this en interne pour faire référence à l'objet instance.

Copier le code Le code est le suivant :

fonction Chat() {
　　this.name = "大毛";
}

Lors de la génération d'une instance, utilisez le nouveau mot-clé.

Copier le code Le code est le suivant :

var cat1 = nouveau Chat();
alerte(cat1.name); // Da Mao

Les attributs et méthodes d'une classe peuvent également être définis sur l'objet prototype du constructeur.

Copier le code Le code est le suivant :

Cat.prototype.makeSound = fonction(){
alert("miaou miaou miaou");
}

Pour une introduction détaillée à cette méthode, veuillez lire la série d'articles que j'ai écrits "Programmation orientée objet Javascript", je n'entrerai donc pas dans les détails ici. Son principal inconvénient est qu'il est relativement compliqué, qu'il utilise ceci et un prototype et qu'il est très laborieux à écrire et à lire.

2. Méthode Object.create()

Afin de résoudre les défauts de la « méthode constructeur » et de générer des objets plus facilement, la cinquième édition d'ECMAScript, la norme internationale pour Javascript (la troisième édition est actuellement populaire), propose une nouvelle méthode Object.create() .
Avec cette méthode, une « classe » est un objet et non une fonction.

Copier le code Le code est le suivant :

var Chat = {
　　Nom : "大毛",
　　makeSound: function(){ alert("Meow Meow Meow"); };

Ensuite, utilisez directement Object.create() pour générer une instance sans utiliser new.

Copier le code Le code est le suivant :

​var cat1 = Objet.create(Cat);
alerte(cat1.name); // Da Mao
cat1.makeSound(); // Miaou Miaou Miaou

Actuellement, les dernières versions de tous les principaux navigateurs (y compris IE9) ont déployé cette méthode. Si vous rencontrez un ancien navigateur, vous pouvez utiliser le code suivant pour le déployer vous-même.

Copier le code Le code est le suivant :

​si (!Object.create) {
　　Object.create = fonction (o) {
　　　 fonction F() {}
　　　F.prototype = o;
　　　retourne un nouveau F();
　　};
}

Cette méthode est plus simple que la « méthode constructeur », mais elle ne peut pas implémenter de propriétés privées et de méthodes privées, ni partager des données entre des objets d'instance, et la simulation de « classes » n'est pas assez complète.

3. Méthode du minimalisme

Le programmeur néerlandais Gabor de Mooij a proposé une nouvelle méthode meilleure que Object.create(), qu'il a appelée « l'approche minimaliste ». C'est aussi la méthode que je recommande.

3.1 Emballage

Cette méthode n'utilise pas ceci ni prototype, et le code est très simple à déployer. C'est probablement pourquoi on l'appelle la "méthode minimaliste".

Tout d'abord, il utilise également un objet pour simuler une "classe". Dans cette classe, définissez un constructeur createNew() pour générer des instances.

Copier le code Le code est le suivant :

var Chat = {
​​createNew : function(){
　　　 // du code ici
　　}
};

Ensuite, dans createNew(), définissez un objet instance et utilisez cet objet instance comme valeur de retour.

Copier le code Le code est le suivant :

var Chat = {
​​createNew : function(){
　　 var chat = {};
　　　cat.name = "大毛";
　　　cat.makeSound = function(){ alert("Meow Meow Meow" };
) 　　　retournez le chat ;
　　}
};

Lors de son utilisation, appelez la méthode createNew() pour obtenir l'objet instance.

Copier le code Le code est le suivant :

​var cat1 = Cat.createNew();
cat1.makeSound(); // Miaou Miaou Miaou

L'avantage de cette méthode est qu'elle est facile à comprendre, qu'elle a une structure claire et élégante et qu'elle est conforme à la construction traditionnelle de « programmation orientée objet », de sorte que les fonctionnalités suivantes peuvent être facilement déployées.

3.2 Héritage

Laissez une classe hériter d'une autre classe, ce qui est très pratique à implémenter. Appelez simplement la méthode createNew() de ce dernier dans la méthode createNew() du premier.

Définissez d’abord une classe Animal.

Copier le code Le code est le suivant :

varAnimal = {
​​createNew : function(){
　　 var animal = {};
animal.sleep = function(){ alert("Dormir" };
　　　animal de retour ;
　　}
};

Ensuite, dans la méthode createNew() de Cat, appelez la méthode createNew() d'Animal.

Copier le code Le code est le suivant :

var Chat = {
​​createNew : function(){
　　 var cat = Animal.createNew();
　　　cat.name = "大毛";
　　　cat.makeSound = function(){ alert("Meow Meow Meow" };
) 　　　retournez le chat ;
　　}
};

L'instance Cat obtenue de cette manière héritera à la fois de la classe Cat et de la classe Animal.

Copier le code Le code est le suivant :

​var cat1 = Cat.createNew();
cat1.sleep(); // Dormir dans

3.3 Propriétés privées et méthodes privées

Dans la méthode createNew(), toutes les méthodes et propriétés qui ne sont pas définies sur l'objet cat sont privées.

Copier le code Le code est le suivant :

var Chat = {
​​createNew : function(){
　　 var chat = {};
　　 var sound = "miaou miaou miaou";
　　　cat.makeSound = function(){ alert(sound);
　　　retournez le chat ;
　　}
};

La variable interne sound dans l'exemple ci-dessus ne peut pas être lue en externe et ne peut être lue que via la méthode publique makeSound() de cat.

Copier le code Le code est le suivant :

​var cat1 = Cat.createNew();
alerte(cat1.sound); // non défini

3.4 Partage de données

Parfois, nous avons besoin que tous les objets d'instance puissent lire et écrire les mêmes données internes. Pour le moment, encapsulez simplement les données internes à l’intérieur de l’objet de classe et à l’extérieur de la méthode createNew().

Copier le code Le code est le suivant :

var Chat = {
Son : "miaou miaou miaou",
​​createNew : function(){
　　 var chat = {};
　　　cat.makeSound = function(){ alert(Cat.sound };
); 　　　cat.changeSound = function(x){ Cat.sound = x };
　　　retournez le chat ;
　　}
};

Ensuite, générez deux objets instances :

Copier le code Le code est le suivant :

​var cat1 = Cat.createNew();
var cat2 = Cat.createNew();
cat1.makeSound(); // Miaou Miaou Miaou

À ce stade, si un objet d'instance modifie les données partagées, l'autre objet d'instance sera également affecté.

Copier le code Le code est le suivant :

cat2.changeSound("La La La");
cat1.makeSound(); // La La La

(Fin)