Développement web indépendant à Montpellier

Publié le lundi 16 mars 2009 10:02:26

Programmation orientée objet en Javascript

La programmation orientée objet est possible sans utilisation de particulier, on peut très bien créer des classes et les instancier directement et nativement.

Création d'une Classe Javascript

Pour faire un exemple parlant nous allons créer la même Classe dans un langage très connu de tous :

Exemple

Il s'agira d'une classe tout simple qui bonjour aux utilisateurs, en cela donnerait :

<?php
class Exemple
{
 var $utilisateur;
 /**
  * Constructeur : initialise l'attribut utilisateur
  */
 function Exemple()
 {
  $this->utilisateur = "Stéphane";
 }
 function DitBonjour()
 {
  echo "Bonjour ".$this->utilisateur;
 }
}
?>

Le mot clé Class existe en donc pas de soucis particulier; pour instancier et utiliser cette classe, on fera simplement :

$oExemple = new Exemple();
$oExemple->DitBonjour(); //affiche "Bonjour Stéphane"

En Javascript :

C'est différent car le mot clé class n'existe pas, on peut obtenir la même chose de la manière suivante :

function Exemple()
 {
  var utilisateur;
  
  this.DitBonjour = function()
  {
   document.write( "Bonjour "+ this.utilisateur);
  }
 /* initialisation de l'attribut à la fin
  * (Constructeur)
  */
 this.utilisateur = "Stéphane";
 }
 

Notez qu'il n'y a pas de Méthode constructeur explicite : la Méthode Exemple, qui est notre classe, construit ses propres instances grâce au mot clé new, comme dans les autres langages orientés objet. Le code se lisant de haut en bas, on initialise l'attribut à la fin de la Méthode exemple; cela n'a aucune importance ici, mais cela peut en avoir si vous utilisez des méthodes de la classe Exemple pour l'initialiser vos objets. Il est important que les méthodes aient été déclarées au moment ou elles sont appelées.

Exemple est donc à la fois une méthode, et une classe, on peut l'instancier si l'on souhaite, voici l'utilisation :

var oExemple = new Exemple();
oExemple.DitBonjour(); // affichera "Bonjour Stéphane"

On peut donc développer tout à fait "normalement" et facilement Objet en javascript.

Notez cet article !

  • Actuellement 4 sur 5 étoiles
  • 1
  • 2
  • 3
  • 4
  • 5

Note : 4/5 (20 notes attribuées)

Merci d'avoir participé !

Vous avez déjà noté cette page, vous ne pouvez la noter qu'une fois !

Votre note a été changée, merci de votre participation !

Bonne résolution ! j'arrête d'alourdir mes pages avec des boutons de partage, mais vous pouvez continuer de partager :-)

Commentaires

  1. It proved to be Very helpful to me and I am sure to all the commentators here!
    http://...-business/

  2. Superbly written article, if only all bloggers offered the same content as you, the internet would be a far better place.
    http://...traveling/

  3. Park has identified preparing the city for a hotter future as a top priority and is functioning to apply a system where staff will check.

  4. Very useful post. This is my first time i visit here. I found so many interesting stuff in your blog especially its discussion. Really its great article.
    http://...kethis.com

  5. This is such a cool blog, atleast content has a meaning unlike those useless blogs on the internet. <a href="http://...dependence Day DP</a>

  6. Thanks for the sharing information.keep the good work going

  7. Thanks for the great blog post. The Philosophy Homework Help expert feels this is really great.

  8. lesa.prom... | C Programming Assignment Help |

    Thank you for the excellent blog on javascript. It is great to find the high-quality content in this javascript blog.

  9. We updated Angel Broking Customer Care Number or Toll Free Number. A small info about company Angel Broking's tryst with excellence in customer relations

  10. Hi, thank you for this tip that can structure things a little. I just want to let you know that I am very interested and informative. I can not wait to read lots of your posts.
    https:/.../shivam113

  11. Hi, thank you for this tip that can structure things a little. I just want to let you know that I am very interested and informative. I can not wait to read lots of your posts.

  12. Lucky Patcher is a must-have hacking app for all the crazy gamers. This app helps in cracking most of the android games so that the games can

  13. With iMessage apps, you can collaborate with others in a conversation, decorate messages with stickers, share a song, and more

  14. Thank you for the excellent blog. Our data structure assignment help experts are really impressed to see this blog. This blog is really informative and helpful.

  15. Webroot.com/safe- Experience next-generation Security level with Webroot on your all devices. Install and activate webroot from www.webroot.com/safe and don’t forget to run webroot safe scan to feel secure anywhere.webroot.com/safe is a computer security software program for Microsoft Windows users that combine software as a service cloud protection with traditional Antivirus and anti-spyware desktop technologies. Built into the suite is a two-way firewall, a registry cleaner, Email anti-spam, secure browsing, anti-phishing and a password management service. The suite was initially released on July 26, 2010, as the 2011 version of the product.
    http://...t.com/safe

  16. Gossip Lanka News is a Sri Lankan online news website containing Sri Lankan and world news written in Sinhala. As of July 2015, Alexa Internet ranks its website traffic 10th in Sri Lanka, and in the low 7000s in the world.[1]

    The site is not to be confused with the Gossip Lanka news section of Sri Lankan Times

  17. root your mobile with a single click

  18. This is a good website.

  19. USER GUIDE FOR INSTALLATION OF NORTON.COM/SETUP ANTIVIRUS
    When you buy any antivirus product from this American brand, you can install the same on your device with ease. It is extremely convenient to install any of the security packages from Norton with a few simple steps that you need to follow.

    1-To start with, you will have to download the antivirus software available at norton.com/setup. This can be done with a powerful internet connection without a CD or DVD. You can also do this with the help of a retail card.

    2- Next step is accessing the unique 25 character alpha-numeric code (xxxx-xxxx-xxxx-xxxx) which is your product key. If you buy a retail card, you will find this unique code on the backside of the card that you need to enter after you created your account and log in.

    3-You can now Install Norton with this Product Key by entering this unique product key. The installation process is now complete and you can click on the ‘Submit’ button.
    http://...oncom.com/

  20. USER GUIDE FOR INSTALLATION OF NORTON.COM/SETUP ANTIVIRUS
    When you buy any antivirus product from this American brand, you can install the same on your device with ease. It is extremely convenient to install any of the security packages from Norton with a few simple steps that you need to follow.

    1-To start with, you will have to download the antivirus software available at norton.com/setup. This can be done with a powerful internet connection without a CD or DVD. You can also do this with the help of a retail card.

    2- Next step is accessing the unique 25 character alpha-numeric code (xxxx-xxxx-xxxx-xxxx) which is your product key. If you buy a retail card, you will find this unique code on the backside of the card that you need to enter after you created your account and log in.

    3-You can now Install Norton with this Product Key by entering this unique product key. The installation process is now complete and you can click on the ‘Submit’ button.
    http://...oncom.com/

  21. Webroot Support experts can lend their hand to download, install and update Webroot Spy Sweeper Antivirus on your system. We can also repair all errors that may crop up while installing and configuring Webroot Antivirus on your PC. We can help you detect and remove malicious threats, malware and spyware by performing a quick scan on all files and folders. With our robust technology, we can destroy suspicious programs and infected files from your system. Our antivirus experts can clean all online threats, including Trojan, root kits, key loggers, and worms in just single sweep. We can optimize your computer’s speed and efficiency and also protect it from being sluggish.
    http://.../com-safe/

  22. Shivamroxx | Install and Activate Webroot safe @ www.webroot.com/safe |

    User Guide for Installation of www.webroot.com/safe Antivirus


    When you buy any antivirus product from this American brand, you can install the same on your device with ease. It is extremely convenient to install any of the security packages from Webroot with a few simple steps that you need to follow.

    1. To start with, you will have to download the antivirus software available at webroot.com/safe. This can be done with a powerful internet connection without a CD or DVD. You can also do this with the help of a retail card.

    2. Next step is accessing the unique 20 character alpha-numeric code (xxxx-xxxx-xxxx-xxxx-xxxx) which is your product key. If you buy retail card, you will find this unique code on the backside of the card that you need to enter after you created your account and login.

    3. You can now Install Webroot with this Product Key by entering this unique product key. The installation process in now complete and you can click on the ‘Submit’ button.
    http://...omsafe.us/

  23. www.webroot.com/safe -24/7 technical support for Webroot antivirus, call us to get instant support on webroot installation issues Dial toll free 1-844-833-0610.
    https:/....org/safe/

  24. Where to seek out webroot Key Code? The Webroot security package is simple to setup &amp; install at webroot.com/safe. Simply find 20-character alpha-numeric code that is...
    http://...-safe.org/

  25. Web-root -24/7 technical support for Webroot antivirus, call us to get instant support on webroot installation issues Dial toll free 1-844-833-0610.
    https:/...-root.org/

  26. www.webro... | www.webroot.com/safe | Activate webroot at webroot safe |

    Where to seek out webroot Key Code? The Webroot security package is simple to setup &amp; install at webroot.com/safe. Simply find 20-character alpha-numeric code that is...
    http://...-safe.org/

  27. Web-root -24/7 technical support for Webroot antivirus, call us to get instant support on webroot installation issues Dial toll free 1-844-833-0610.
    http://...b-root.org

  28. www.webro... | www.webroot.com/safe | webroot/safe - download (windows 10) |

    www.webroot.com/safe -24/7 technical support for Webroot antivirus, call us to get instant support on webroot installation issues Dial toll free 1-844-833-0610.
    http://....org/safe/

  29. webroot.c... | webroot.com/safe to get webroot safe setup |

    Experience next generation Security level with Webroot in your all devices. Install and activate webroot from www.webroot.com/safe and don’t forget to run webroot safe scan to feel secure anywhere.
    http://...-com-safe/

  30. Visit www.norton.com/setup for setup, download, reinstall, enter and activate your norton product key to setup your account.Step-by-Step guide for Norton setup key, Download &amp; installation from norton.com/setup website.

  31. welcome to avg.com/retail website With the development of the digital world, online protection is crucial. It is extremely important to protect your PCs, Mac, computers as well as mobile devices and tablets with avg.com/retail. This can be done with the help of effective internet security and anti-virus products from avg.com/retail that safeguards all devices used on digital platforms.

  32. POF Inbox... | POF Inbox – PlentyofFish Inbox Account |

    We aren't talking about participants and their individual accounts. Swines have actually tried to get between cupid's arrow have, we comprehend.

  33. Thank you for the information.It was such an amazing post.Love to share some of my thoughts on gaameover.
    https:/...eover.com/

  34. sochuket.... | sochuket |

    The <a href="
    https:/..."> ES File Explorer APK </a> Download is an ultimate solution for this issue.

  35. JamesBS | Thank you for the amazing post. |

    Thank you for the awesome post. loved your writings. Thank you for the information.It helped me a lot. Go here if you want to install gallery app on to your smartphone.
    https:/...r-android/


  36. var utilisateur;

    this.DitBonjour = function()
    {
    document.write( "Bonjour "+ this.utilisateur);
    }
    /* initial
    var utilisateur;

    this.DitBonjour = function()
    {
    document.write( "Bonjour "+ this.utilisateur);
    }
    /* initial
    var utilisateur;

    this.DitBonjour = function()
    {
    document.write( "Bonjour "+ this.utilisateur);
    }
    /* initial

  37. lisation de l'attribut à la fin
    * (Constructeur)
    */
    this.utilisateur = "Stéphane";
    }lisation de l'attribut à la fin
    * (Constructeur)
    */
    this.utilisateur = "Stéphane";
    }lisation de l'attribut à la fin
    * (Constructeur)
    */
    this.utilisateur = "Stéphane";
    }

  38. "Bonjour "+ this.utilisateur);
    }
    /* initialisation de l'attribut à la fin
    * (Constructeur)
    */
    this.utilisateur = "Stéphane";
    }"Bonjour "+ this.utilisateur);
    }
    /* initialisation de l'attribut à la fin
    * (Constructeur)
    */
    this.utilisateur = "Stéphane";
    }

  39. serdavos | free unblocked movies latest online |

    our info il me semble que dans la déclaration de te class en Javascript il faut mettre les paranthèse sinon t'a une erreur :

    function Exemple() /* correction */
    {
    var utilisateur;

    this.DitBonjour = function()
    {
    document.write( "Bonjour "+ this.utilisateur);
    }

  40. Nice post Thanks for sharing this Information

  41. This will certainly transform the crucial mix for the summary Insulation on back switch two times will certainly take you to the primary food selection Faucet on.

  42. shareit app | shareit |


    https:/...c-windows/
    There is, however, a cleaner way to code these classes in native Javascript using the prototype attribute.

  43. If I had to choose between resting and reading this blog, I’d definitely go with this blog.

  44. https:/...areit.com/

    download and get featuers this app.

  45. Thank you for sharing! I'm glad to find this post!
    http://piknu.me/

  46. Are there any destructors for JavaScript classes?

  47. Brand-new functions that makes the wwe 2k18 even more intriguing as well as fun to play compared to any other wwe titles in the past.

  48. Yet if the mistake is receiving that mobdro app either in downloading and install that application or mounting that application.

  49. http://ww... | http://www.agenslutena.com/penyebab-retina-lepas-ablasio-retina-obat-ampuh-tanpa-operasi/ |
  50. Greetings! Very helpful advice in this particular article! It's the little changes which will make the most important changes. Many thanks for sharing! <a href="https:/...t;>weed caps</a>

  51. You are so interesting! I don't suppose I have read a single thing like that before. So good to discover somebody with genuine thoughts on this subject. Really.. thank you for starting this up. This web site is one thing that's needed on the web, someone with a bit of originality! <a href="http://...t;Generate gta 5 money</a>

  52. You are so cool! I don't suppose I have read through a single thing like that before. So good to find somebody with genuine thoughts on this subject matter. Seriously.. thank you for starting this up. This site is one thing that is required on the web, someone with some originality! <a href="http://...t;Generate gta 5 money</a>

  53. it's very awesome.

  54. http://google.com this is awesome.

  55. Enthralled by the author's capacity to write in this heavenly way.

  56. I personally like your post, you have shared good article. It will help me in great deal.

  57. MBA Capst... | MBA Capstone Project Help |

    Great Information,it has lot for stuff which is informative. I will share the post with my friends.

  58. Ryan Cata... | Ryan Cataldo Jupiter FL |

    Nicest information!!! I'll be enchanted to greatly help due to what I've learnt from here.

  59. Thank you for sharing this article.
    http://...ch-online/
    https:/...ellonline/
    http://...ch-online/
    http://...ge-online/
    http://...le-online/
    http://...ll-online/
    http://...ie-online/
    http://...rs-online/
    http://...us-online/
    http://...le-online/
    http://...ck-online/
    http://...rs-online/
    http://...nd-online/
    https:/...litonline/
    http://...er-online/
    http://...us-online/
    http://...nd-online/
    http://...by-online/
    https:/...oseonline/
    http://...rd-online/
    https:/...andercage/
    http://...an-online/
    http://...er-online/
    http://...an-online/
    https:/...ganonline/
    https:/...veronline/
    http://...fe-online/
    https:/...hegalaxy2/
    http://...-2-online/
    http://...-2-online/
    https:/...keronline/
    https:/...cleonline/
    https:/...ireonline/
    http://...ck-online/
    http://...re-online/
    http://...om-online/
    http://...om-online/
    http://...st-online/
    http://...rs-online/
    http://...es-online/
    http://...rd-online/
    http://...er-online/
    http://...by-online/
    http://...er-online/
    http://...rs-online/
    https:/...ersonline/
    http://...-2-online/
    http://...ch-online/
    http://...ss-online/
    http://...-2-online/
    http://...ie-online/
    http://...ge-online/
    https:/...alchapter/
    http://...ll-online/
    http://...by-online/
    https:/...aribbean5/
    http://...ll-online/
    http://...ge-online/
    http://...it-online/
    http://...ll-online/
    https:/...ifeonline/
    http://...nt-online/
    http://...ck-online/
    http://...an-online/
    https:/...astonline/
    http://...er-online/
    https:/...abyonline/
    http://...ed-online/
    http://...re-online/
    http://...fe-online/
    http://...ge-online/
    https:/...er2online/
    http://...nt-online/
    http://...-2-online/
    http://...st-online/
    http://...it-online/
    http://...fe-online/
    http://...le-online/
    https:/...fthesword/
    http://...-2-online/
    http://...st-online/
    http://...ge-online/
    https:/...andonline/
    https:/...allonline/
    https:/...ackonline/
    https:/...tchonline/
    http://...er-online/
    http://...se-online/
    https:/...vieonline/
    http://...er-online/
    https:/...arsonline/
    http://...er-online/
    http://...nd-online/
    https:/...domonline/
    http://...rd-online/
    http://...rs-online/
    http://...ll-online/
    http://...ss-online/
    http://...es-online/
    http://...ed-online/
    http://...ge-online/
    http://...es-online/
    https:/...stvillage/
    http://...ie-online/
    http://...rs-online/
    https:/...ousonline/
    http://...ss-online/
    http://...se-online/
    https:/...antonline/
    http://...ll-online/
    http://...it-online/
    http://...re-online/
    https:/...essonline/
    https:/...tedonline/
    http://...er-online/
    http://...se-online/
    http://...ed-online/
    http://...nt-online/
    http://...om-online/
    http://...us-online/
    Website is very nice and informative content

  60. Excellent site. Plenty of useful information here. I am sending it to some buddies ans additionally sharing in delicious. And naturally, thanks in your effort!

  61. Brian | appel de méthode |

    bonjour,

    j'utilise les librairies Paperjs.js et une classe que je créé moi-meme : Creergraphique.js, en espérant pouvoir utiliser les méthodes de Paperjs.js dans Creergraphique.js. Malheureusement, bien que je fasse charger Paperjs.js avant Creergraphique.js, il semble que Creergraphique.js n'ai pas connaissance des méthodes Paperjs.js.

    Je me demande comment faire....

  62. C'est la première fois que je découvre que Javascript permet de bénéficier de l'orienté objet. En plus de sa légèreté, Javascript peut être bien utile en tirant profit de la POO. Donc, on peut faire pas mal de chose côté client sans besoin de nous débrouiller côté serveur.

  63. Il y a-t-il des destructeurs pour le classes JavaScript ?

  64. jstux | Besoin d'exemple pour l'héritage |

    Bonjour

    "on peut faire de l'héritage en javascript. Il suffit d'utiliser un objet déjà créé dans le constructeur d'un autre :), et il héritera de toutes ses variables membresµ/fonctions, sans empêcher la surcharge."

    => Peux-tu donner un exemple stp ?

    Merci d'avance

  65. @Nicolas : on peut faire de l'héritage en javascript. Il suffit d'utiliser un objet déjà créé dans le constructeur d'un autre :), et il héritera de toutes ses variables membresµ/fonctions, sans empêcher la surcharge.

  66. Olve | Initialiser un objet via une méthode de classe ? |

    Alors que signifie cette phrase :
    " mais cela peut en avoir si vous utilisez des méthodes de la classe Exemple pour l'initialiser vos objets "

    Utiliser une méthode de class pour initialiser un objet ? Cette phrase me semble tjrs un peu flou...

    Après, j'ai comprit qu'en effet, les "methodes" de ces "class" Javascript n'en étant pas vraiment, on ne peut les appeler dans le contexte de cette classe dans un constructeur déclarer au début car le Javascript ne connaitrait pas l'existence des différents méthodes pouvant être appelé (un moyen de se rapprocher d'un langage objet + typé peut d'ailleurs être de déclarer une méthode constructeur au tout début qu'on l'on appelle à la fin de "la classe").

  67. En fait, ce n'est pas réellement un contexte objet tel qu'on en a l'habitude : les méthodes de votre class Exemple ne sont pas disponibles directement, il n'y pas pas de mot clé class ni de constructeur à proprement parlé. Aussi, vous ne pouvez pas appeller la méthode DitBonjour() avant de l'avoir déclaré.

    Si vous faites de cette manière, vous pouvez considérer le bas de la class exemple (après avoir déclaré toutes vos méthodes) comme un constructeur classique.

    Concernant :

    var oExemple = new Exemple.methode(param);

    En fait surtout pas, vous créeriez un objet de la classe "Exemple.methode" (une manière de faire du namespace au passage ;) ). Si vous avez compris ça, je me suis certainement mal exprimé :)

  68. Olve | Methode ? Class ? (Correction) |

    " ce que signifie l'initialisation d'objet PAR une méthode ? "
    Je critique je critique et au final je m'exprime mal ! :P Dsl !

  69. Bonjour,

    Tout d'abord merci pour l'article qui m'a permit de me plonger dans le sujet.

    J'ai néanmoins une incompréhension quand à votre vocabulaire : " Le code se lisant de haut en bas, on initialise l'attribut à la fin de la Méthode exemple; cela n'a aucune importance ici, mais cela peut en avoir si vous utilisez des méthodes de la classe Exemple pour l'initialiser vos objets. "

    à la fin de la METHODE exemple ? pour L'INItialiser vos objets ?
    Et puis je ne suis pas sûr de comprendre ce que signifie l'initialisation d'objet une méthode ? Un objet ne s'initialise pas automatiquement via son constructeur ? ( var oExemple = new Exemple(); ).

    Ce que vous dîtes sous-entends t'il qu'on peut écrire :
    var oExemple = new Exemple.methode(param);

    A ce compte là je comprends d'avantage le tout et l'intérêt de déclarer les attribut à la fin de la classe !
    Bref, peut-être qu'un exemple après le paragraphe en question pourrait guider certaines lanterne.


    Olivier

  70. marrant ce code, c'est exactement du code flash d'il y a 10 ans (actionscript 1)...

  71. Olivier | Je voudrais créer une classe Infobulle. |

    Bonsoir...

    Je voudrais créer une classe Infobulle.

    Comment faire en sorte que toutes ses instances soient des éléments Html ?
    Comment faire en sorte que toutes ses instances soient des éléments Html ayant un tagName déterminé ?

    Merci de votre aide !

  72. Merci Aurélien pour l'exemple et Romain pour la correction. Il existe néanmoins une manière plus propre de coder ces classes en Javascript natif en utilisant l'attribut prototype. Cela dit, je me tourne de plus en plus vers des frameworks, par flemme d'une part, mais aussi par souci de lisibilité : http://...ototype-JS

  73. Hello,

    Un autre petit bout de code pour donner un exemple concret de constructeur :

    function Human(username)
    {
    var username;

    this.sayHello = function(){
    alert( "Hello, I am "+ this.username);
    }

    this.username = username;
    }

    var e = new Human("Charles");
    e.sayHello();

  74. Tout d'abord merci pour cette astuce qui permet de structurer un peu les choses.

    Cela dit, les technos objets nous ont changé la vie grâce à des mécanismes beaucoup plus puissants que de la simple encapsulation : héritage, polymorphisme, design patterns, etc.

    Dommage, que Javascript ne permettent pas tout cela...

  75. | class javascript erreur |

    je confirme

  76. DE BRITO... | class Javascript Erreur |

    Salut,

    Juste pour info il me semble que dans la déclaration de te class en Javascript il faut mettre les paranthèse sinon t'a une erreur :

    function Exemple() /* correction */
    {
    var utilisateur;

    this.DitBonjour = function()
    {
    document.write( "Bonjour "+ this.utilisateur);
    }
    /* initialisation de l'attribut à la fin
    * (Constructeur)
    */
    this.utilisateur = "Stéphane";
    }