Université Sidi Mohammed Ben Abdellah Filière: ISI S4
Faculté Poly Disciplinaire -Taza JavaScript
Séquence 7: L'Orienté Objet en JavaScript
1. Introduction
JavaScript est un langage de programmation orientée objet, mais il s'agit non pas d'un langage à
classes, mais d'un langage à prototypes. Dans ce type de programmation, on ne crée pas tout d'abord
une classe abstraite, qu'on instancie ensuite dans des objets concrets ; on commence par définir un
prototype, qui est directement instancié et peut être manipulé, avant de le cloner.
Un objet, en informatique, est un ensemble cohérent de données et de fonctionnalités qui
fonctionnent ensemble. En effet, un objet en JavaScript est un conteneur qui peut stocker plusieurs
variables qu’on appelle propriétés. Lorsqu’une propriété contient une fonction en valeur, on l'appelle
alors une méthode. Un objet est donc un conteneur qui possède un ensemble de propriétés et de
méthodes cohérents.
Les objets JavaScript sont primordiaux pour plusieurs raisons :
Ils aident à structurer et à organiser le code, en le décomposant en éléments gérables.
Ils modélisent les choses et les systèmes du monde réel, ce qui rend le code plus intuitif.
Ils permettent de réutiliser le code, ce qui permet de gagner du temps et d'améliorer
l'efficacité.
2. Création simple d'un objet
Le JavaScript dispose d’objets natifs (objets prédéfinis) qui possèdent des propriétés et des méthodes
qu’on peut directement utiliser et nous donne également la possibilité de définir nos propres objets.
Comme JavaScript se base sur l'utilisation des prototypes, il est possible de créer directement des
objets, grâce aux mots-clefs new Object.
Exemple:
let myObject = new Object ;
myObject.message="Hello !" ;
myObject.display=function(){
alert(this.message) ;
}
myObject.display(); //Hello !
La déclaration précédente définit l'objet myObject, lui attache une propriété (message) et une
méthode (display) que l'on appelle ensuite. Ainsi, la méthode est associée à cet objet uniquement,
et il n'y a pas de risque que sa définition écrase une autre définition qui serait donnée pour un autre
objet.
3. Création littéral d'un objet
La technique la plus basique dans la création d'un objet est l'utilisation d'objet littéral (voir séquence
4) quoiqu'elle ne fonctionne pas pour les navigateurs très anciens (Netscape jusqu'à la version 3 et
Internet Explorer jusqu'à la version 4).
A. EL OUAAZIZI Page 1/10
Université Sidi Mohammed Ben Abdellah Filière: ISI S4
Faculté Poly Disciplinaire -Taza JavaScript
Si on reprend le code précédent, grâce à la technique d'objet littéral il s'écrira:
let myObject = {
message:"Hello !",
display:function(){
alert(this.message);
}
}
myObject.display() ; //Hello !
Cela permet de ne pas avoir à répéter le nom de l'objet défini, réduit donc les risques d'erreur et
facilite la maintenance et la reprise ultérieure du code. Attention, dans ce cas, les champs sont
séparées par des virgules et non des points-virgules et dans la définition des champs on utilise : et
non des affectations =.
On peut supprimer une propriété existante à l'aide de l'opérateur delete. Par exemple l'instruction
delete myObjet.message supprime la propriété chaine de myObject.
On peut créer un nouveau objet (instance) à partir d'un objet existant (prototype) grâce à La fonction
newObject.create(prototypeObject).
Exemple:
let myObject = {
message:"Hello !",
display:function()
{
alert(this.message);
}
}
myObject.display() ; //Hello !
console.log(myObject);
delete myObject.message; //suppression de la propriété message
console.log(myObject);
let newObject=Object.create(myObject); //création d'un nouvel objet newObject
newObject.say='welocome'; //Ajout de la propriété say
console.log(newObject);
4. Création des objets à l'aide d'une fonction constructeur
JavaScript offre une manière assez élégante pour la définition des objets qui repose sur les propriétés
des fonctions. En effet en JavaScript, les fonctions sont des objets de type function. À ce titre, elles
possèdent comme tout objet des propriétés et des méthodes (qui sont donc des fonctions appliquées
à des fonctions...).
Une fonction constructeur d’objets est une fonction qui va nous permettre de créer des objets
semblables. Pour construire des objets à partir d’une fonction constructeur, on doit suivre deux
étapes:
Définir la fonction constructeur
Créer l'objet par appelle de cette fonction en utilisant le mot clef new.
Exemple :
<h1> Object create by using constructor function </h1>
<p id='p1'></p>
<p id='p2'></p>
<p id='p3'></p>
<script>
//Définition de la fonction constructeur User()
function User(n, a, m){
A. EL OUAAZIZI Page 2/10
Université Sidi Mohammed Ben Abdellah Filière: ISI S4
Faculté Poly Disciplinaire -Taza JavaScript
this.name = n;
this.age = a;
this.mail = m;
this.hello = function(){
alert('Hello, I am '+this.name[0] + ',I am '+ this.age+' years old');
}
}
let Iyed=new User(['Iyed','Tazi'], 29,'[email protected]');
Iyed.hello();//appel de la méthode hello
/*On accède aux valeurs des propriétés de l'objet crée qu'on affiche dans
les paragraphes de notre fichier HTML*/
document.getElementById('p1').innerHTML = 'Firstname : ' + Iyed['name'][1];
document.getElementById('p2').innerHTML = 'Lastname: ' + Iyed['name'][0];
document.getElementById('p3').innerHTML = 'Age : ' + Iyed['age'];
</script>
Tout ce qui commence par this est défini comme une propriété ou une méthode publique de la
fonction, donc est appelable de l'extérieur.
Dans le cas présent, notre code n’est pas optimal puisqu’en utilisant notre constructeur plusieurs fois
on va copier à chaque fois la méthode hello() qui est identique pour chaque objet. L’idéal serait de
ne définir notre méthode qu’une seule fois et que chaque objet puisse l’utiliser lorsqu’il le souhaite.
Pour cela, nous allons recourir à ce qu’on appelle héritage ou prototypage.
4.1. Héritage
Lorsqu’on créé une fonction, le JavaScript lui ajoute automatiquement une propriété prototype qui
ne va être utile que lorsque la fonction est utilisée comme constructeur, c’est-à-dire lorsqu’on l’utilise
avec la syntaxe new.
Le contenu de la propriété prototype d’un constructeur est partagé par tous les objets créés à partir
de ce constructeur. Comme cette propriété est un objet, on peut lui ajouter des propriétés et des
méthodes que tous les objets créés à partir du constructeur vont partager. Cela permet l’héritage en
orienté objet JavaScript.
Supposons notre prototype User défini comme précédemment. On peut définir un nouveau
prototype, qui pourrait être Iyed, sous la forme :
<script>
//Définition de la fonction constructeur User()
function User(n, a, m){
this.name = n;
this.age = a;
this.mail = m;
}
//Ajouter la méthode hello à l'aide de l'objet prototype
User.prototype.hello = function(){
alert('Hello, I am '+this.name[0]+', I am '+ this.age + ' years old');
}
let Iyed=new User(['Iyed','Tazi'], 29,'[email protected]');
Iyed.hello();//appel de la méthode hello
</script>
En utilisant User.prototype, nous avons ajouté une méthode hello() à toutes les instances créées
avec ce constructeur. Cela montre comment les méthodes partagées peuvent être définies de manière
efficace.
A. EL OUAAZIZI Page 3/10
Université Sidi Mohammed Ben Abdellah Filière: ISI S4
Faculté Poly Disciplinaire -Taza JavaScript
4.2. Le mot this
Le mot-clef this, que nous avons déjà eu l'occasion de rencontrer, a un comportement en apparence
déroutant. Il fait en effet référence au contexte dans lequel une fonction est appelée.
Exemple:
let User = {
firstname: 'Iyed',
lastname: 'Tazi',
age: '29',
hello : function(){
return this.firstname;
}
};
alert(User.hello());
let myVar= User.hello;
alert(myVar());
Dans cet exemple, le premier alert renvoie "Iyed " et le second renvoi undefined. Dans le premier la
fonction hello() est appelée en tant que méthode de l'objet User, son contexte est donc celui de
l'objet appelant User et this.firstname renvoie à User.firstname. Dans le second cas, la fonction
myVar est appelée au niveau global, donc le contexte est celui de l'objet global window.
this.firstname renvoie donc à window.firstname, qui n'est pas défini.
Un moyen existe pour spécifier l'objet auquel this doit référer c'est la méthode bind de la propriété
function.prototype, qui est héritée par toute fonction.
Il suffit donc de remplacer let myVar=User.hello()dans le code précèdent par:
let myVar=User.Hello.bind(User);
5. Création des objets à l'aide des classes
Les classes en JavaScript offrent une approche puissante pour organiser et structurer le code en
utilisant le paradigme de programmation orientée objet (POO). Elles permettent d’organiser et de
structurer le code, facilitant ainsi la lisibilité, la réutilisabilité, la maintenabilité et la conception de
logiciels modulaires.
Une classe définit les propriétés (variables) et les méthodes (fonctions) qui seront présentes dans les
objets créés à partir de cette classe. Elle agit comme un « moule » à partir duquel nous pouvons
créer des instances d’objets ayant des caractéristiques et des comportements spécifiques.
5.1. Définition d'une classe
Une classe est définie à l'aide du mot-clef class. Contrairement à la définition de fonctions, une classe
doit être définie avant d'être instanciée. Une instance de classe (objet) est une copie concrète de la
classe avec ses propres valeurs de propriétés et sa capacité à appeler les méthodes définies dans la
classe. Lorsque vous créez une instance d’une classe, vous utilisez le mot-clé new suivi du nom de la
classe et des arguments nécessaires pour le constructeur de la classe. Cela crée une nouvelle instance
unique de la classe avec ses propres caractéristiques.
Syntaxe :
//Définition de classe
class MaClasse {
A. EL OUAAZIZI Page 4/10
Université Sidi Mohammed Ben Abdellah Filière: ISI S4
Faculté Poly Disciplinaire -Taza JavaScript
prop; //les propriétés peuvent être déclarées ou pas
//elles peuvent être initialisées
constructor(…) {
this.prop=… ;…
}
methode() {
//Code de la méthode
}
}
//Définition d'une instance de classe (objet)
let monObjet = new maClasse(…) ;
Constructor() est un nom réservé. Le constructeur d’une classe Constructor() sert à initialiser les
propriétés d’un objet lors de sa création. C’est une méthode spéciale qui est automatiquement
appelée lorsque vous créez une nouvelle instance de la classe. Il est utilisé pour initialiser les
propriétés de l’objet et effectuer d’autres opérations nécessaires avant que l’objet ne soit utilisé.
Dans le constructeur, nous pouvons définir les propriétés de l’objet à l’aide du mot-clé this.
Exemple:
class Voiture {
constructor(modele, nombreRoues) {
this.marque=modele ;
this.nombreRoues=nombreRoues ;
}
demarre() {
alert ("Vroum!") ;
}
}
let maPetiteVoiture = new Voiture("Avtoros Shaman", 8) ;
alert(maPetiteVoiture.marque +' '+ maPetiteVoiture.nombreRoues);
Attention, il n'y a pas de virgule ou de point-virgule entre les différents éléments constitutifs de la
déclaration. Par exemple, il n'y a pas de virgule entre le constructeur et la définition de la méthode,
car il ne s'agit pas d'un littéral objet.
5.2. Propriétés et méthodes
Les propriétés et les méthodes de classe privées sont des propriétés et des méthodes qui ne peuvent
être appelées qu'à l'intérieur de la classe. Il faut les faire précéder du symbole # pour qu'elles
deviennent privées. Le symbole # fait partie du nom.
class Voiture {
constructor(modele, nombreRoues) {
this.marque=modele ;
this.nombreRoues=nombreRoues ;
}
attacheCaravane//propriété publique simplement déclarée (vaut undefined)
autoRadio = false;//propriété publique avec valeur par défaut
#codeAlarme = 1234;//propriété privée
demarre() {
alert ("Vroum!") ;
}
}
let maPetiteVoiture = new Voiture("Avtoros Shaman", 8);
A. EL OUAAZIZI Page 5/10
Université Sidi Mohammed Ben Abdellah Filière: ISI S4
Faculté Poly Disciplinaire -Taza JavaScript
maPetiteVoiture.demarre(); // Vroum!
alert(maPetiteVoiture.#codeAlarme); // Uncaught SyntaxError
Il est possible de définir des propriétés et des méthodes dites statiques. Ces propriétés et méthodes
sont propres à la classe et peuvent être utilisées au sein de celle-ci, mais ne peuvent pas être
appliquées à une instance en particulier.
Exemple:
class Voiture {
static carburant="Essence";
constructor(modele, nombreRoues) {
this.marque=modele ;
this.nombreRoues=nombreRoues ;
}
attacheCaravane //propriété publique simplement déclarée (vaut undefined)
autoRadio = false;//propriété publique avec valeur par défaut
#codeAlarme = 1234;//propriété privée
demarre() {
alert ("Vroum!");
};
}
let maPetiteVoiture = new Voiture("Avtoros Shaman", 8);
maPetiteVoiture.demarre(); // Vroum!
alert(maPetiteVoiture.carburant); // Undefined
alert(Voiture.carburant); // Essence
5.3. Le concept d'héritage
L'héritage est un concept important en programmation orientée objet qui permet de créer une classe
basée sur une autre classe existante. Une classe héritant (ou sous-classe) hérite les propriétés et les
méthodes de la classe parente (ou superclasse).
L’un des principaux avantages des classes en JavaScript est la possibilité d’utiliser l’héritage pour créer
des classes enfants qui héritent des propriétés et des méthodes d’une classe parente. Cela permet de
réutiliser du code et de créer une hiérarchie de classes.
Exemple:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old`);
}
}
/*créons une classe enfant appelée Employee qui hérite des propriétés et des méthodes de la
classe Person*/
class Employee extends Person {
constructor(name, age, position) {
super(name, age); // Appel du constructeur de la classe parente
this.position = position;
}
work() {
console.log(`${this.name} is working as an ${this.position}`);
A. EL OUAAZIZI Page 6/10
Université Sidi Mohammed Ben Abdellah Filière: ISI S4
Faculté Poly Disciplinaire -Taza JavaScript
}
}
Dans cet exemple, la classe Employee étend la classe Person à l'aide du mot-clé extends et ajoute
une propriété position spécifique aux employés. Le constructeur de la classe Employee utilise
également super(name, age) pour appeler le constructeur de la classe parente (Person) et initialiser
les propriétés name et age.
Maintenant, nous pouvons créer une instance de la classe Employee et accéder aux méthodes
héritées de la classe Person, ainsi qu'à la méthode spécifique à la classe Employee
let employee = new Employee("Anastasia", 36, "Astronaut");
employee.greet(); // Hello, my name is Anastasia and I'm 36 years old.
employee.work(); // Anastasia is working as an Astronaut.
Cela démontre comment l’héritage permet à la classe Employee d'étendre les fonctionnalités de la
classe Person tout en bénéficiant de ses propriétés et méthodes déjà définies. Cela facilite la
réutilisation du code et la gestion des différents types d'objets dans votre application.
5.4. Le concept d’encapsulation
L’encapsulation est un autre concept important lié aux classes. Dans le contexte de la programmation
orientée objet, l’encapsulation consiste à regrouper des attribues et des méthodes qui les manipulent
au sein d’une entité, appelée objet.
class Person {
#name;
#age;
constructor(name, age) {
this.#name = name;
this.#age = age;
}
getName() {
return this.#name;
}
setName(newName) {
this.#name = newName;
}
getAge() {
return this.#age;
}
setAge(newAge) {
if (newAge >= 0) {
this.#age = newAge;
}
}
}
Dans cette classe Person, les propriétés name et age sont définies en tant que variables privées. Elles
ne sont pas accessibles directement de l'extérieur de la classe.
Les méthodes getName() et getAge() (appelée getter) fournissent un moyen de récupérer
respectivement le nom et l'âge de la personne. Les méthodes setName() et setAge() (appelée
setter) fournissent un moyen de modifier respectivement le nom et l'âge de la personne.
Voici un exemple d’utilisation de la classe Person :
let person = new Person("John", 30);
A. EL OUAAZIZI Page 7/10
Université Sidi Mohammed Ben Abdellah Filière: ISI S4
Faculté Poly Disciplinaire -Taza JavaScript
console.log(person.getName()); // John
console.log(person.getAge()); // 30
person.setName("Jane");
person.setAge(25);
console.log(person.getName()); // Jane
console.log(person.getAge()); // 25
L’encapsulation nous permet ainsi de protéger les données de la personne et d’offrir des méthodes
pour y accéder et les modifier de manière contrôlée.
5.5. Le concept de polymorphisme
Le polymorphisme fait référence à la capacité d’un objet à prendre différentes formes ou à se
comporter différemment en fonction du contexte. Cela signifie qu’un même nom ou une même
méthode peut être utilisé(e) pour effectuer des actions différentes en fonction des objets auxquels il
s’applique.
class Person {
constructor(name) {
this.name = name;
}
introduce() {
console.log(`Hi, my name is ${this.name}.`);
}
}
class Student extends Person {
constructor(name, grade) {
super(name);
this.grade = grade;
}
introduce() {
console.log(`Hi, I'm ${this.name} and I'm in grade ${this.grade}.`);
}
}
class Teacher extends Person {
constructor(name, subject) {
super(name);
this.subject = subject;
}
introduce() {
console.log(`Hello, I'm ${this.name} and I teach ${this.subject}.`);
}
}
Dans cet exemple, nous avons une classe de base Person avec une méthode introduce() qui
permet à une personne de se présenter. Ensuite, nous avons deux classes qui héritent de Person:
Student et Teacher. Chaque classe enfant a sa propre implémentation de la méthode introduce()
pour représenter l'introduction spécifique à l'étudiant et au professeur.
Maintenant, nous pouvons créer des instances de différentes personnes et les traiter de manière
polymorphe:
let person1 = new Person("John");
let person2 = new Student("Alice", 9);
let person3 = new Teacher("Mr. Smith", "Mathematics");
A. EL OUAAZIZI Page 8/10
Université Sidi Mohammed Ben Abdellah Filière: ISI S4
Faculté Poly Disciplinaire -Taza JavaScript
person1.introduce(); // Hi, my name is John.
person2.introduce(); // Hi, I'm Alice and I'm in grade 9.
person3.introduce(); // Hello, I'm Mr. Smith and I teach Mathematics.
En résumé, le polymorphisme nous permet de traiter des objets de différentes classes héritant d’une
classe de base (comme Student et Teacher héritant de Person) de manière uniforme en utilisant
une interface commune. Cela nous permet de simplifier le code, de favoriser la réutilisabilité et de
permettre une gestion plus générique des objets dans une hiérarchie de classes.
6. Exercices
Exercice 1:
Soit le code HTML suivant:
<!DOCTYPE HTML>
<html>
<head>
<title>Déclaration d'objet</title>
<script type="text/javascript">
// ------------------------------
function Init()
{
}
// ------------------------------
</script>
</head>
<body onload="Init()">
<p><label for="champSaisie">Saisissez un nombre : </label><input
type="text" id="champSaisie"></p>
<p><input type="submit" onclick="test.affiche()" value="Effectuer le
calcul"/></p>
</body>
</html>
1. Donner le code de la fonction Init() sachant qu'elle doit :
créer simplement objet appelée test;
définir la méthode affiche() de cet objet, qui affiche dans une boîte alerte le contenu du
champ de saisie additionné de 4.
2. Redéfinir l'objet test de manière littérale.
Exercice 2:
Soit le code HTML suivant:
<!DOCTYPE HTML>
<html>
<head>
<title>Déclaration d'objet</title>
<meta name="author" content="Unknown" >
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<script type="text/javascript">
</script>
</head>
<body>
<p><label for="champSaisie">Saisissez un nombre : </label><input
type="text" id="champSaisie"></p>
<p><input type="submit" onclick="test.affiche();" value="Effectuer le
A. EL OUAAZIZI Page 9/10
Université Sidi Mohammed Ben Abdellah Filière: ISI S4
Faculté Poly Disciplinaire -Taza JavaScript
calcul"/></p>
</body>
</html>
Constructeur sans valeur par défaut
1- Déclarez un nouvel objet test, basé sur le prototype Test. Cet objet :
possède une propriété privée nommée ajout, égale à 4 ;
possède une méthode publique affiche(), qui affiche l'addition de la variable ajout avec
le contenu du champ de saisie dont l'id="champSaisie".
2- Tester en essayant d'accéder à la valeur d'ajout depuis l'extérieur de la définition de l'objet.
Constructeur avec valeurs par défaut
Modifiez le code précédent de manière à ce que Test prenne comme argument l'id du champ de
saisie d'une part, et la valeur de laquelle il faut augmenter le contenu du champ de saisie d'autre
part. Les valeurs par défaut doivent être respectivement "champSaisie" et 4.
Exercice 3:
Soit le code HTML suivant:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Classes</title>
<script>
</script>
</head>
<body>
<label for="nb1">Nombre 1: </label><input type="number" id="nb1"><br>
<label for="nb2">Nombre 2: </label><input type="number" id="nb2"><br>
<button id="btnadd">Addition</button><button
id="btnmult">Multiplication</button>
</body>
</html>
1. Définissez une classe, nommée Calcul, dont le constructeur prend deux nombres en paramètres,
et qui possède deux méthodes :
une méthode add(), qui affiche dans la console la somme des deux nombres ;
une méthode multiplie(), qui affiche dans la console la multiplication des deux nombres ;
2. Associez au click sur chacun des boutons un gestionnaire (appel de fonction):
lanceCalculAdd() au click sur le bouton "Addition"
lanceCalculMult() au click sur le bouton "Multiplication"
Chacun de ces gestionnaires crée une instance de Calcul en l'initialisant avec les valeurs lues dans
les champs, puis lance la méthode correspondante (par exemple add() dans le cas
de lanceCalculAdd()).
A. EL OUAAZIZI Page 10/10
