JavaScript utilise l’héritage prototypique: chaque objet hérite des propriétés et des méthodes de son objet prototype.

la classe traditionnelle comme modèle pour créer des objets, utilisée dans des langages comme Java ou Swift, n’existe pas en JavaScript. L’héritage prototypique ne traite que des objets.

l’héritage prototypique peut émuler l’héritage de classe classique. Pour apporter les classes traditionnelles à JavaScript, la norme ES2015 introduit la syntaxeclass: un sucre syntaxique sur l’héritage prototypique.,

Cet article vous familiarise avec les classes JavaScript: comment définir une classe, initialiser l’instance, définir des champs et des méthodes, comprendre les champs privés et publics, saisir les champs et méthodes statiques.

1. Définition: mot-clé class

Le mot-clé class définit une classe en JavaScript:

class User { // The body of class}

Le code ci-dessus définit une classe User. Les accolades { } délimitent le corps de la classe. Notez que cette syntaxe est nommée déclaration de classe.,

Vous n’êtes pas obligé d’indiquer le nom de la classe. En utilisant une classe expression que vous pouvez affecter à la classe d’une variable:

const UserClass = class { // The body of class};

Vous pouvez facilement exporter une classe dans le cadre d’un ES2015 module. Voici la syntaxe d’une exportation par défaut:

export default class User { // The body of class}

Et nommée à l’exportation:

export class User { // The body of class}

La classe devient utile lorsque vous créez une instance de la classe. Une instance est un objet contenant des données et un comportement décrits par la classe.,

Le new opérateur instancie la classe en JavaScript: instance = new Class().

Par exemple, vous pouvez instancier la User de classe à l’aide de la balise new opérateur: 

const myUser = new User();

new User() crée une instance de la balise User de classe.

2. Initialisation: constructeur()

constructor(param1, param2, ...) est une méthode spéciale dans le corps d’une classe qui initialise l’instance., C’est l’endroit où vous définissez les valeurs initiales pour les champs, ou faites tout type de configuration d’objet.

Dans l’exemple suivant, le constructeur définit la valeur initiale du champ name:

class User { constructor(name) { this.name = name; }}

User’s constructeur à un paramètre name, qui est utilisé pour définir la valeur initiale du champ this.name.

dans le constructeur this valeur est égale à l’instance nouvellement créée.,

Les arguments utilisés pour instancier la classe deviennent les paramètres du constructeur: 

class User { constructor(name) { name; // => 'Jon Snow' this.name = name; }}const user = new User('Jon Snow');

name paramètre dans le constructeur a la valeur 'Jon Snow'.

Si vous ne définissez pas de constructeur pour la classe, un constructeur par défaut est créé. Le constructeur par défaut est une fonction vide, qui ne modifie pas l’instance.

en même temps, une classe JavaScript peut avoir jusqu’à un constructeur.

3. Champs

Les champs de classe sont des variables qui contiennent des informations., Les champs peuvent être attachés à 2 entités:

  1. Champs sur l’instance de classe
  2. Champs sur la classe elle-même (aka statique)

les champs ont également 2 niveaux d’accessibilité:

  1. Public: le champ est accessible n’importe où
  2. privé: le champ est accessible uniquement dans le corps de la classe

3.1 dans l’extrait de code précédent: 

class User { constructor(name) { this.name = name; }}

l’expressionthis.name = namecrée un champ d’instance name et lui assigne une valeur initiale.,

plus Tard, vous pouvez accéder à la balise name champ à l’aide d’une propriété accesseur:

const user = new User('Jon Snow');user.name; // => 'Jon Snow'

name est un champ public, parce que vous pouvez y accéder en dehors de la balise User le corps de classe.

Lorsque les champs sont créés implicitement à l’intérieur du constructeur, comme dans le scénario précédent, il pourrait être difficile de saisir la liste des champs. Vous devez les déchiffrer à partir du code du constructeur.

Une meilleure approche consiste à déclarer explicitement les champs de classe., Quel que soit le constructeur, l’instance a toujours le même ensemble de champs.

la proposition class fields vous permet de définir les champs à l’intérieur du corps de la classe. De Plus, vous pouvez indiquer la valeur initiale tout de suite:

class SomeClass { field1; field2 = 'Initial value'; // ...}

nous allons modifier la balise User de classe et de déclarer un champ public name:

class User { name; constructor(name) { this.name = name; }}const user = new User('Jon Snow');user.name; // => 'Jon Snow'

name; à l’intérieur du corps de la classe déclare un champ public name.,

les champs publics déclarés de cette manière sont expressifs: un rapide coup d’œil aux déclarations de champs suffit pour comprendre la structure de données de la classe.

de plus, le champ de classe peut être initialisé immédiatement lors de la déclaration. 

class User { name = 'Unknown'; constructor() { // No initialization }}const user = new User();user.name; // => 'Unknown'

name = 'Unknown' à l’intérieur du corps de classe déclare un champ name et l’initialise avec la valeur 'Unknown'.

Il n’y a aucune restriction sur l’accès ou la mise à jour des champs publics., Vous pouvez lire et affecter des valeurs aux champs publics à l’intérieur du constructeur, des méthodes et en dehors de la classe.

3.2 champs d’instance Privé

l’Encapsulation est un concept important qui vous permet de masquer les détails internes d’une classe. Quelqu’un qui utilise une classe encapsulée ne dépend que de l’interface publique fournie par la classe et ne s’associe pas aux détails d’implémentation de la classe.

Les Classes organisées avec l’encapsulation à l’esprit sont plus faciles à mettre à jour lorsque les détails de l’implémentation changent.,

Un bon moyen de cacher des données internes d’un objet est d’utiliser les champs privés. Ce sont les champs qui peuvent être lus et modifiés uniquement dans la classe à laquelle ils appartiennent. Le monde extérieur de la classe ne peut pas modifier directement les champs privés.

Les champs privés ne sont accessibles que dans le corps de la classe.

Préfixe le nom du champ avec le symbole spécial # pour le rendre privé, par exemple: #myField., Le préfixe # doit être conservé à chaque fois que vous travaillez avec le champ: déclarez-le, lisez-le ou modifiez-le.

assurez-vous que le champ #name peut être réglé une fois à l’instance d’initialisation:

#name est un domaine privé. Vous pouvez accéder et modifier #name dans le corps de la balise User. La méthode getName() (plus d’informations sur les méthodes dans la section suivante) peut accéder au champ privé #name.,

Mais si vous essayez d’accéder au champ privé#name en dehors du corps de la classeUser, une erreur de syntaxe est générée:SyntaxError: Private field '#name' must be declared in an enclosing class.

3.3 Public aux champs statiques

Vous pouvez également définir des champs sur la classe elle-même: les champs statiques. Ceux-ci sont utiles pour définir des constantes de classe ou stocker des informations spécifiques à la classe.

Pour créer des champs statiques dans une classe JavaScript, utiliser le mot-clé static suivi du nom du champ: static myStaticField.,

nous allons ajouter un nouveau champ type qui indique le type d’utilisateur: admin ou régulier. Les champs statiques TYPE_ADMIN et TYPE_REGULAR sont pratiques constantes de différencier les types d’utilisateurs:

static TYPE_ADMIN et static TYPE_REGULAR définir les variables statiques à l’intérieur de la balise User de classe. Pour accéder aux champs statiques, vous devez utiliser la classe, suivi par le nom du champ: User.TYPE_ADMIN et User.TYPE_REGULAR.

3.,4 champs statiques privés

parfois, même les champs statiques sont un détail d’implémentation que vous souhaitez masquer. À cet égard, vous pouvez rendre les champs statiques privés.

Pour le champ statique privé, préfixe le nom du champ avec des # symbole spécial: static #myPrivateStaticField.

disons que vous souhaitez limiter le nombre d’instances de la balise User de classe., Pour masquer les détails sur les limites d’instances, vous pouvez créer les champs statiques privés:

le champ statiqueUser.#MAX_INSTANCESdéfinit le nombre maximum d’instances autorisées, tandis queUser.#instances le champ statique compte le nombre réel d’instances.

ces champs statiques privés ne sont accessibles que dans la classeUser. Rien du monde extérieur ne peut interférer avec le mécanisme des limites: c’est l’avantage de l’encapsulation.

4. Méthodes

les champs contiennent des données., Mais la possibilité de modifier les données est effectuée par des fonctions spéciales qui font partie de la classe: les méthodes.

Les classes JavaScript prennent en charge les méthodes d’instance et statiques.

4.1 méthodes D’Instance

Les méthodes D’Instance peuvent accéder aux données d’instance et les modifier. Les méthodes d’Instance peut appeler d’autres méthodes d’instance, ainsi que toute méthode statique.,

Par exemple, nous allons définir une méthode getName() qui renvoie le nom de la balise User catégorie:

Dans une méthode de classe, ainsi que dans le constructeur, this valeur est égale à l’instance de classe. Utiliser this pour accéder aux données d’instance: this.field, ou même appeler d’autres méthodes: this.method().,

nous allons ajouter une nouvelle méthode nameContains(str) qui a un paramètre et appelle une autre méthode:

nameContains(str) { ... } est une méthode de User de classe qui accepte un paramètre str. De plus, il exécute une autre méthode de l’instance this.getName() pour obtenir le nom de l’utilisateur.

Une méthode peut également être privé. Pour rendre la méthode privée préfixe son nom avec #.

prenons getName() méthode privée:

#getName() est une méthode privée., À l’intérieur de la méthode nameContains(str) vous appelez une méthode privée telle manière: this.#getName().

étant privé,#getName() ne peut pas être appelé en dehors du corps de classeUser.

4.2 Getters et setters

le getter et le setter imitent le champ normal, mais avec plus de contrôle sur la façon dont le champ est accédé et modifié.

La lecture est exécutée sur une tentative d’obtenir la valeur du champ, tandis que le setter sur une tentative de définir une valeur.,

Pour vous assurer que le name propriété de la balise User ne peut pas être vide, laisser envelopper le domaine privé #nameValue dans un getter et setter:

get name() {...} getter est exécutée lorsque vous accéder à la valeur du champ: user.name.

4.3 méthodes Statiques

Les méthodes statiques sont des fonctions attachées directement à la classe. Ils détiennent la logique liée à la classe, plutôt qu’à l’instance de la classe.,

pour créer une méthode statique, utilisez le mot-clé spécialstaticsuivi d’une syntaxe de méthode régulière:static myStaticMethod() { ... }.

lorsque vous travaillez avec des méthodes statiques, il y a 2 règles simples à retenir:

  1. Une méthode statique peut accéder aux champs statiques
  2. Une méthode statique ne peut pas accéder aux champs d’instance.

par exemple, créons une méthode statique qui détecte si un utilisateur avec un nom spécifique a déjà été pris.,

isNameTaken() est une méthode statique qui utilise la statique du domaine privé User.#takenNames pour vérifier les prises noms.

5. Héritage: étend

Les classes en JavaScript prennent en charge l’héritage unique en utilisant le mot-clé extends.

Dans l’expression class Child extends Parent { } le Child de classe hérite de Parent le constructeur, des champs et des méthodes.

Par exemple, nous allons créer une nouvelle classe enfant ContentWriter qui étend la classe parent User.,

ContentWriter hérite de la balise User le constructeur, la méthode getName() et le champ name. Ainsi, la balise ContentWriter classe déclare un nouveau champ posts.

notez que les membres privés d’une classe parent ne sont pas hérités par la classe enfant.

5.1 constructeur Parent: super() dans constructor ()

Si vous souhaitez appeler le constructeur parent dans une classe enfant, vous devez utiliser la fonction spécialesuper() Disponible dans le constructeur enfant.,

Par exemple, nous allons faire ContentWriter appel du constructeur le constructeur parent de User, ainsi que d’initialiser les postes le terrain:

super(name) à l’intérieur de la classe enfant ContentWriter exécute le constructeur de la classe parent User.

notez qu’à l’intérieur du constructeur enfant, vous devez exécutersuper() avant d’utiliser le mot-cléthis. Appeler super() s’assure que le constructeur parent initialise l’instance.,

class Child extends Parent { constructor(value1, value2) { // Does not work! this.prop2 = value2; super(value1); }}

5.2 instance Parent: super dans les méthodes

Si vous souhaitez accéder à la méthode parent à l’intérieur d’un enfant de la méthode, vous pouvez utiliser le raccourci super.

getName() de la classe enfant ContentWriter accède à la méthode super.getName() directement à partir de la classe parent User.

Cette fonctionnalité est appelée remplacement de méthode.

notez que vous pouvez également utilisersuper avec des méthodes statiques pour accéder aux méthodes statiques du parent.

6., Object type checking: instanceof

object instanceof Class is the operator that determines if object is an instance of Class.

Let’s see instanceof operator in action:

user is an instance of User class, user instanceof User evaluates to true.

The empty object {} is not an instance of User, correspondingly obj instanceof User is false.,

instanceof est polymorphe: l’opérateur détecte un enfant en tant qu’instance de la classe parente.

writer est une instance de la classe enfant ContentWriter. L’opérateur writer instanceof ContentWriter donne true.

En même temps ContentWriter est un enfant de la classe des User. Donc writer instanceof User donne true ainsi.

Que Faire si vous souhaitez déterminer la classe exacte de l’instance?, Vous pouvez utiliser la balise constructor propriété et de comparer directement avec la classe:

writer.constructor === ContentWriter; // => truewriter.constructor === User; // => false

7. Classes et prototypes

je dois dire que la syntaxe de classe en JavaScript fait un excellent travail pour abstraire de l’héritage prototypique. Pour décrire la syntaxe class, Je n’ai même pas utilisé le terme prototype.

Mais les classes sont construites au-dessus de l’héritage prototypique. Chaque classe est une fonction et crée une instance lorsqu’elle est invoquée en tant que constructeur.

Les deux extraits de code suivants sont équivalents.,

la version de la classe:

la version utilisant prototype:

la syntaxe de la classe est beaucoup plus facile à travailler si vous connaissez le mécanisme d’héritage classique des langages Java ou Swift.

de toute façon, même si vous utilisez la syntaxe de classe en JavaScript, je vous recommande d’avoir une bonne compréhension de l’héritage prototypique.

8. Disponibilité des fonctionnalités de classe

les fonctionnalités de classe présentées dans cet article sont réparties dans ES2015 et les propositions au stade 3.,

fin 2019, les fonctionnalités de classe sont réparties entre:

  • Les champs d’instance publics et privés font partie de la proposition de champs de classe
  • Les méthodes D’instance privées et les accesseurs font partie de la proposition de méthodes privées de classe
  • Les champs statiques publics et privés et les méthodes statiques

9. Conclusion

Les classes JavaScript initialisent les instances avec des constructeurs, définissent des champs et des méthodes., Vous pouvez attacher des champs et des méthodes même sur la classe elle-même en utilisant le mot-clé static.

L’héritage est réalisé en utilisantextends mot-clé: vous pouvez facilement créer une classe enfant à partir d’un parent. super le mot clé est utilisé pour accéder à la classe parent à partir d’une classe enfant.

pour tirer parti de l’encapsulation, rendez les champs et les méthodes privés pour masquer les détails internes de vos classes. Les champs privés et les noms de méthodes doivent commencer par #.,

Les classes en JavaScript deviennent de plus en plus pratiques à utiliser.

Que pensez-vous de l’utilisation de# pour préfixer les propriétés privées?