Presentation de la programmation orientée objet (p2o)

Dernière mise à jour le par pijaku .

Javascript - Présentation de la programmation orientée objet

Description

Voici un tutoriel qui vous expliquera pourquoi et comment programmer objet en javascript.

Pourquoi la programmation orientée objet

La programmation orientée objet n'est que peu utilisée en javascript, mais de nombreux langages l'utilisent (C++, Java, PHP...). La Programmation Orientée Objet (ou POO ou P2O) nous permet :

  • d'obtenir un code plus clair et plus facilement modifiable,
  • d'utiliser les classes pour plusieurs script.

Définitions

Qu'est ce qu'une classe?

Une classe est une structure. Elle détermine l'ensemble des propriétés qui composeront l'objet. Ainsi la programmation orientée objet permet de créer des modèles appelés classe.
Concrètement, une classe est une structure regroupant des variables et des fonctions. Chacune de ces fonctions aura accès aux variables de cette structure.

Dès que l'on utilise ce modèle (la classe) on dit que l'on crée un objet de cette classe.

Qu'est ce qu'un objet

On parle d'un objet en tant qu'instance d'une classe. Un objet possède les propriétés de la classe.
Un objet (comme une voiture) a des caractéristiques : une forme, une taille, une couleur etc.
Toutes les caractéristiques de ce modèle ("une forme, une taille, une couleur.") s'appellent membres.

Exemple

Je définis une classe appelée voiture. Dans cette classe, nous pouvons définir des propriétés : une marque, un modèle, une couleur, un kilométrage. Ces propriétés seront communes aux objets instances de cette classe. Dans l'exemple de la classe voiture, nous pouvons aussi bien instancier une Renault Mégane Verte de 121 000 Kms, qu'une Citroën DS noire de 325 002 Kms qu'une Ferrari 250 GTO bleue de 12 516 Kms...

En lignes de codes

<script language=javascript>
function clvoiture (){
// remarquez que l'on utilise function pour créer une classe et c'est pour cela 
// que je rajoute cl et ainsi présenter que c'est une classe ....

var modele;
var marque;
var couleur;
var kilometres;
}
</script>

Intégrer des déplacements

Imaginons que notre voiture soit en état de marche ...

Je veux bien que le modèle, la marque, la couleur (quoique) ne change pas lorsqu'on avance, mais les kilomètres... C'est ainsi qu'il faut une fonction, appelée méthode, pour ajouter des kilomètres au compteur.

Exemple codé

<script language=javascript>
function mclavance (durée, vitesse)
// et oui (faisons simple : vitesse en km/h et la durée en h)
{
this.kilometres += durée * vitesse;
}

function clvoiture (){
var modele;
var marque;
var couleur;
var kilometres;
var avance ;
this.avance = mclavance; // pas de parenthèse ici...
}
</script>

Une classe, je connais, mais comment l'utiliser

Sachez que vous faites des classes depuis que vous faites du javascript.
Et oui n'avez vous jamais écrit :

tab = new Array(8,16);// cela crée un tableau avec un 8 et un 16 ...
longueurtab = tab.lenght;

mais aussi :

var chaine = "la classe";
longueurchaine = chaine.lenght;

Pour plus de connaissances sur les arrays : http://www.commentcamarche.net/javascript/jsarray.php3

Exemple de la voiture

<script language=javascript>
function mclavance (durée, vitesse)// notez le  mcl.. (membres d'une classe)
{
    this.kilometres += durée * vitesse;
};

function clvoiture ()
{
    var modele;
    var marque;
    var couleur;
    var kilometres;
    var avance 
    this.avance = mclavance; // pas de parenthèse ici...
};
voiture1  =  new clvoiture;
voiture1.modele = "espace";
voiture1.marque = "renault";
voiture1.couleur= "rouge";
voiture1.kilometres = 0; // elle est surement neuve...
voiture1.avance(1.5,30); // elle roule 1.5 h et a 30 ... 
</script>

Quelques trucs utiles

clvoiture est une fonction vous pouvez ainsi lui passer des arguments ("new Array(8,16);");

Exemple codé

<script language=javascript>
function mclavance (durée, vitesse)
{
    this.kilometres += durée * vitesse;
};

function clvoiture (modele,marque,couleur,kilometres)
{
    // var modele = modele; NE MARCHE PAS donc:
    var modele;
    this.modele = modele;
    var marque;
    this.marque = marque;
    var couleur;
    this.couleur = couleur;
    // le javascript étant très tolérant : on peut faire ceci :
    this.kilometres = kilometres;
    var avance 
    this.avance = mclavance; // pas de parenthèse ici...
};

voiture1  =  new clvoiture("espace","marque","grise",0);
voiture1.avance(1.5,30);// elle roule 1.5 h et a 30 ... ET des parenthèses ET on dit avance;
// sachez que la voiture a maintenant 45 kilomètres....
</script>

Sachez que les objets sont des variables donc passable en arguments ...

Une hiérarchie

Pensez qu'il existe des camions (et des cars (au sens français)). Pour eux, il faut ajouter des caractéristiques en plus (chauffeur,...).

Ainsi les classes ont une hiérarchie et peuvent ainsi récupérer des propriétés de leurs aînées...

<script language=javascript>
function mclavance (durée, vitesse)
{
    this.kilometres += durée * vitesse;
};

function clvoiture (modele,marque,couleur,kilometres)
{
    this.modele = modele;
    this.marque = marque;
    this.couleur = couleur;
    this.kilometres = kilometres;
    this.avance = mclavance; // pas de parenthèse ici...
};

sclcamion.prototype = new clvoiture();

function sclcamion (modele,marque,couleur,kilometres,chauffeur)
{
    this.parent = clvoiture;
    this.parent(modele,marque,couleur,kilometres); 
    this.chauffeur =chauffeur;
};
</script>

Voila je pense que le problème a été traité; bonne classification ...

N'hésitez pas à rajouter des commentaires...

Ce document intitulé « Presentation de la programmation orientée objet (p2o) » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Imprimer une page sans ses boutons
Tutoriel sur window.open
Rejoignez-nous