Fonction constructeur JavaScript

Dans ce tutoriel, vous découvrirez la fonction constructeur JavaScript et la manière d’utiliser le mot-clé new pour créer un objet.

Introduction aux fonctions constructrices JavaScript

Dans le tutoriel sur les objets JavaScript, vous avez appris à utiliser la syntaxe du littéral d’objet pour créer un nouvel objet.

Par exemple, l’exemple suivant crée un nouvel objet personne avec deux propriétés prenom et nom:

let personne = {
    prenom: 'Cristiano',
    nom: 'Ronaldo'
};

En pratique, vous avez souvent besoin de créer de nombreux objets similaires comme l’objet personne.

Pour ce faire, vous pouvez utiliser une fonction constructeur pour définir un type personnalisé et l’opérateur new pour créer plusieurs objets à partir de ce type.

Techniquement parlant, une fonction constructeur est une fonction régulière avec la convention suivante :

Le nom d’une fonction constructeur commence par une lettre majuscule comme Personne, Document, etc.
Une fonction constructeur ne doit être appelée qu’avec l’opérateur new.

L’exemple suivant définit une fonction constructeur appelée Personne :

function Personne(prenom, nom) {
    this.prenom= prenom;
    this.nom= nom;
}

Dans cet exemple, la Personne est identique à une fonction ordinaire, sauf que son nom commence par la lettre majuscule P.

Pour créer une nouvelle instance de la Personne, vous utilisez l’opérateur new :

let person = new Person('Mario','Bros');

En gros, l’opérateur new fait ce qui suit :

• Créer un nouvel objet vide et l’affecter à la variable this.
• Affecter les arguments ‘Mario’ et ‘Bros’ aux propriétés prenom et nom de l’objet.
• Retourner la valeur this.

La fonction constructeur Personne vous permet de créer plusieurs objets similaires. Par exemple :

let personne1 = new Person('Cristiano','Ronaldo')
let personne2 = new Person('James','Le Bron')

Ajout de méthodes aux fonctions constructives JavaScript

Un objet peut avoir des méthodes qui manipulent ses données. Pour ajouter une méthode à un objet créé via la fonction constructeur, vous pouvez utiliser le mot-clé this. Par exemple :

function Personne(prenom, nom) {
    this.prenom= prenom;
    this.nom= nom;

    this.getNomComplet= function () {
        return this.prenom+ " " + this.nom;
    };
}

Maintenant, vous pouvez créer un nouvel objet Personne et appeler la méthode getFullName() :

let personne = new Personne("Cristiano", "Ronaldo");
console.log(personne .getNomComplet());

Résultat

Cristiano Ronaldo

Le problème avec la fonction du constructeur est que lorsque vous créez plusieurs instances de la personne, la méthode this.getNomComplet() est dupliquée dans chaque instance, ce qui n’est pas efficace en termes de mémoire.

Pour résoudre ce problème, vous pouvez utiliser le prototype afin que toutes les instances d’un type personnalisé puissent partager les mêmes méthodes.