JavaScript est un langage établi, mais il n'a ajouté que la prise en charge de la programmation orientée objet (POO) classique dans ES6. Jusqu'à ce qu'il ajoute des fonctionnalités telles que les déclarations de classe, JavaScript gérait la POO en utilisant un paradigme basé sur un prototype moins connu. Avec l'une ou l'autre approche, cependant, vous pouvez créer des applications complexes qui utilisent des fonctionnalités basées sur des objets.

Un constructeur en JavaScript prototype ressemble beaucoup à n'importe quelle autre fonction. La principale différence est que vous pouvez utiliser cette fonction constructeur pour créer des objets.

Qu'est-ce qu'un constructeur en JavaScript ?

Les constructeurs sont l'un des les concepts fondamentaux de la programmation orientée objet. Un constructeur est une fonction que vous pouvez utiliser pour créer une instance d'un objet. En plus de créer un nouvel objet, un constructeur spécifie les propriétés et les comportements qui lui appartiendront.

Syntaxe du constructeur

instagram viewer
fonctionNomDeConstructeur() {
this.propriété1 = "Propriété1";
this.propriété2 = "Propriété2";
this.propriété3 = "Propriété3";
}

Vous pouvez créer un constructeur avec le fonction mot-clé puisqu'il s'agit essentiellement comme toute autre fonction. Cependant, les constructeurs respectent les conventions suivantes :

  1. Pour les distinguer des autres fonctions, utilisez un nom pour votre constructeur qui commence par une lettre majuscule.
  2. Les constructeurs utilisent ce mot-clé différemment. A l'intérieur d'un constructeur, ce fait référence au nouvel objet que le constructeur va créer.
  3. Contrairement aux fonctions JavaScript, les constructeurs définissent des propriétés et des comportements au lieu de renvoyer des valeurs.

Utiliser un constructeur pour créer de nouveaux objets

En JavaScript, utiliser un constructeur pour créer un objet est une tâche facile. Voici un constructeur simple suivi d'une invocation :

fonctionÉtudiant() {
this.name = "Gloria";
this.gender = "Femme";
ce.age = 19;
}

laisser femmeÉtudiante = nouveau Étudiant();

Dans cet exemple, étudiante est un objet créé à partir du Étudiant constructeur. Utilisez le nouveau mot clé pour appeler la fonction en tant que constructeur. Ce mot-clé indique à JavaScript de créer une nouvelle instance de Étudiant. Vous ne devriez pas appeler cette fonction sans le nouveau mot-clé parce que le ce à l'intérieur du constructeur ne pointera pas vers un nouvel objet. Après chantier, étudiante a toutes les propriétés de Étudiant. Vous pouvez accéder à ces propriétés et les modifier comme vous le feriez avec n'importe quel autre objet.

Choses importantes à savoir sur les constructeurs JavaScript

Travailler avec des constructeurs peut être si fatigant, et en même temps, cela peut être une tâche facile. Voici quelques éléments importants que tout développeur doit savoir sur le travail avec les constructeurs.

Utiliser des constructeurs avec des arguments

Vous pouvez étendre un constructeur pour recevoir des arguments. Ceci est très important si vous cherchez à écrire du code réactif et flexible.

Chaque fois que vous créez un objet à partir d'un constructeur, l'objet hérite de toutes les propriétés déclarées dans le constructeur. Par exemple, le étudiante vous avez créé ci-dessus aura des propriétés nom, genre, et âge avec des valeurs initiales fixes. Bien que vous puissiez modifier chaque propriété manuellement, cela représenterait beaucoup de travail si vous écriviez un programme utilisant de nombreux objets.

Heureusement, les constructeurs JavaScript peuvent accepter des paramètres, comme toute autre fonction. Vous pouvez changer le Étudiant constructeur pour accepter deux paramètres :

fonctionÉtudiant(nom, sexe) {
ce.nom = nom ;
ce.genre = sexe ;
ce.age = 19;
}

Tous les objets créés à partir de ce qui précède auront âge mis à 19. Vous pouvez concevoir votre constructeur de cette façon s'il y a une propriété que vous voulez que tous les objets aient.

Vous pouvez désormais définir des objets uniques à partir du même constructeur en transmettant différents arguments.

Les arguments rendent les constructeurs plus flexibles. Ils font gagner du temps et encouragent le code propre.

Définition des méthodes d'objet

Une méthode est une propriété d'objet qui est une fonction. Les méthodes améliorent votre code en POO car elles ajoutent différents comportements à vos objets. Voici un exemple:

fonctionÉtudiant(nom, sexe) {
ce.nom = nom ;
ce.genre = sexe ;
ce.age = 19 ;

ce.sayName = fonction () {
retour`Je m'appelle ${nom}`;
}
}

Ce qui précède ajoute la fonction direNom au constructeur.

Supposons que vous utilisiez ce constructeur pour créer un objet que vous stockez dans une variable, étudiante. Vous pouvez ensuite appeler cette fonction avec le code ci-dessous :

étudiante.sayName()

Le Prototype

Auparavant, nous avons créé Étudiant de manière à ce que toutes ses instances aient une âge propriété d'une valeur de 19. Cela se traduira par avoir une variable dupliquée pour chaque Étudiant instance que vous créez.

Pour éviter cette duplication, JavaScript utilise le concept de prototypes. Tous les objets créés à partir d'un constructeur partagent les propriétés de son prototype. Vous pouvez ajouter le âge propriété à Étudiant prototype comme illustré ci-dessous :

Student.prototype.age = 19 ;

En faisant cela, toutes les instances de Étudiant aura le âge propriété. Déclarant propriétés du prototype est un moyen de réduire le code en double dans votre application. Cela rend votre code aussi standard que possible.

Une propriété prototype peut être un objet

Vous pouvez ajouter des propriétés de prototype individuellement comme expliqué ci-dessus. Mais si vous avez de nombreuses propriétés à ajouter, cela peut être gênant.

Comme alternative, vous pouvez contenir toutes les propriétés dont vous avez besoin dans un nouvel objet. En faisant cela, vous définirez toutes les propriétés à la fois. Par exemple:

Etudiant.prototype = {
âge: 19 ans,
course: "Blanc",
invalidité: "Aucun"
}

N'oubliez pas de régler le constructeur propriété lors de la définition de prototypes pour un nouvel objet.

Etudiant.prototype = { 
constructeur: Étudiant,
âge: 19 ans,
course: "Blanc",
invalidité: "Aucun"
}

Vous pouvez utiliser cette propriété pour vérifier quelle fonction constructeur a créé une instance.

Supertypes et héritage

Héritage est une méthode que les programmeurs utilisent pour réduire les erreurs dans leurs applications. C'est une façon de coller à la Ne te répète pas (DRY) principe.

Supposons que vous ayez deux constructeurs—Étudiant et Professeur— qui ont deux propriétés prototypes similaires.

Etudiant.prototype = { 
constructeur: Étudiant,

direNom: fonction () {
retour`Je m'appelle ${nom}`;
}
}

Enseignant.prototype = {
constructeur: Professeur,

direNom: fonction () {
retour`Je m'appelle ${nom}`;
}
}

Ces deux constructeurs définissent le direNom méthode, à l'identique. Pour éviter cette duplication inutile, vous pouvez créer un supertype.

fonctionDétails individuels(){};

Détailsindividuels.prototype = {
constructeur: Détails Individuels,

direNom: fonction () {
retour`Je m'appelle ${nom}`;
}
};

Vous pouvez ensuite supprimer direNom des deux constructeurs.

Pour hériter des propriétés du supertype, utilisez Objet.create(). Vous définissez le prototype des deux constructeurs sur une instance du supertype. Dans ce cas, nous fixons le Étudiant et Professeur prototypes à une instance de IndividualDetails.

Le voici :

Etudiant.prototype = Objet.create (IndividualDetails.prototype);
Enseignant.prototype = Objet.create (IndividualDetails.prototype);

En faisant cela, Étudiant et Professeur hériter de toutes les propriétés du supertype, Détails individuels.

Voici comment pratiquer DRY en POO en utilisant des supertypes.

Les constructeurs changent la donne

Les constructeurs sont un composant clé de JavaScript, et la maîtrise de leurs fonctionnalités est cruciale pour le développement d'applications JavaScript OOP. Vous pouvez utiliser un constructeur pour créer des objets qui partagent des propriétés et des méthodes. Vous pouvez également utiliser l'héritage pour définir des hiérarchies d'objets.

Dans ES6, vous pouvez utiliser le classe mot-clé pour définir les classes orientées objet classiques. Cette version de JavaScript prend également en charge un constructeur mot-clé.