JavaScript est un langage multi-paradigmes qui vous permet d’écrire des programmes qui suivent des styles de programmation fonctionnels, orientés objet et impératifs.
Pour prendre en charge les modèles orientés objet, JavaScript dispose de classes. Parce que les comprendre est crucial, cet article est un guide sur ce que sont les classes JavaScript et comment les utiliser.
Table des matières
Que sont les classes en JavaScript ?
En programmation orientée objet, nous modélisons les systèmes comme des groupes d’objets qui interagissent les uns avec les autres. Pour fonctionner, les objets stockent les données dans des propriétés et effectuent des actions définies comme leurs méthodes. Une classe définit quelles propriétés et méthodes sont portées par des objets du même type. Les classes sont donc des modèles d’objets.
Terminologies utilisées en classe
Pour nous assurer que nous sommes sur la même longueur d’onde, voici une description des cours avec les termes clés que nous utiliserons dans cet article. Si vous êtes déjà familier avec la programmation orientée objet, vous pouvez passer à la section suivante.
❇️ Une classe est un plan pour un objet. Il fournit un modèle à partir duquel des objets de ce type peuvent être créés. La création d’un objet à partir du modèle fourni par la classe est appelée instanciation.
❇️ Un membre de classe est tout ce qui appartient à la classe. Il existe deux types de membres de classe : les méthodes et les propriétés.
❇️ Une propriété est un membre de classe dont le but principal est de stocker des valeurs. Il peut s’agir de valeurs simples telles que des nombres et des chaînes. Il peut également s’agir d’objets et de tableaux complexes.
❇️ Certaines propriétés ne sont accessibles qu’à l’intérieur de la classe et portent bien leur nom de propriétés privées. Certains sont accessibles aussi bien à l’intérieur qu’à l’extérieur de la classe. Ces propriétés sont appelées propriétés publiques.
❇️ Une méthode est une fonction définie à l’intérieur d’une classe. Il appartient donc à la classe et a accès aux propriétés publiques et privées. Comme les propriétés, nous avons également des méthodes publiques et des méthodes privées.
❇️ Certaines méthodes existent pour fournir une interface permettant au code extérieur à la classe d’interagir avec les propriétés à l’intérieur de la classe. Il existe deux groupes de méthodes pour cela : les getters et les setters. Les getters obtiennent les valeurs des propriétés de classe, tandis que les setters définissent les valeurs des propriétés de classe.
❇️ Certains membres sont statiques. Cela signifie qu’ils ne sont accessibles que sur la classe et ne sont pas accessibles sur les instances de classe.
En revanche, certains membres de classe ne sont pas statiques, ce qui signifie qu’ils ne sont accessibles que sur des instances de classe. Vous devez instancier la classe avant de pouvoir accéder à un membre non statique.
Lorsque vous instanciez une classe, une méthode spéciale est appelée pour configurer les propriétés de l’instance. Cette méthode est appelée fonction constructeur.
Instancier une classe expliquée
Nous utilisons le mot-clé new et le nom de la classe pour instancier une classe en JavaScript. Par exemple, instancions la classe Array.
const myArr = new Array()
Création de classes en JavaScript
Cette section discutera de la création d’une classe qui implémente tous les concepts que nous avons abordés dans le Section Terminologie. Nous le ferons dans une série d’exemples, où chaque exemple s’appuie sur les précédents.
Déclarer une classe vide
Pour déclarer une classe en JavaScript, nous utilisons le mot-clé class et donnons un nom à la classe. Ensuite, nous définissons le corps de la classe. Le corps est entouré d’accolades et contient tous les membres de la classe.
Voici un exemple de déclaration de classe avec un corps vide :
class Dog {
}Maintenant, vous pouvez instancier la classe comme suit et l’imprimer.
const pet = new Dog; console.log(pet);
Création de propriétés publiques
Les propriétés publiques sont définies avec un identifiant et une valeur facultative.
class Dog {
name = "Roy";
age;
}Ici, nous avons défini le nom avec une valeur de chaîne et l’âge sans valeur.
const pet = new Dog(); console.log(pet.name); console.log(pet.age);
Définir des méthodes publiques
Nous pouvons ajouter des méthodes à notre classe dans son corps. Nous définissons une méthode de la même manière que nous définirions une fonction. Cependant, nous omettons le mot-clé function.
class Dog {
name = "Roy";
age;
walk () {
console.log("Walking");
}
}Dans l’exemple ci-dessus, nous avons défini la méthode walk. Chaque instance de la classe Animal aura cette méthode.
const pet = new Dog(); pet.walk();
Accéder aux propriétés à partir des méthodes
En JavaScript, nous accédons généralement aux propriétés d’un objet à l’aide de l’opérateur point. Par exemple, si nous avions un objet nommé person et que nous voulions accéder à la propriété name, nous procéderions comme suit.
person.name
Cependant, si nous voulons accéder à une propriété depuis l’objet, nous utilisons le mot-clé this au lieu du nom de l’objet. Voici un exemple :
this.name
Le mot-clé this fait référence à l’objet. Ainsi, si nous voulions accéder aux propriétés de classe à partir des méthodes de classe, nous utiliserions cette syntaxe.
Création de propriétés privées
Supposons que nous souhaitions que les propriétés name et age que nous avons définies précédemment soient privées. Nous redéfinirions la classe comme suit :
class Dog {
#name = "Roy";
#age;
walk () {
console.log("Walking");
}
}Comme vous pouvez le constater, les propriétés privées sont spécifiées à l’aide du signe dièse. Si vous essayiez d’y accéder, vous rencontreriez des erreurs.
const dog = new Dog(); dog.#name
Création de méthodes Getter et Setter
Désormais, les propriétés name et age de la classe sont privées. Par conséquent, ils ne sont accessibles que par les méthodes internes à la classe.
Si nous voulons permettre au code en dehors de la classe d’accéder à ces propriétés, nous définissons des getters et des setters. Faisons cela pour la propriété name.
class Dog {
#name = "Roy";
#age;
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
walk () {
console.log("Walking");
}
}Avec la classe définie ci-dessus, vous pouvez définir le nom et l’afficher à l’aide du code ci-dessous :
const pet = new Dog(); // Setting the name pet.name = "Rex"; // Getting the name console.log(pet.name);
Création de méthodes privées
Comme les propriétés privées, les méthodes privées sont précédées du signe dièse. Par conséquent, déclarer une méthode privée ressemblerait à ceci :
class Dog {
#name = "Roy";
#age;
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
#increaseAge() {
this.#age ++;
}
#decreaseAge () {
this.#age --;
}
walk () {
console.log("Walking");
}
}Si vous essayiez d’accéder à ces méthodes depuis l’extérieur de la classe, cela ne fonctionnerait pas.
const pet = new Dog(); pet.#increaseAge();
Création d’une méthode constructeur
Vous pouvez également définir la méthode constructeur. Cette méthode sera automatiquement appelée chaque fois que vous instancierez une nouvelle classe. La méthode constructeur peut être utilisée pour initialiser les propriétés. Dans cet exemple, nous initialiserons l’âge et le nom avec les arguments fournis par l’utilisateur lors de l’instanciation.
class Dog {
#name;
#age;
constructor (name = "Dog", age = 0) {
this.#name = name;
this.#age = age;
}
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
#increaseAge() {
this.#age ++;
}
#decreaseAge () {
this.#age --;
}
walk () {
console.log("Walking");
}
}Lorsque nous instancions notre classe, nous pouvons fournir un nom et un âge.
const pet = new Dog('Roy', 3);
console.log(pet.name);
Création de propriétés et de méthodes statiques
Comme mentionné, les membres statiques sont accessibles sans instancier la classe au préalable. Dans l’exemple ci-dessous, nous allons créer une propriété et une méthode statiques.
class Dog {
#name;
#age;
static genus = "Canis";
constructor (name = "Dog", age = 0) {
this.#name = name;
this.#age = age;
}
static bark() {
console.log("Woof");
}
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
#increaseAge() {
this.#age ++;
}
#decreaseAge () {
this.#age --;
}
walk () {
console.log("Walking");
}
}Désormais, vous pouvez accéder à la propriété et à la méthode statiques sans instanciation.
console.log(Dog.genus); Dog.bark();
Héritage
Les classes peuvent hériter des propriétés d’autres classes. Une classe qui hérite des membres d’une autre classe est appelée une superclasse, tandis que la classe dont elle hérite des membres est la classe ou la sous-classe de base.
Pour créer une superclasse en JavaScript, nous utilisons le mot-clé extends. Voici un exemple où nous héritons de la classe Dog.
class Rottweiler extends Dog {
constructor (name, age) {
super(name, age);
this.breed = 'rottweiler';
}
}Comme vous pouvez le constater, le cours est en grande partie le même qu’avant. Cependant, à l’intérieur du constructeur, nous avons appelé la super fonction. Le super mot-clé fait référence au constructeur de la classe de base. Par conséquent, nous avons appelé le constructeur de la classe de base dans notre superclasse, en lui transmettant son nom et son âge.
const myPet = new Rottweiler(); console.log(myPet);
Conclusion
Dans cet article, nous avons couvert les cours. Nous avons expliqué ce qu’ils sont, les membres qu’ils peuvent détenir et les différentes classifications des membres. Ensuite, nous avons illustré tout cela avec des exemples.
Ensuite, vous souhaiterez peut-être lire les questions d’entretien de programmation orientée objet.