Programmation orientée objet en JavaScript

La programmation orientée objet (POO) fait référence à l’utilisation de morceaux de code autonomes pour développer des applications. Nous appelons ces éléments « Objet », mieux connus sous le nom de « Classe » dans la plupart des langages de programmation POO. Nous utilisons des objets comme blocs de construction pour nos applications.
 
 
Construire des applications avec des objets nous permet d’adopter certaines techniques utiles, à savoir, Héritage (les objets peuvent hériter des caractéristiques d’autres objets), Polymorphisme (les objets peuvent partager la même interface – alors que leur implémentation sous-jacente peut différer), et Encapsulation (chaque objet est responsable d’une tâche spécifique).

Les classes et objets en JavaScript

Classe :

JavaScript est un langage basé sur un prototype qui ne contient aucune instruction de classe, telle que celle trouvée en C++ ou en Java. Ceci est parfois déroutant pour les programmeurs habitués aux langages avec l’instruction « CLASS ». Au lieu de cela, JavaScript utilise des fonctions en tant que classes. Définir une classe est aussi simple que définir une fonction. Dans l’exemple ci-dessous, nous définissons une nouvelle classe appelée Student.

function Student() { }

 

Objet (instance de classe)

Pour créer une nouvelle instance d’objet obj, nous utilisons l’instruction « new obj », en affectant le résultat (de type obj) à une variable pour y accéder ultérieurement.

Dans l’exemple ci-dessous, nous définissons une classe nommée Student et nous créons deux instances (student1 et student2).

function Student() { }
var student1 = new Student();
var student2 = new Student();

 

Le constructeur

Le constructeur est appelé au moment de l’instanciation (le moment où l’instance d’objet est créée). Le constructeur est une méthode de classe. En JavaScript, une fonction sert de constructeur d’un objet. Donc, il n’est pas nécessaire de définir explicitement un constructeur. Chaque action déclarée dans une classe est exécutée au moment de l’instanciation.

Le constructeur permet de définir les propriétés de l’objet ou d’appeler des méthodes pour préparer l’objet à l’utilisation. L’ajout de méthodes de classe et de leurs définitions s’effectue à l’aide d’une syntaxe différente.

Dans l’exemple ci-dessous, le constructeur de la classe Student affiche une alerte lorsque la classe Student est instanciée.

function Student() {
  alert('Student instantiated');
}

var student1 = new Student();
var student2 = new Student();

 

Propriété (attribut d’objet)

Les propriétés sont des variables contenues dans la classe; chaque instance de l’objet a ces propriétés. Les propriétés doivent être définies dans la classe afin que l’héritage fonctionne correctement.

Pour utiliser les propriétés d’une classe, on utilise le mot-clé « this », qui fait référence à l’objet actuel. L’accès (en lecture ou en écriture) à une propriété en dehors d’une classe s’effectue avec la syntaxe suivante: « instance.propriété » c’est la même syntaxe que celle utilisée dans C++ et Java. (Dans une classe, la syntaxe « this.propriété » est utilisée pour obtenir ou définir la valeur d’une propriété.)

Dans l’exemple ci-dessous, nous définissons la propriété « age » pour la classe Student et la définissons à l’instanciation.

function Student(age) {
  this.age = age;
  alert('Student instantiated');
}

var student1 = new Student(22);
var student2 = new Student(35);

//afficher l'age de student1
alert('student1 a ' + student1.age); // student1 a 22

 

Les méthodes

Les méthodes suivent la même logique que les propriétés; Appeler une méthode revient à accéder à une propriété, mais vous ajoutez des parenthèses () à la fin du nom de la méthode, éventuellement avec des arguments. Pour définir une méthode, affectez une fonction à une propriété nommée « prototype » d’une classe.

Dans l’exemple ci-dessous, nous définissons et utilisons la méthode sayWelcom() pour la classe Student.

function Student(age) {
  this.age = age;
  alert('Student instantiated');
}

Student.prototype.sayWelcom = function()
{
  alert ('Welcom to WayToLearnX.com');
};

var student1 = new Student(22);
var student2 = new Student(35);

// Appel de la méthode sayWelcom
student1.sayWelcom();        // Welcom to WayToLearnX.com