Comment utiliser les classes JavaScript

En 2015, la norme ECMAScript 6 (ES6) a introduit des classes. Apprenez tout sur eux

En 2015, la norme ECMAScript 6 (ES6) a introduit des classes.

JavaScript a une manière assez rare d'implémenter l'héritage: l'héritage prototypique.Héritage prototypique, bien qu'à mon avis génial, est différente de l'implémentation de l'héritage dans la plupart des autres langages de programmation populaires, qui est basée sur les classes.

Les personnes venant de Java ou Python ou d'autres langages avaient du mal à comprendre les subtilités de l'héritage prototypique, alors le comité ECMAScript a décidé de saupoudrer du sucre syntaxique en plus de l'héritage prototypique afin qu'il ressemble à la façon dont l'héritage basé sur les classes fonctionne dans d'autres implémentations populaires.

Ceci est important: JavaScript sous le capot est toujours le même, et vous pouvez accéder à un prototype d'objet de la manière habituelle.

Une définition de classe

Voici à quoi ressemble une classe.

class Person {
  constructor(name) {
    this.name = name
  }

hello() { return 'Hello, I am ’ + this.name + ‘.’ } }

Une classe a un identifiant, que nous pouvons utiliser pour créer de nouveaux objets en utilisantnew ClassIdentifier().

Lorsque l'objet est initialisé, leconstructorméthode est appelée, avec tous les paramètres passés.

Une classe a également autant de méthodes qu'elle en a besoin. Dans ce cashelloest une méthode et peut être appelée sur tous les objets dérivés de cette classe:

const flavio = new Person('Flavio')
flavio.hello()

Héritage de classe

Une classe peut étendre une autre classe et les objets initialisés à l'aide de cette classe héritent de toutes les méthodes des deux classes.

Si la classe héritée a une méthode avec le même nom que l'une des classes supérieures dans la hiérarchie, la méthode la plus proche a la priorité:

class Programmer extends Person {
  hello() {
    return super.hello() + ' I am a programmer.'
  }
}

const flavio = new Programmer(‘Flavio’) flavio.hello()

(le programme ci-dessus imprime "Bonjour, je suis Flavio. Je suis un programmeur.”)

Les classes n'ont pas de déclarations de variables de classe explicites, mais vous devez initialiser n'importe quelle variable dans le constructeur.

Dans une classe, vous pouvez référencer la classe parent appelantsuper().

Méthodes statiques

Normalement, les méthodes sont définies sur l'instance, pas sur la classe.

Les méthodes statiques sont exécutées sur la classe à la place:

class Person {
  static genericHello() {
    return 'Hello'
  }
}

Person.genericHello() //Hello

Méthodes privées

JavaScript n'a pas de méthode intégrée pour définir des méthodes privées ou protégées.

Il existe des solutions de contournement, mais je ne les décrirai pas ici.

Getters et setters

Vous pouvez ajouter des méthodes préfixées pargetousetpour créer un getter et un setter, qui sont deux morceaux de code différents qui sont exécutés en fonction de ce que vous faites: accéder à la variable ou modifier sa valeur.

class Person {
  constructor(name) {
    this._name = name
  }

set name(value) { this._name = value }

get name() { return this._name } }

Si vous n'avez qu'un getter, la propriété ne peut pas être définie et toute tentative de le faire (en dehors du constructeur, qui définit la valeur lorsque vous initialisez un nouvel objet avec cette classe) sera ignorée:

class Person {
  constructor(name) {
    this._name = name
  }

get name() { return this._name } }

Si vous n'avez qu'un setter, vous pouvez changer la valeur mais pas y accéder de l'extérieur:

class Person {
  constructor(name) {
    this._name = name
  }

set name(value) { this._name = value } }

Les getters et les setters sont très utiles lorsque vous souhaitez exécuter du code lors de la modification de la valeur de la propriété, ou si vous souhaitez créer une propriété «calculée». Vous pouvez modifier les valeurs que vous renvoyez à l'aide d'un getter.

Vous pouvez également exécuter du code, comme la connexion à la console ou à un fichier lorsqu'une valeur est modifiée.

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: