Accueil > JavaScript > JavaScript – Les objets

JavaScript – Les objets

This entry is part 13 of 19 in the series JavaScript - Tutoriel
  1. Les fonctions constructeur
  2. L’objet Object
  3. Les objets Initializer
  4. with

Les fonctions constructeur

On a déjà vu pour les tableaux comment créer des objets avec l’opérateur new
et un constructeur (dans ce cas, le constructeur en question était Array()).

JavaScript permet au programmeur de créer ses propres classes d’objets. Il faut alors avoir recours à une fonction
constructeur
.
Une fonction constructeur ne différe, globalement, en rien d’une fonction classique.
Par exemple, pour créer une classe nommée Personel, on utilisera une fonction nommée Personel :

function Personel(){
// Une fonction constructeur
}

On peut ensuite créer des objets Personel :

function Personel(){
// Une fonction constructeur
}

var Employe = new Personel();

Utilisée ainsi, une fonction constructeur n’a que peu d’interets. Mais comme avec une fonction classique, on peut spécifier des arguments. On peut
ensuite stocker ces informations en les rendant spécifique à l’objet créé à l’aide du mot-clef this. this établi une référence
avec l’objet en cours.
Exemple :

function Personel(nom, prenom, age, fonction, salaire){
this.nom=nom;
this.prenom=prenom;
this.age=age;
this.fonction=fonction;
this.salaire=salaire;
}

var Employe = new Personel("Talon", "Achille", "40 - 50", "Erudit", "300KF");

On peut ensuite accéder à ces propriété comme on le ferait avec n’importe quel autre objet :

function Personel(nom, prenom, age, fonction, salaire){
this.nom=nom;
this.prenom=prenom;
this.age=age;
this.fonction=fonction;
this.salaire=salaire;
}

var Employe = new Personel("Talon", "Achille", "40 - 50", "Erudit", "300KF");

document.write("Cet employe s'appelle " + Employe.prenom + " " + Employe.nom);

Comme on l’a vu avec les objets étudiés précedement, un objet posséde des méthodes.
Pour ajouter une méthode à un objet, il suffit de créer une fonction est de l’associer à cet objet. Il existe pour cela plusieurs façons :

function Carte(){
document.write("<table border=0>");
// Utilisation d'une boucle for...in
// pour parcourir les propriétés
for(Prop in this){
if(Prop=='Carte')continue;// Si c'est cette méthode on continue
document.write("<tr><th>" + Prop + " :</th>");
document.write("<td>" + this[Prop] + "</td></tr>");
}
document.write("</table>");
}

function Personel(nom, prenom, age, fonction, salaire){
this.nom=nom;
this.prenom=prenom;
this.age=age;
this.fonction=fonction;
this.salaire=salaire;
this.Carte=Carte;
}

ou bien, parfois plus élegant :

function Personel(nom, prenom, age, fonction, salaire){
this.nom=nom;
this.prenom=prenom;
this.age=age;
this.fonction=fonction;
this.salaire=salaire;
this.Carte=function(){
document.write("<table border=0>");
for(Prop in this){
if(Prop=='Carte')continue;
document.write("<tr><th>" + Prop + " :</th>");
document.write("<td>" + this[Prop] + "</td></tr>");
}
document.write("</table>");
}
}

On peut ensuite appeler cette méthode comme n’importe quel autre méthode…

var Employe = new Personel("Talon", "Achille", "40 - 50", "Erudit", "300KF");

Employe.Carte();// Création de la carte de visite.

L’objet Object

Une autre possibilité de créer des objets est d’utiliser le constructeur Object. Pour créer un objet nommé Employe, on écrira :

var Employe = new Object();

On peut ensuite ajouter des propriétés et des méthodes :

var Employe = new Object();

Employe.nom="Talon";
Employe.prenom="Achille";
Employe.age="40 - 50";
Employe.fonction="Erudit";
Employe.salaire="300KF";
Employe.Carte=function(){
document.write("<table border=0>");
for(Prop in this){
if(Prop=='Carte')continue;
document.write("<tr><th>" + Prop + " :</th>");
document.write("<td>" + this[Prop] + "</td></tr>");
}
document.write("</table>");
}

Employe.Carte();// Appel de la méthode Carte()

Il est possible d’enlever des propriétés ou des methodes d’un objet en utilisant l’instruction delete :

var Employe = new Object();

Employe.nom="Talon";
Employe.prenom="Achille";
Employe.age="40 - 50";
Employe.fonction="Erudit";
Employe.salaire="300KF";
Employe.Carte=function(){
document.write("<table border=0>");
for(Prop in this){
if(Prop=='Carte')continue;
document.write("<tr><th>" + Prop + " :</th>");
document.write("<td>" + this[Prop] + "</td></tr>");
}
document.write("</table>");
}

delete Employe.Carte;// Suppression de la methode Carte()
Employe.Carte();// !! ERREUR !!

Les objets Initializer

Comme pour les tableaux, il est possible de créer des objets littéralement. Les propriétés et méthodes sont alors regroupées entre accolades lors
de l’initialisation, et sont séparées par des virgules. Pour affecter des valeurs au différents élements, on utilise non pas le signe égal, mais
les doubles-points (:) :

var Employe = {
nom: "Talon",
prenom: "Achille",
age: "40 - 50",
fonction: "Erudit",
salaire: "300KF",
Carte: function(){
document.write("<table border=0>");
for(Prop in this){
if(Prop=='Carte')continue;
document.write("<tr><th>" + Prop + " :</th>");
document.write("<td>" + this[Prop] + "</td></tr>");
}
document.write("</table>");
}
};

Employe.Carte();// Appel de la methode Carte()

with

with permet de ménager les touches de son clavier et de reposer les doigts du programmeur :-D .
Observez plutôt :

var Employe = {nom: "Talon", prenom: "Achille", age: "40 - 50",fonction: "Erudit",
salaire: "300KF"};

document.writeln("<pre>");
document.writeln("Nom      : " + Employe.nom);
document.writeln("Prénom   : " + Employe.prenom);
document.writeln("Age      : " + Employe.age);
document.writeln("Fonction : " + Employe.fonction);
document.writeln("Salaire  : " + Employe.salaire);
document.writeln("</pre>");

On aurait pu simplifier ainsi :

var Employe = {nom: "Talon", prenom: "Achille", age: "40 - 50",fonction: "Erudit",
salaire: "300KF"};

with(Employe){
document.writeln("<pre>");
document.writeln("Nom      : " + nom);
document.writeln("Prénom   : " + prenom);
document.writeln("Age      : " + age);
document.writeln("Fonction : " + fonction);
document.writeln("Salaire  : " + salaire);
document.writeln("</pre>");
}

ou encore :

var Employe = {nom: "Talon", prenom: "Achille", age: "40 - 50",fonction: "Erudit",
salaire: "300KF"};

with(document){
writeln("<pre>");
writeln("Nom      : " + Employe.nom);
writeln("Prénom   : " + Employe.prenom);
writeln("Age      : " + Employe.age);
writeln("Fonction : " + Employe.fonction);
writeln("Salaire  : " + Employe.salaire);
writeln("</pre>");
}
Series Navigation«JavaScript – Les fonctionsJavaScript – L’objet String»
Categories: JavaScript Tags:
  1. Pas encore de commentaire
  1. Pas encore de trackbacks