Informatique


Créer un objet avec {}

Aller à

Remédiation Remédiation

Créer l'objet

Démo
	<h2>Créer un objet avec {}</h2>
	<script>
	const eleve={};
	console.log(typeof eleve);
	</script>

Cet objet n'a ni propriété ni méthode, mais c'est un objet.

Les accolades déclenche l'exécution de la fonction constructor du prototype Object(), l'adresse de l'objet créé est stockée dans la variable eleve, cette variable est maintenant un pointeur.

En fait cet objet à une propriété, cette propriété c'est __proto__ qui est elle-même un objet et contient donc une adresse, l'adresse de l'objet dont la variable eleve va hériter.


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().

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