Constructeur

MéthodeObject

On a vu précédemment que l'on pouvait créer des Objets à partir du constructeur Object.

CTRL+C pour copier, CTRL+V pour coller
1
const element = new Object();
const element = new Object();
Constructeur Object

Le principe est qu'un constructeur Object possède un prototype qui crée l'objet element.

Un lien vers le prototype est donc créé entre element et le prototype d'Object.

On dira que element est une instance de Object, ou que Object est le constructeur de element.

Testez le code précédent et vérifiez les instructions suivantes :

CTRL+C pour copier, CTRL+V pour coller
1
element
2
element.constructor
element
element.constructor

MéthodeRéalisation d'un constructeur

On peut réaliser ses propres constructeurs.

Un constructeur est en fait une fonction dans laquelle this correspond au nouvel objet créé.

Afin de distinguer les fonctions constructeurs des autres fonctions, il est d'usage de les faire débuter par une majuscule.

En utilisant une fonction nommée, son nom apparaîtra dans le constructeur.

CTRL+C pour copier, CTRL+V pour coller
1
function Element(){
2
  this.prop1 = "valeur1";
3
  this.prop2 = "valeur2";
4
};
5
const enfant = new Element();
function Element(){
  this.prop1 = "valeur1";
  this.prop2 = "valeur2";
};
const enfant = new Element();
Constructeur Element

En interne, suite à l'instruction new, il se passe les étapes suivantes :

l'objet enfant est créé et hérite du prototype Element.

La fonction du constructeur Element est exécutée en remplaçant this par enfant (on dit que enfant est utilisé comme contexte de la fonction).

Ce qui crée les propriétés de enfant.

Testez le code précédent et vérifiez les instructions suivantes :

CTRL+C pour copier, CTRL+V pour coller
1
enfant
2
Element
3
enfant.constructor
enfant
Element
enfant.constructor

MéthodeConstructeur paramétré

On peut ajouter des paramètres à la fonction.

CTRL+C pour copier, CTRL+V pour coller
1
function Element(prop1, prop2){
2
  this.prop1 = prop1;
3
  this.prop2 = prop2;
4
};
5
const enfant = new Element("valeur1", "valeur2");
function Element(prop1, prop2){
  this.prop1 = prop1;
  this.prop2 = prop2;
};
const enfant = new Element("valeur1", "valeur2");
Constructeur paramétré

Testez le code précédent et vérifiez les instructions suivantes :

CTRL+C pour copier, CTRL+V pour coller
1
enfant
2
enfant.constructor
enfant
enfant.constructor

MéthodeAjouter des propriétés au prototype du constructeur.

On accède au prototype du constructeur par l'intermédiaire de sa propriété prototype

CTRL+C pour copier, CTRL+V pour coller
1
Constructeur.prototype.propriété = valeur;
Constructeur.prototype.propriété = valeur;
CTRL+C pour copier, CTRL+V pour coller
1
function Element(){
2
  this.prop1 = "valeur1";
3
  this.prop2 = "valeur2";
4
};
5
Element.prototype.prop3 = 'valeur3';
6
const enfant = new Element();
function Element(){
  this.prop1 = "valeur1";
  this.prop2 = "valeur2";
};
Element.prototype.prop3 = 'valeur3';
const enfant = new Element();
Constructeur Element

Testez le code précédent et vérifiez les instructions suivantes :

CTRL+C pour copier, CTRL+V pour coller
1
enfant
2
enfant.constructor
3
enfant.constructor.prototype
enfant
enfant.constructor
enfant.constructor.prototype

MéthodeHéritage

Réalisons deux constructeurs

CTRL+C pour copier, CTRL+V pour coller
1
function Element(prop1, prop2){
2
    this.prop1 = prop1;
3
    this.prop2 = prop2;
4
};
5
function Enfant(prop1, prop2, prop3){
6
    this.prop1 = prop1;
7
    this.prop2 = prop2;
8
    this.prop3 = prop3;
9
};
function Element(prop1, prop2){
    this.prop1 = prop1;
    this.prop2 = prop2;
};
function Enfant(prop1, prop2, prop3){
    this.prop1 = prop1;
    this.prop2 = prop2;
    this.prop3 = prop3;
};
Constructeur Héritage

Pour générer l'héritage, on doit modifier le lien de prototypage de notre enfant.

Enfant doit hériter du prototype de Element.

C'est la méthode setPrototypeOf de Object qui permet de modifier le lien.

CTRL+C pour copier, CTRL+V pour coller
1
Object.setPrototypeOf(Enfant.prototype, Element.prototype);
Object.setPrototypeOf(Enfant.prototype, Element.prototype);
Constructeur Héritage

Il faut modifier le constructeur de Enfant pour qu'il utilise le constructeur de Element.

CTRL+C pour copier, CTRL+V pour coller
1
function Element(prop1, prop2){
2
    this.prop1 = prop1;
3
    this.prop2 = prop2;
4
};
5
function Enfant(prop1, prop2, prop3){
6
    Element.call(this, prop1, prop2);
7
    this.prop3 = prop3;
8
};
9
Object.setPrototypeOf(Enfant.prototype, Element.prototype);
10
const enfant = new Enfant(1,2,3);
function Element(prop1, prop2){
    this.prop1 = prop1;
    this.prop2 = prop2;
};
function Enfant(prop1, prop2, prop3){
    Element.call(this, prop1, prop2);
    this.prop3 = prop3;
};
Object.setPrototypeOf(Enfant.prototype, Element.prototype);
const enfant = new Enfant(1,2,3);

Testez le code précédent et vérifiez les instructions suivantes :

CTRL+C pour copier, CTRL+V pour coller
1
enfant
2
enfant.constructor
3
enfant.constructor.prototype
enfant
enfant.constructor
enfant.constructor.prototype