La classe est un plan à partir duquel on peut instancier (construire) une infinité d'objets ayant les mêmes propriétés et les mêmes méthodes. On commence la déclaration (définition) d'une classe avec le mot clé class.

On trouvera dans la classe:

• une méthode qui permet de construire les instances (ou objets!), il s'agit de la méthode constructor (constructeur in french).
• des méthodes setter et getter pour accéder aux propriétés.

Syntaxe
class NomClasse	{
		constructor {
			
		}
}

Créons la classe Animal:

Démo
<h2>On crée 2 objets sur base d'une classe</h2>
<script>
class Animal { 
//La méthode constructor
constructor(nom,sexe,age){
	this.nom=nom;
	this.sexe=sexe;
	this.age=age;
	this.photo=this.nom+".jpg";
}
	affic(){
		var s= (this.sex==="F")? "Femelle":"Mâle";
		return "<div>"+s+" - "+this.nom+" - "+this.age+" ans"+" - "+this.photo+"</div>";
	}	
}
var monPinguin = new Animal("Costard","F","5");
console.log(monPinguin);
document.write(monPinguin.affic());
</script>

On constate dans la console:

Les accesseurs sont des méthodes appelées comme ... de simples propriétés.

Ils permettent de réaliser des tests avant d'accéder aux propriétés d'un objet, ces tests ont pour but de protéger les propriétés contre des modifications non souhaitées.

Il en existe 2 catégories:

• les setters qui permettent de modifier le contenu des propriétés
• les getters qui permettent d'accéder en lecture aux propriétés

Exemple avec un set classique

Démo
<h2>Setter</h2>
<script>
class Personne{
constructor(n,p){
		this._nom=n;
		this._prenom=p;
}	
set nom(valeur){
		this._nom=valeur;
	}
set prenom(valeur){
		this._prenom=valeur;
	}
}
const p1=new Personne("vd","louis");
console.log(p1);
p1.nom="Biloute";
console.log(p1);
console.log(p1._nom);//On a accès aux propriétés depuis l'extérieur de la class
</script>

Solution très classique, un point faible, lors de l'initialisation des propriétés dans le constructor on ne passe pas par les setter !!!

Exemple avec un set bien plus efficace

Démo
<h2>Setter</h2>
<script>
class Personne{
	_nom=null;
	_prenom=null;
constructor(n,p){
this.nom=n;
this.prenom=p;
}	
set nom(valeur){
		this._nom=valeur;
	}
set prenom(valeur){
		this._prenom=valeur;
	}
}
const p1=new Personne("vd","louis");
console.log(p1);
p1.nom="Biloute";
console.log(p1);
console.log(p1._nom);//On a toujours accès aux propriétés depuis l'extérieure de la class
</script>

On déclare les propriétés en dehors de constructeur, dans le constructeur on appelle les setter!!!! Ici, on teste les données aussi pour l'initialisation.

Les propriétés deviennent privées, ... ou presque...

Exemple avec la Rolls Royce

Démo
<h2>Setter</h2>
<script>
class Personne{
	#nom=null;
	#prenom=null;
constructor(n,p){
this.nom=n;
this.prenom=p;
}	
set nom(valeur){
		this.#nom=valeur;
	}
set prenom(valeur){
		this.#prenom=valeur;
	}
}
const p1=new Personne("vd","louis");
console.log(p1);
p1.nom="Biloute";
console.log(p1);
console.log(p1.#nom);/*une erreur est levée, on ne peut plus accéder aux propriétés de puis l'extérieur de la class*/

On déclare les propriétés en dehors de constructeur, dans le constructeur on appelle les setter!!!! Ici, on teste les données aussi pour l'initialisation.

Les propriétés deviennent privées.

Démo
<div id=res></div>
<script>
let res=document.getElementById("res");
class Personne{
_nom=null;
_prenom=null;
constructor(n,p){
this.nom=n;
this.prenom=p;
}	
set nom(valeur){
		this._nom=valeur;
	}
set prenom(valeur){
		this._prenom=valeur;
	}
get nom(){
		return this._nom;
	}
get prenom(){
		return this._prenom;
	}
}
const p1=new Personne("vd","louis");
console.log(p1.nom);
res.innerHTML=p1.nom + " "+p1.prenom;
</script>

Injecter du code par document.write est peu apprécié par les navigateur! Le code HTML est lu séquentiellement, rajouter du code HTML par document.write oblige le navigateur à réorganiser la page et l'oblige à relancer une ou plusieurs requêtes http, ceci peut ralentir considérablement l'affichage de la page.
On préfère donc utiliser l'API du DOM pour respecter le code HTML chergé par le navigateur.

On constate:

• chaque variable à son setter et son getter, le getter se résume le plus souvent à simplement retourner le contenu de la variable
• les méthode getters sont indispensables, une variable initialisée avec un setter ne peut être atteinte en lecture que par un getter
• un test a été rajouté pour tous les setter