Vous êtes sur la page 1sur 7

Un « paradigme » de programmation est une façon d’approcher la programmation

informatique, c’est-à-dire une façon de voir (ou de construire) son code et ses différents
éléments.

Il existe trois paradigmes de programmation particulièrement populaires, c’est-à-dire trois


grandes façons de penser son code :
• La programmation procédurale ;
• La programmation fonctionnelle ;
• La programmation orientée objet.

Le JavaScript est un langage qui possède un fort potentiel pour la programmation orientée
objet (abrégée en POO).

Un objet, en informatique, est un ensemble cohérent de données et de fonctionnalités


qui vont fonctionner ensemble. Pour le dire très simplement, un objet en JavaScript est
un conteneur qui va pouvoir stocker plusieurs variables qu’on va appeler ici des
propriétés. Lorsqu’une propriété contient une fonction en valeur, on appelle alors la
propriété une méthode. Un objet est donc un conteneur qui va posséder un ensemble
de propriétés et de méthodes qu’il est cohérent de regrouper.

CREATION D OBJET LITTERAL

let utilisateur = {
/*nom, age et mail sont des propriétés de l'objet utilisateur
*La valeur de la propriété "nom" est un tableau*/
nom : ['Pierre', 'Giraud'],
age : 29,
mail : 'pierre.giraud@edhec.com',

noter le syntaxe de la fonction bonjour

bonjour: function(){
alert('Bonjour, je suis ' + this.nom[0] + ', j\'ai ' + this.age + ' ans');
}
};

alert(typeof utilisateur) ;

utilisateur.age=30 ; ( on a accedee a un attribut de l obj en modifiant sa val)

utilisateur.bonjour() ;

utilisateur.taille=170 ; (on a ajoute un attribut taille avec sa valeur a l obj)


utilisateur.prez = function ( ) {

alert('Bonjour, je suis ' + this.nom[0] +


', j\'ai ' + this.age + ' ans et je mesure ' + this.taille + 'cm');}

utilisateur.prez() ; (on a ajoute un fonction prez avec son code l obj)

*a noter que la declaration de fonction prez est la mm que la dec d une fonc anonyme

pour créer un objet, on commence par définir et initialiser une variable.

on dira que cette variable « est » un objet mais pour être tout à fait exact il faudrait
plutôt dire qu’elle stocke une valeur de type objet.

Pour nous assurer qu’on a bien créé un objet, on peut utiliser l’opérateur typeof qui
renvoie le type de valeur d’une variable. Sans surprise, c’est bien la valeur « object »
(objet en anglais) qui est renvoyée.

Les tableaux sont eux-mêmes avant tout des objets en JavaScript.

Chaque membre d’un objet est toujours composé d’un nom et d’une valeur qui sont
séparées par :. Les différents membres d’un objet sont quant-à-eux séparés les uns des
autres par des virgules (et non pas des points-virgules, attention !).

Nous pouvons créer des objets de 4 manières différentes en JavaScript. On va


pouvoir :
• Créer un objet littéral ;
• Utiliser le constructeur Object() ;
• Utiliser une fonction constructeur personnalisée ;
• Utiliser la méthode create().

1 UTILISER UN CONSTRUCTEUR OBJECT( )


Pour construire des objets à partir d’une fonction constructeur, nous allons devoir suivre
deux étapes : il va déjà falloir définir notre fonction constructeur et ensuite nous allons
appeler ce constructeur avec une syntaxe un peu spéciale utilisant le mot clefs new.
//Utilisateur() est une fonction constructeur pour créer obj utilisateur (noter l utilisation de
this)
par convention une majuscule au début du nom de la fonction afin de bien discerner nos
constructeurs des fonctions classiques dans un script.

function Utilisateur(n, a, m) {
this.nom = n;
this.age = a;
this.mail = m;

this.bonjour = function(){
alert('Bonjour, je suis ' + this.nom[0] + ', j\'ai ' + this.age + ' ans');
}
}

let pierre = new Utilisateur(['Pierre', 'Giraud'], 29, 'pierre.giraud@edhec.com');


let morice = new Utilisateur(['morice', 'careme'], 29, 'pie.giud@edhec.com');
on peut créer plusieur objets facilement
pierre.taille = 170; (ajouter att a l obj pierre)

l utilisation d un constructur est plus performant que la


creation litteral des obj
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 bonjour() qui est identique pour
chaque objet.
Ici, 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 des prototypes.

Le prototype en JavaScript orienté objet

Vous devez en effet savoir qu’il existe deux grands types de langages orientés objet : ceux
basés sur les classes, et ceux basés sur les prototypes.
une classe est un plan général qui va servir à créer des objets similaires. Une classe va
généralement contenir des propriétés, des méthodes et une méthode constructeur.
Dans les langages orientés objet utilisant des prototypes comme le JavaScript, tout est objet
et il n’existe pas de classes et l’héritage va se faire au moyen de prototypes.
je tiens à vous rappeler que les fonctions en JavaScript sont avant tout des objets
Lorsqu’on créé une fonction,
le JavaScript va automatiquement lui ajouter 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.
Cette propriété prototype possède une valeur qui est elle-même un objet. On parlera donc
de « prototype objet »
Par défaut, la propriété prototype d’un constructeur ne contient que deux propriétés : une
propriété constructor qui renvoie vers le constructeur contenant le prototype et une
propriété __proto__ qui contient elle-même de nombreuses propriétés et méthodes.
Lorsqu’on crée un objet à partir d’un constructeur, le JavaScript va également ajouter
automatiquement une propriété __proto__ à l’objet créé.
La propriété __proto__ de l’objet créé va être égale à la propriété __proto__ du constructeur
qui a servi à créer l’objet.
En fait, le contenu de la propriété prototype d’un constructeur va être partagé par tous les
objets créés à partir de ce constructeur. Et donc tous les objets créés à partir du constructeur
vont partager.Cela permet l’héritage en orienté objet JavaScript.
En l’occurrence, ici, les objets crées à partir du constructeur ne possèdent pas vraiment
les propriétés et les méthodes définies dans la propriété prototype du constructeur
mais vont pouvoir y accéder et se « partager » ces membres définis dans l’objet
prototype du constructeur.
Pour faire fonctionner cela en pratique, il faut se rappeler que la propriété prototype est un
objet et qu’on va donc pouvoir lui ajouter des propriétés et des méthodes comme pour tout
autre objet. Regardez plutôt l’exemple ci-dessous :
function Utilisatur(n,a,m) {
this.nom=n ;
this.age=a;
this.mail=m ;}
utilsateur.prototype.talle=170 ;
utilsateur.prototype.bonjour=function(){
alert(‘bonjouuuur’) ; } ;
let pierre= new Utilisateur([‘pierre’,’rara’],29,’pp@gmail,.com’) ;

Définir des propriétés et des méthodes dans le prototype d’un constructeur nous permet ainsi
de les rendre accessible à tous les objets créés à partir de ce constructeur sans que ces objets
aient à les redéfinir.
Pour avoir le code le plus clair et le plus performant possible, nous définirons donc
généralement les propriétés des objets (dont les valeurs doivent être spécifiques à
l’objet) au sein du constructeur et les méthodes (que tous les objets vont pouvoir
appeler de la même façon) dans le prototype du constructeur.

La chaine des prototypes ou chaine de prototypage et l’objet Object

Comment un objet peut-il accéder à une propriété ou à une méthode définie dans un autre
objet ?
Ainsi, lorsqu’on essaie d’accéder à un membre d’un objet, le membre en question sera
d’abord cherché dans l’objet puis dans sa propriété __proto__ s’il n’est pas trouvé
dans l’objet puis dans la propriété __proto__ de son constructeur s il n est pas
trouve on va aller chercher dans la propriété __proto__ du constructeur du
constructeur etc. jusqu’à remonter au constructeur Object().
On dit alors qu’on « remonte la chaine des prototypes ». A ce niveau, il faut savoir que tous les
objets en JavaScript descendent par défaut d’un objet de base qui s’appelle Object.

Cet objet est l’un des objets JavaScript prédéfinis et permet notamment de créer des objets
génériques vides grâce à la syntaxe new Object().

L’objet ou le constructeur Object() va être le parent de tout objet en JavaScript (sauf certains
objets particuliers créés intentionnellement pour ne pas dépendre d’Object) et également posséder
une propriété prototype.

Comprendre cela va nous permettre de créer des hiérarchies d’objets et notamment de


mettre en place un héritage en orienté objet JavaScript.

Mise en place d’une hiérarchie d’objets avec héritage en


JavaScript
on est capable de créer une hiérarchie d’objets avec des objets qui héritent des membres d’autres
objets.
L INTERET : Parfois, nous voudrons créer des types d’objets relativement proches. Plutôt que de
redéfinir un constructeur entièrement à chaque fois, il va être plus judicieux de créer un
constructeur de base qui va contenir les propriétés et méthodes communes à tous nos objets
puis des constructeurs plus spécialisés qui vont hériter de ce premier constructeur.
ces mécanismes sont au cœur du JavaScript et sont ce qui fait toute sa puissance.
Pour mettre en place un héritage ou plus exactement un système de délégation (qui est un
mot beaucoup plus juste que le terme « héritage » dans le cas du JavaScript), nous allons
toujours procéder en trois étapes :
1. On va déjà créer un constructeur qui sera notre constructeur parent ;
2. On va ensuite un constructeur enfant qui va appeler le parent ;
3. On va modifier la __proto__ de la propriété prototype de l’enfant pour qu’elle
soit égale au parent.
4.
function Ligne(longueur){
this.longueur = longueur;
}
Ligne.prototype.taille = function(){
document.getElementById('p1').innerHTML = 'Longueur : ' + this.longueur};

function Rectangle(longueur, largeur){


Ligne.call(this, longueur);
this.largeur = largeur;
}
Rectangle.prototype = Object.create(Ligne.prototype);
Rectangle.prototype.constructor = Rectangle;
Rectangle.prototype.aire = function(){
document.getElementById('p2').innerHTML =
'Aire : ' + this.longueur * this.largeur};

function Parallelepipede(longueur, largeur, hauteur){


Rectangle.call(this, longueur, largeur);
this.hauteur = hauteur;
}
Parallelepipede.prototype = Object.create(Rectangle.prototype);
Parallelepipede.prototype.constructor = Parallelepipede;
Parallelepipede.prototype.volume = function(){
document.getElementById('p3').innerHTML =
'Volume : ' + this.longueur * this.largeur * this.hauteur};

let geo = new Parallelepipede(5, 4, 3);


geo.volume();
geo.aire();
geo.taille();

Object 1

Dans ce script, nous définissons 3 constructeurs : Ligne(), Rectangle() et


Parallelepipede(). Ici, on veut que Rectangle() hérite de Ligne() et que
Parallelepipede() hérite de Rectangle()
Pour information, la méthode call() permet d’appeler une fonction rattachée à un objet
sur un autre objet. La méthode call() est une méthode prédéfinie qui appartient au
prototype de l’objet Function.
On l’utilise ici pour faire appel au constructeur Ligne() dans notre constructeur Rectangle().

Ensuite, on va créer un objet en utilisant le prototype de Ligne grâce à la méthode


create() qui est une méthode de l’objet Object() et on va assigner cet objet au
prototype de Rectangle.
Le prototype de Rectangle possède donc en valeur un objet créé à partir du prototype de
Ligne. Cela permet à Rectangle d’hériter des propriétés et méthodes définies dans le
prototype de Ligne.
Il nous reste cependant une chose à régler ici : il va nous falloir rétablir la valeur de la
propriété constructor de prototype de Rectangle car la ligne précédente a eu
pour effet de définir Rectangle.prototype.constructor comme étant égal à celui
de Ligne().
On ajoute finalement une méthode aire() au prototype de Rectangle.
Enfin, on crée un objet geo à partir du constructeur Parallélépipède(). Cet objet va
pouvoir utiliser les méthodes définies dans les prototypes de Parallélépipède(), de
Rectangle() et de Ligne() !