Comprendre le fonctionnement de la Programmation Orientée Objet en Javascript
Faire de l’objet en javascript semble être une épreuve surréaliste tant le langage a un fonctionnement particulier.
Tout est ce qui constitue une « classe » en javascript est aussi un objet et nous allons voir ensemble comment cela fonctionne afin de pouvoir l’utiliser de manière aussi naturelle que possible.
En déclarant une fonction, vous déclarer un objet de type fonction, c’est un objet très particulier mais cela reste un objet, il possède des attributs et des méthodes, sachant qu’en JS les méthodes sont des attributs, il est juste de type « function ». En JS, un objet peut être modifié à la volée, indépendamment de sa signature.
Le prototype d’une classe est sur quoi se base l’objet nouvellement instancié pour s’initialiser, puis il appelle le constructeur qui construira l’objet.
Pour bien comprendre, quand vous utiliser le mot clé « new » sur une fonction, pour vous, vous créez une instance de cette classe. Pour le moteur Javascript, il s’agît juste de créer une copie du prototype MaClass.prototype et d’appeler le constructeur de votre classe qui n’est autre que la fonction elle-même, c’est aussi ainsi que fonctionne l’héritage en Javascript, autant dire qu’il n’existe pas.
Concrètement, voici un exemple
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function ClassA() { this.property = "Ap"; this.method = function() { return "Am" }; } function ClassB() { this.property = "Bp"; } ClassB.prototype = new ClassA(); var b1 = new ClassB(); console.log(b1.property);// Affiche "Bp" console.log(b1.method());// Affiche "Am" |
Vous pouvez voir ici que pour faire de l’héritage, j’ai défini le prototype de ClassB avec une instance de ClassA. Autrement dit, ClassB n’hérite pas réellement de ClassA, la signature de ClasseB se base sur un objet de type ClassA. Vous pouvez très bien modifier le prototype de ClassB par la suite, cela n’affectera pas ClassA mais rétroactivement les instances de ClassB, sauf si vous remplacez complètement le prototype de ClassB. Je vous ai fait un jsfiddle pour comprendre, lisez la console (F12) pour plus de détails.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
console.clear(); function ClassA() { this.property = "Ap"; this.method = function() { return "Am" }; } function ClassB() { this.property = "Bp"; } ClassB.prototype = new ClassA(); var b1 = new ClassB(); console.log("ClassB hérite de ClassA et aucune méthode n'est déclarée dans ClassB"); console.log("b1.property", b1.property);// Affiche "Bp" console.log("b1.method()", b1.method());// Affiche "Am" ClassB.prototype.method = function() { return "Bm"; }; console.log("ClassB hérite de ClassA mais sa méthode est ré-écrite"); console.log("b1.method()", b1.method());// Affiche "Bm" function ClassC() { this.property = "Cp"; this.method = function() { return "Cm"; }; } ClassB.prototype = new ClassC(); console.log("ClassB hérite de ClassC"); console.log("b1.method()", b1.method());// Affiche "Bm" var b2 = new ClassB(); console.log("b2.method()", b2.method());// Affiche "Cm" ClassB.prototype = new ClassA(); console.log("ClassB hérite à nouveau de ClassA"); console.log("b1.method()", b1.method());// Affiche "Bm" console.log("b2.method()", b2.method());// Affiche "Cm" var b3 = new ClassB(); console.log("b3.method()", b3.method());// Affiche "Am" console.log("Vous avez 3 objets de type ClassB et pourtant, ils ont tous les 3 une signature différente."); |
Login with Google