Comment écrire une classe, un objet en javascript ?
Aujourd’hui, le monde javascript est très vaste et un débutant peut avoir du mal à comprendre comment faire pour que son code fonctionne . Je me suis posé la question de comment faire comprendre le fonctionnement d’un objet en javascript et surtout comment faire pour bien présenter son code afin que le projet soit le plus clair possible.
Nous allons parler ici de la création des objets javascript en version ES5. Pour la version ES6 vous pouvez allez voir en fin d’article.
Par principe et parce que je viens travaille sûr d’autres langages j’ai la séparation du code c’est pourquoi chaque classe javascript sera défini dans son propre fichier. En effet trop souvent aujourd’hui on peut voir tout le code javascript dans un seul et même fichier avec les classes et les fonctions…. Pensez un peu au futur développeur qui va repasser sur votre code ou alors à vous-mêmes si vous revenez dessus après quelques temps !
Nous allons donc créer :
- un index.html qui n’aura comme but que d’appeler notre code javascript afin d’afficher un résultat dans la console de développement.
- un main.js qui sera le fichier javascript permettant l’appel aux différentes classes et fonctions.
- une classe person.js qui contiendra la définition de notre objet personne.
Le code
-> index.html
<html>
<head>
</head>
<body>
<h1>Test Classes es6</h1>
<script src="js/Person.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>- > main.js
//methode es5
var person = new Person("josephine","baker");
console.log(person.getName());Comme on peut le voir le main est assez simple. On créé une Person, on lui assigne un nom et un prénom puis on affiche le résultat dans la console pour afficher le nom et prénom.
Mais comment on crée la classe personne ?
-> Person.js
function Person (nom,prenom){
this.prenom = prenom;
this.nom=nom;
}ok, donc on a une fonction et on lui passe les paramètres attendus mais qu’en est-il des fonctions propres à cette class. Rajoutons la méthode getName à cette classe Person (dans le même fichier js) :
Person.prototype.getName = function(){
return this.prenom+" "+this.nom;
}On remarquera l’utilisation du mot clé prototype dans cette fonction. Et voila c’est tout…. cela va nous permettre d’afficher le résultat dans la console log.
Ceci est un exemple extrêmement basique de la création d’une classe en javascript….. mais maintenant nous allons rajouter du code pour avoir l’âge.
Person.prototype.getAge = function(year){
return 2018-year; //on reste simple....
}On crée donc une fonction qui nous donne l’age en fonction de l’année de naissance.
sur notre main.js on rajoute :
console.log(person.getAge(1978));Et le résultat nous affichera 40 dans la console.
Mais maintenant j’aimerais afficher plus tard dans notre code l’âge de la personne mais sans repasser l’année en paramètre car je l’ai déjà fait…. Comment faire pour que mon objet se souvienne ?
On modifie notre méthode précédente en setAge :
Person.prototype.setAge = function(year){
this.age=2018-year;
}et dans notre main.js :
person.setAge(1978);
console.log(person.age);Voila tout fonctionne, le résultat s’affiche bien…. Mais imaginons que dans notre code on est pas passé dans le “setAge” le résultat du console log affichera alors “undefined”. Pour que cela ne se produise pas il est impératif de bien définir son objet Person et de bien initialiser toute les variables dès le départ (et c’est plus lisible pour tout le monde !!). On aura donc notre Person.js qui ressemblera à cela au final :
function Person (nom,prenom){
this.prenom = prenom;
this.nom=nom;
this.age=0;
}
Person.prototype.getName = function(){
return this.prenom+" "+this.nom;
}
Person.prototype.setAge = function(year){
this.age=2018-year;
}Voila j’espère que c’est plus clair maintenant pour eux qui se poserait la question et qui voudrait savoir comment organiser un peux mieux son code. Bien entendu vous devez placer votre code dans un dossier JS spécifique et n’hésitez pas à faire des sous dossiers à l’intérieur.
je veux tout de même utiliser ES6 !
ok je vais tout de même vous montrer comment faire d’autant plus que cet version aura ma préférence. Pour cela on va juste transformer notre class person.js
class Person {
constructor(prenom, nom, age) {
this.prenom = prenom;
this.nom = nom;
this.age = 0;
}
getName() {
return this.prenom + " " + this.nom;
}
setAge(year) {
this.age = 2018 - year;
}
}Et voila magique, tout fonctionne !
Si vous avez aimé ce post, merci de cliquer sur ✋ pour permettre à chacun de voir cet article. Merci à vous !
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
