Les objets en Python : Classes et héritage.

Dans cet exemple, on construit la classe parent des Rectangles puis on construit la classe des Carres qui hérite des méthodes de la classe des Rectangles.

***********************************************

'''
Created on 23 août 2016

@author: vfsilesieux
'''
class Rectangles(object):
    def __init__(self, longueur, largeur):#on définit les propriétés des objets de la classe Rectangles
        self.L=longueur
        self.l=largeur
        self.nom="rectangle"
    def perimetre(self):#on définit une méthode périmétre propre à la classe Rectangles
        return (self.L+self.l)*2
    def surface(self):#on définit une méthode surface propre à la classe Rectangles
        return (self.L*self.l)
    def aspect(self):#on définit une méthode aspect propre à la classe Rectangles
        return "j'ai un grand côté de longueur "+str(self.L)+" et un petit côté de longueur "+str(self.l)
 
class Carres(Rectangles): #la classe Carrés hérite de la classe Rectangles
    def __init__(self, cote):#on définit les propriétés des objets de la classe Carrés
        Rectangles.__init__(self,cote,cote)
        self.nom="carré"
        self.cote=cote
    def aspect(self):#on définit une méthode aspect propre à la classe Carrés
        return "j'ai un unique côté de longueur "+str(self.cote)
    def symetrie(self):#on définit une méthode symétrie propre à la classe Carrés
        return "je possède 4 axes de symetrie"

r1=Rectangles(10,5)#on crée une instance de rectangles
c1=Carres(5)#on crée une instance de carres
#On applique les méthodes perimetre, surface et aspect au rectangle.
print (int(r1.perimetre()))#30
print (int(r1.surface()))#50
print (r1.aspect())#j'ai un grand côté de longueur 10 et un petit côté de longueur 5
# On peut appliquer les méthodes perimetre et surface au carré qui les a hérités de son parent rectangle.
print (int(c1.perimetre()))#  20
print (int(c1.surface()))#25
#La méthode aspect est commune aux deux classes, mais on utilise prioritèrement celle qui est définie pour la classe appelée .
print (c1.aspect())#j'ai un unique côté de longueur 5
#La méthode symétrie n’appartient qu’aux carrés et ne peut s’appliquer au parent rectangle qui ne la possède pas
print (c1.symetrie())#je possède 4 axes de symetrie
print (r1.symetrie())#AttributeError: 'Rectangles' object has no attribute 'symetrie'

***********************************************

Les objets en JavaScript :

I] Création d’un objet JavaScript

Un objet possède des propriétés et des méthodes.
Il y a deux procédures pour créer un objet. La première consiste à utiliser un objet littéral, la deuxième est de définir une fonction-constructeur ou classe.
C’est la deuxième méthode qui permet l’utilisation de la programmation objet en JavaScript.
Pour différencier les fonctions des constructeurs, on écrira la première lettre de la fonction-constructeur en majuscule.

1ère Méthode : Utilisation d’un objet littéral

***********************************************

<html>
    <head>
    <meta charset="utf-8" />
        <title>Programmation Objet</title>
    </head>
    <body>
<script>
//Objet déclaré de façon littérale
var Shape = {
    height : 10,
    width : 10,
    area : function() {
        return this.height * this.width;
    }
}
//Appel à l’une des propriétés de l’objet shape
console.log(Shape.height); 
//Appel à la méthode area de l’objet shape
console.log(Shape.area()); 
</script>
    </body>
</html>



***********************************************

2ième Méthode : Utilisation d’une fonction constructeur ou classe

L’utilisation de this est nécessaire pour pouvoir accéder aux propriétés de l’objet et les rendre publiques, en effet si l’on écrivait var height = 10 à la place de this.height=10,  on obtient undefined pour console.log(shape.height), la propriété height devient alors une propriété privée. Il en est de même des méthodes si on ne précise pas this.
Il est également possible de passer des arguments au constructeur.

 

II] Ajout de nouvelles propriétés et méthodes au constructeur : le prototype et l’héritage.

1. Il est possible d’ajouter de nouvelles propriétés à un objet en particulier, mais cette nouvelle propriété ne sera pas ajoutée aux propriétés des autres objets qui dérivent du même constructeur.

2. On peut créer un constructeur qui possède les mêmes propriétés que celles d’un constructeur parent et on peut lui ajouter d’autres propriétés. Le constructeur prototype ainsi formé hérite des propriétés du constructeur parent et peut en posséder d’autres.

3. Si la propriété existe dans le constructeur prototype, JavaScript n’ira pas la chercher dans le parent.

4. Il est également possible d’ajouter une propriété ou une méthode directement au constructeur.

III] Exemple d'application en JavaScript : 50 balles en mouvement dans une boîte

  1. Création d’un objet Ball : 1 balle

On crée un objet Ball qui possède 6 propriétés (rayon, couleur, abscisse, ordonnée, vitesse horizontale, vitesse verticale) et une méthode draw qui utilise les méthodes de dessin pour la représenter sur le canvas. On crée ensuite une instance ball1 de cet objet grâce à ball1=new Ball().

***********************************************

<html>
    <head>
    <meta charset="utf-8" />
<title>Objet Ball</title>
<canvas id="canvas" style="border:2px solid blue; top:50;left:100; position: absolute;" width="1024" height="500">
</canvas>

    </head>
    <body>
<script>
function Ball(radius,color) {
	this.radius=radius;
	this.color=color;
	this.x=0;
	this.y=0;
	this.vx=0;
	this.vy=0;
}
Ball.prototype.draw = function (context) {
	context.fillStyle=this.color;
	context.beginPath();
	context.arc(this.x,this.y,this.radius,0,2*Math.PI,true);
	context.closePath();
	context.fill();
}
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
var ball1=new Ball(10,'#0000ff');
ball1.x=100;
ball1.y=100;
ball1.draw(context);
 
</script>
</body>
</html>
  1. Création d’une collection d’objets 10 balles qui chutent

Pour créer une collection d’objets, nous créons une liste vide balls=[] que nous remplissons ensuite, à l’aide d’une boucle, d’objets ball grâce à la méthode push(). Ensuite nous animons ces balles à raison de 60 images par seconde grâce à setInterval(onEachStep,1000/60) en effaçant le canvas entre deux frames avec context.clearRect(). La décélération verticale des balles au contact du sol est réalisée par balls[i].vy *= -0,9 ; les balles sont ramenées à gauche du canvas en x= - radius lorsque leur centre atteint la largeur du canvas + radius, ce qui donne l’effet de continuité dans la disparition puis la réapparition des balles.

  1. Gestion d’une collection d’objets 50 balles en collision

Ici l’animation ne fait plus appel à setInterval() mais à requestAnimationFrame(animFrame,canvas) qui donne de meilleurs résultats dans le rendu de l’animation. A chaque frame, les balles se déplacent verticalement et horizontalement. Pour gérer les collisions, la fonction checkCollision() est appelée à chaque frame. Elle consiste à faire deux boucles incrémentées l’une avec la variable i l’autre avec la variable j : on sélectionne d’abord une balle dans la liste balls appelée ball1 et on calcule la distance qui la sépare de ball2 appartenant aux autres balles (j variant de i+1 à balls.length). Si la distance séparant les centres des balles est inférieure à la somme des rayons des balles, il y a collision. Les balles sont repositionnées pour éviter qu’elles ne s’interpénètrent et renvoyées dans des directions opposées à leur vitesse initiale en considérant les chocs élastiques.