Créer l'objet avec des propriétés

Exemples 1: avec des propriétés

Démo
<h2>Créer un objet avec des propriétés avec {}</h2>
<script>
const eleve={
	nom:"Desproges",
	prenom:"Lucien",
};
//On ajoute une propriété à la volée
eleve.dnaiss="17/05/1962";
document.write("Nom: ",eleve.nom," Prenom: ",eleve.prenom, "Anniversaire: " eleve.dnaiss);
</script>

Cet objet n'a que des propriétés:

• le nom de la propriété est suivi de 2 points et la valeur associée à cette propriété
• les propriétés et les méthodes sont séparées par des virgules
• on peut ajouter, "à la volée", une propriété ou une méthode après avoir déclaré l'objet
• il n'existe aucune limite quant au nombre de propriétés possibles
• la valeur chargée dans une propriété peut être de n'importe quel type
• si aucune valeur n'est affectée à la propriété celle-ci sera undefined

Exemples 3: avec une propriété de type object

Démo
<h2>Créer un objet avec une propriété de type object</h2>
<script>
const eleve={
	nom:"Desproges",
	prenom:"Lucien",
	adresse:{rue:"de la Ruche",num:"30",codep:"1030",commune:"Schaerbeek"},
	dnaiss:"17/05/1962",
};
document.write("Nom: ",eleve.nom," Prenom: ",eleve.prenom, " Anniversaire: ", eleve.dnaiss);
document.write("<br>");
document.write("Adresse: rue ",eleve.adresse.rue,", ",eleve.adresse.num," ", eleve.adresse.codep," ",eleve.adresse.commune);
</script>

---

Créer l'objet avec des propriétés et des méthodes

Démo
<h2>Créer un objet avec des propriétés et des méthodes</h2>
<script>
const eleve={
nom:"Desproges",
prenom:"Lucien",
adresse:{rue:"de la Ruche",num:"30",codep:"1030",commune:"Schaerbeek"},
dnaiss:"17/05/1962",
affic:function(){
	document.write("Nom: ",this.nom," Prenom: ",this.prenom, " Anniversaire: ", this.dnaiss);
	document.write("<br>");
	document.write("Adresse: rue ",this.adresse.rue,", ",this.adresse.num," ", this.adresse.codep," ",this.adresse.commune);
	}
};
eleve.affic();
</script>

On constate:

• on déclare une méthode comme une propriété, on affecte simplement une fonction anonyme
• les parenthèses de la fonction peuvent acceuillir des paramètres
• le mot clé this représente l'objet (son adresse) sur lequel on va appliquer la méthode
• au sein de l'objet, l'objet lui-même est toujours représenté par this
• dans ce cas on aurait pu écrire eleve.nom, eleve.prenom etc. car eleve est l'objet lui-même et pas un constructeur, mais l'utilisation de this est préférable.

Le mot clé this est un pointeur pointant vers l'objet pour lequel on désire accéder à une propriété ou une méthode.

---

Parcourir les propriétés d'un objet

On rajoute une fonction permettant de parcourir l'objet lui-même, la fonction afficProp().

Dans la boucle, à chaque tour, le nom de chaque propriété est chargé dans la variable x.

Démo
<h2>Parcourir les propriétés d'un objet</h2>
<script>
const eleve={
	nom:"Desproges",
	prenom:"Lucien",
	adresse:{rue:"de la Ruche",num:"30",codep:"1030",commune:"Schaerbeek"},
	dnaiss:"17/05/1962",
	affic:function(){
		document.write("Nom: ",this.nom," Prenom: ",this.prenom, " Anniversaire: ", this.dnaiss);
		document.write("<br>");
		document.write("Adresse: rue ",this.adresse.rue,", ",this.adresse.num," ", this.adresse.codep," ",this.adresse.commune);
		},
	afficProp:function(){
		for(let x in this){
			console.log("Propriété "+x+" contient: "+this[x]);
		}
	}
}
eleve.afficProp();
</script>

La syntaxe this[x] ne peut pas être remplacée par this.x car la variable x contient une chaîne de caractères! Après déréférencement éventuel on aurait pour this.x l'expression this."nomDeLaPropriété", et "nomDeLaPropriété" n'est pas une propriété de l'objet.

La propriété __proto__ n'apparaît pas, c'est normal, seules les propriétés énumérables (celles écrites par l'utilisateur) sont listées par l'opérateur in.

---

Quiz

Les objets avec {} 1

Les objets avec {} 2