Facebook
Twitter
LinkedIn

Constructeur

En Javascript, une fonction est considérée comme un objet. Il est donc possible de créer des propriétés (et des méthodes) sur cette fonction. En voici la démonstration.

let homme = function(){};
homme.nom = "dany";
homme.age = 30;
document.write("nom : " + homme.nom + ", age : " + homme.age);

Affichage

nom : dany, age : 30

Vous remarquez que les propriétés de la fonction sont bien affichées.

Le constructeur

Vous avez déjà rencontré le constructeur new pour la création d’un objet.

let monObjet = new Object();

Dans ce cas précis le constructeur créé un nouvel objet vide, qui ne possède ni propriété, ni méthode.

Mais si vous appliquez le constructeur sur une fonction (qui est aussi un objet) possédant une structure (des propriétés), l’objet créé hérite de cette structure. On utilisera l’opérateur this pour relier le nouvel objet aux propriétés de la fonction.

let Homme = function(nom,age){
    this.proprietAge = age;
    this.proprietNom = nom;
}
 
let moi = new Homme("dany",30);
document.write(moi.proprietAge);

Affichage

30

Le this dans la fonction représente l’objet qui sera ‘construit’ via l’opérateur new . Ici la fonction homme possède une structure, à savoir deux propriétés : ‘proprietAge’ et ‘proprietNom’.

Note : par convention, une fonction qui fait office d’objet commence par une majuscule.

Ajouter une méthode

Une méthode est aussi une fonction (encore!) mais qui est la valeur d’une propriété de la fonction constructeur (Homme).

let Homme = function(nom,age){
    this.proprietAge = age;
    this.proprietNom = nom;
    this.methodeDonneAge = function (){
        document.write("Mon age est " + this.proprietAge + " ans");
    }
}
 
let moi = new Homme("dany",30);
moi.methodeDonneAge();

Affichage

Mon age est 30 ans

Explication

Avec la syntaxe ‘this.methodeDonneAge = function()…’, la propriété methodeDonneAge devient de ce fait une méthode du constructeur Homme.

Pour chaque objet (ou instance) de Homme, comme l’objet ‘moi’, la méthode sera exécutée en appelant la proporiété methodeDonneAge suivi des parenthèses : ‘moi.methodeDonneAge();’

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »