Madame Lelica

Introduction

JavaScript est un langage basé sur un prototype, et chaque objet en JavaScript a une propriété interne cachée appelée ] qui peut être utilisée pour étendre les propriétés et les méthodes des objets. Vous pouvez en savoir plus sur les prototypes dans notre tutoriel comprendre les Prototypes et L’héritage en JavaScript.

Jusqu’à récemment, les développeurs industrieux utilisaient des fonctions de constructeur pour imiter un modèle de conception orienté objet en JavaScript., La spécification de langage ECMAScript 2015, souvent appelée ES6, a introduit des classes dans le langage JavaScript. Les Classes en JavaScript n’offrent pas réellement de fonctionnalités supplémentaires et sont souvent décrites comme fournissant du « sucre syntaxique” sur les prototypes et l’héritage en ce sens qu’elles offrent une syntaxe plus propre et plus élégante. Parce que d’autres langages de programmation utilisent des classes, la syntaxe de classe en JavaScript rend plus simple pour les développeurs de se déplacer entre les langues.

les Classes Sont des Fonctions

Une classe JavaScript est un type de fonction., Les Classes sont déclarées avec le mot-clé class. Nous utiliserons la syntaxe d’expression de fonction pour initialiser une fonction et la syntaxe d’expression de classe pour initialiser une classe.

// Initializing a function with a function expressionconst x = function() {}

// Initializing a class with a class expressionconst y = class {}

Nous pouvons accéder à la balise ] d’un objet à l’aide de la balise Object.getPrototypeOf() méthode. Utilisons cela pour tester la fonction vide que nous avons créée.

Object.getPrototypeOf(x);

Output
ƒ () { }

On peut aussi utiliser cette méthode à la classe que nous venons de créer.,

Object.getPrototypeOf(y);

Output
ƒ () { }

Le code déclarée avec des function et class les deux de retour d’une fonction ]. Avec les prototypes, n’importe quelle fonction peut devenir une instance de constructeur en utilisant le mot-clé new.

Output
x {}constructor: ƒ ()

Cela s’applique aux classes ainsi.

Output
y {}constructor: class

ces exemples de constructeur prototype sont autrement vides, mais nous pouvons voir comment sous la syntaxe, les deux méthodes atteignent le même résultat final.,

définition d’une classe

dans le tutoriel prototypes et héritage, nous avons créé un exemple basé sur la création de personnages dans un jeu de rôle textuel. Continuons avec cet exemple ici pour mettre à jour la syntaxe des fonctions vers les classes.

Une fonction constructeur est initialisée avec un certain nombre de paramètres, qui seraient assignés en tant que propriétés dethis, en référence à la fonction elle-même. Par convention, la première lettre de l’identificateur serait mise en majuscule.

// Initializing a constructor functionfunction Hero(name, level) { this.name = name; this.level = level;}

lorsque nous traduisons cela en syntaxe de classe, illustrée ci-dessous, nous voyons qu’il est structuré de manière très similaire.

// Initializing a class definitionclass Hero { constructor(name, level) { this.name = name; this.level = level; }}

Nous savons qu’une fonction constructeur est censée être un modèle d’objet par la majuscule de la première lettre de l’initialiseur (qui est facultative) et par la familiarité avec la syntaxe. Le mot-clé class communique de manière plus simple l’objectif de notre fonction.,

la seule différence dans la syntaxe de l’initialisation est d’utiliser le mot-cléclassau lieu defunction, et d’affecter les propriétés à l’intérieur d’une méthodeconstructor().

définition des méthodes

la pratique courante avec les fonctions constructeur est d’affecter des méthodes directement à laprototype au lieu de dans l’initialisation, comme on le voit dans lagreet() méthode ci-dessous.

avec les classes, cette syntaxe est simplifiée et la méthode peut être ajoutée directement à la classe., En utilisant le raccourci de définition de méthode introduit dans ES6, définir une méthode est un processus encore plus concis.

jetons un coup d’œil à ces propriétés et méthodes en action. Nous allons créer une nouvelle instance deHero en utilisant le mot clénew, et assigner certaines valeurs.

const hero1 = new Hero('Varg', 1);

Si nous imprimons plus d’informations sur notre nouvel objet avecconsole.log(hero1), nous pouvons voir plus de détails sur ce qui se passe avec l’initialisation de la classe.,

Output
Hero {name: "Varg", level: 1}__proto__: ▶ constructor: class Hero ▶ greet: ƒ greet()

On peut voir dans la sortie de la constructor() et greet() fonctions ont été appliqués à la balise __proto__ ou ] de hero1, et non pas directement comme une méthode sur le hero1 objet. Bien que cela soit clair lors de la création de fonctions de constructeur, ce n’est pas évident lors de la création de classes. Les Classes permettent une syntaxe plus simple et succincte, mais sacrifient une certaine clarté dans le processus.,

extension d’une classe

Une caractéristique avantageuse des fonctions et classes du constructeur est qu’elles peuvent être étendues dans de nouveaux plans d’objet basés sur le parent. Cela empêche la répétition de code pour des objets similaires mais nécessitant des fonctionnalités supplémentaires ou plus spécifiques.

de nouvelles fonctions de constructeur peuvent être créées à partir du parent en utilisant la méthodecall()., Dans l’exemple ci-dessous, nous allons créer une classe de caractères plus spécifique appelée Mage, et lui attribuer les propriétés de Hero en utilisant call(), ainsi qu’en ajoutant une propriété supplémentaire.

À ce stade, nous pouvons créer une nouvelle instance de Mage en utilisant les mêmes propriétés que le Hero ainsi qu’une nouvelle, nous avons ajouté.,

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

Envoi hero2 dans la console, nous pouvons le voir, nous avons créé un nouveau Mage selon le constructeur.

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"}__proto__: ▶ constructor: ƒ Mage(name, level, spell)

avec les classes ES6, le mot-clésuper est utilisé à la place decall pour accéder aux fonctions parentes. Nous utiliserons extends pour faire référence à la classe parente.

Maintenant, nous pouvons créer une nouvelle balise Mage instance de la même manière.,

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

Nous vous print hero2 à la console et afficher le résultat.

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"}__proto__: Hero ▶ constructor: class Mage

La sortie est presque exactement la même, sauf que dans la classe de construction de la balise ] est liée à la société mère, dans ce cas Hero.

Vous trouverez ci-dessous une comparaison côte à côte de l’ensemble du processus d’initialisation, d’ajout de méthodes et d’héritage d’une fonction constructeur et d’une classe.

bien que la syntaxe soit assez différente, le résultat sous-jacent est presque le même entre les deux méthodes. Les Classes nous donnent une façon plus concise de créer des plans d’objet, et les fonctions de constructeur décrivent plus précisément ce qui se passe sous le capot.

Conclusion

dans ce tutoriel, nous avons appris les similitudes et les différences entre les fonctions du constructeur JavaScript et les classes ES6. Les classes et les constructeurs imitent un modèle d’héritage orienté objet en JavaScript, qui est un langage d’héritage basé sur un prototype.,

comprendre l’héritage prototypique est primordial pour être un développeur JavaScript efficace. Se familiariser avec les classes est extrêmement utile, car les bibliothèques JavaScript populaires telles que React utilisent fréquemment la syntaxe class.