Javascript crée des classes et des objets (tutoriel graphique)

Il existe de nombreuses façons de créer des classes et des objets à l'aide de Javascript. Listons-les maintenant : 1. Méthode de création originale, 2. Modèle de méthode d'usine, 3. Modèle de méthode de constructeur, 4. Méthode de prototype dynamique. Examinons en détail les exemples ci-dessous

Nous allons maintenant résumer plusieurs façons de créer des classes et des objets en Javascript :

1. Méthode de création originale :

<script type="text/javascript">
  var person = new Object();
  person.name="Amy";
  person.sex="Woman";
  person.show=function(){
    document.write("name is: "+this.name+" ; sex is:"+this.sex);
  }
  person.show(); 
</script>

. La méthode de création originale est difficile à accepter pour les personnes familiarisées avec l'orientation objet. On a toujours l'impression que l'encapsulation des attributs et des méthodes n'est pas très serrée. Cette encapsulation s'effectue sous la forme de "nom d'objet" + "." , ce qui signifie que les attributs et les méthodes suivis du nom de l'objet. Les méthodes sont ce que possède cet objet (par exemple : personne) est le résultat encapsulé. Vous pouvez continuer à ajouter des méthodes et des attributs, par exemple, ajouter l'attribut age : person.age=23;Cette méthode de création fera que ceux qui sont familiers avec la programmation Java se sentent mal. Nous pouvons "encapsuler" davantage la méthode de création d'origine, veuillez consulter l'étape suivante :

2. Modèle de méthode d'usine :

 <script type="text/javascript">
   function personFactory(name,age,sex){
     var ob=new Object();
     ob.name=name;
     ob.age=age;
     ob.sex=sex;
     ob.show=function(){
       document.write(ob.name+" "+ob.age+" "+ob.sex);
     }
     return ob;
   }
   var person=personFactory("Amy",21,"Woman");
   person.show();
 </script>

Le modèle de méthode d'usine ressemble plus à une classe personFactory encapsule. la méthode de création d'origine et renvoie l'objet créé à la variable de référence person. Person peut alors référencer l'objet créé, mais ce n'est pas encore parfait : vous créez un objet à chaque fois et utilisez l'objet pour appeler la méthode show(), un nouveau show. () sera créée. Ils peuvent appeler la même méthode show. La méthode d'optimisation consiste à mettre show en dehors de l'usine, comme suit :

 <script type="text/javascript">
   function show(){
     document.write(this.name+" "+this.age+" "+this.sex);
   }
   function personFactory(name,age,sex){
     var ob=new Object();
     ob.name=name;
     ob.age=age;
     ob.sex=sex;
     ob.show=show;
     return ob;
   }
   var person=personFactory("Amy",22,"Woman");
   person.show();
 </script>

Fonctionnellement parlant, le code ci-dessus résout le problème de la réutilisation des fonctions. , mais la méthode de présentation n'est pas comme créer un objet, et les personnes familiarisées avec Java se sentent toujours mal à l'aise. Veuillez consulter l'étape suivante :

3. Modèle de constructeur :

 <script type="text/javascript">
   function person(name,age,sex){
     this.name=name;
     this.age=age;
     this.sex=sex;
     this.show=function(){
       document.write(this.name+" "+this.age+" "+this.sex);
       document.write("<br>");
     }
   }
   var per=new person("Amy",22,"Woman");
   per.show();
 </script>

La méthode de création du code ci-dessus est presque la même que la méthode de création des classes et des objets Java. Les propriétés de la classe sont encapsulées, puis utilisez le mot-clé new pour créer et renvoyer un objet. N'est-ce pas le processus de création de classes et d'objets en Java ? Oui, c'est ce processus, mais il peut également être optimisé. L'objet ainsi créé sera instantané lors de l'appel de la méthode show. Pour créer une fonction show indépendamment, peut-on créer une méthode commune à tous les objets ? Tout comme les méthodes statiques des classes Java, tous les objets utilisent la même méthode statique et la réponse est oui. Veuillez consulter l'étape suivante :

4. Méthode de prototype dynamique :

 <script type="text/javascript">
   function Person(name,age,sex){
     this.name=name;
     this.age=age;
     this.sex=sex;
     if(typeof Person.tag == "undefined"){
       Person.prototype.show=function(){
         document.write(this.name+" "+this.age+" "+this.sex);
         document.write("<br>");
       }
       Person.tag=true;
     }
   }
   var per=new Person("Peter",22,"Man");
   per.show();
 </script>

Une petite astuce est utilisée ici lorsqu'un objet est créé avec l'instruction de jugement new, if dans la fonction Person. Le bloc sera exécuté. L'ordre est de haut en bas. Bien sûr, la variable tag n'est pas définie au début, donc le contenu du bloc d'instruction if est exécuté :

Person.prototype.show=function(){
 document.write(this.name+" "+this.age+" "+this.sex);
 document.write("<br>");
 }

La signification de ceci. content est de créer une méthode show appartenant à la classe Person. Notez qu'il s'agit d'une méthode de classe, qui est équivalente à la méthode statique modifiée en Java, plutôt qu'à la méthode d'un seul objet. De cette façon, tous les objets peuvent appeler. la même méthode, et il n'est pas nécessaire de créer sa propre fonction show à chaque fois qu'un objet différent appelle la méthode, ce qui économise à la fois de l'espace et du temps. Laissez-moi vous expliquer ici, les propriétés et méthodes construites dans la méthode "nom de classe.prototype.property/method" sont équivalentes aux variables ou méthodes modifiées avec static en Java. Elles appartiennent à la classe entière, pas à un seul objet, c'est-à-dire. , tous les objets sont partagés.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Quels BUG et erreurs se produisent souvent dans JS

Résumé des méthodes de communication mutuelle parent-enfant dans Composants VueJs

Explication détaillée des étapes de mise en œuvre du POST inter-domaines JS

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!