Les Fonctions Constructrices JavaScript

Les fonctions constructrices sont un concept fondamental en JavaScript pour la création d'objets réutilisables. Bien qu'elles soient définies comme des fonctions ordinaires, leur rôle et leur invocation avec l'opérateur new leur confèrent une signification particulière.

Qu'est-ce qu'une Fonction Constructrice ?

Une fonction est considérée comme une fonction constructrice lorsqu'elle est appelée avec l'opérateur new. Par convention, le nom d'une fonction constructrice commence par une lettre majuscule pour la distinguer des fonctions classiques, mais ce n'est qu'une convention, pas une règle technique imposée par le langage.


// Définition d'une fonction ordinaire
function saluer() {
    console.log('Bonjour ! Ceci est une fonction simple.');
}
// Appel d'une fonction ordinaire
const resultatAppel = saluer(); // Exécute le code et retourne undefined
console.log(resultatAppel); // Affiche undefined

// Définition d'une fonction destinée à être un constructeur
function Utilisateur(prenom, age) {
   this.prenom = prenom;
   this.age = age;
}
// Invocation du constructeur avec 'new'
const utilisateur1 = new Utilisateur('Sophie Martin', 30);
console.log(utilisateur1); // Affiche { prenom: 'Sophie Martin', age: 30 }

Dans l'exemple ci-dessus, saluer est une fonction standard, tandis que Utilisateur devient une fonction constructrice lorsqu'elle est utilisée avec new, permettant de générer de nouvelles instances d'objets avec des propriétés initialisées.

Rôle des Fonctions Constructrices

Le rôle principal d'une fonction constructrice est de générer de nouvelles instances d'objets et d'initialiser leurs propriétés ou leurs méthodes. Elles sont particulièrement utiles lorsque vous avez besoin de créer de nombreux objets ayant une structure similaire.

Considérons un scénario où vous devez gérer des informations sur plusieurs livres. Si vous créiez chaque livre comme un objet littéral, vous auriez à répéter le même code pour chaque propriété :


const livreA = { titre: 'La Peste', auteur: 'Albert Camus', annee: 1947, genre: 'Roman' };
const livreB = { titre: '1984', auteur: 'George Orwell', annee: 1949, genre: 'Dystopie' };
const livreC = { titre: 'Le Petit Prince', auteur: 'Antoine de Saint-Exupéry', annee: 1943, genre: 'Conte' };
// ... imaginez 50 livres de plus

Cette approche est fastidieuse et sujette aux erreurs. Les fonctions constructrices offrent une solution élégante en encapsulant la logique de création d'objets. En définissant un constructeur Livre, nous pouvons réutiliser le même modèle pour chaque nouvelle instance :


function Livre(titre, auteur, anneePublication, genre) {
   this.titre = titre;
   this.auteur = auteur;
   this.anneePublication = anneePublication;
   this.genre = genre;
   this.obtenirResume = function() {
       return `"${this.titre}" par ${this.auteur}, publié en ${this.anneePublication}.`;
   };
}

// Création d'instances de livres avec le constructeur
const livre1 = new Livre('Le Spleen de Paris', 'Charles Baudelaire', 1869, 'Poésie');
const livre2 = new Livre('Les Fleurs du mal', 'Charles Baudelaire', 1857, 'Poésie');
const livre3 = new Livre('Vingt mille lieues sous les mers', 'Jules Verne', 1870, 'Aventure');

console.log(livre1.obtenirResume());
// Résultat: "Le Spleen de Paris" par Charles Baudelaire, publié en 1869.

Bien que la création du constructeur puisse prendre un peu de temps, elle simplifie considérablement la création d'objets par la suite, favorisant la réutilisabilité et la maintenabilité du code.

Déroulement de l'Exécution d'un Constructeur

Lorsqu'une fonction est appelée avec l'opérateur new, JavaScript exécute une série d'étapes spécifiques :

  1. Un nouvel objet JavaScript vide est créé en mémoire.
  2. Le mot-clé this à l'intérieur de la fonction constructrice est lié à ce nouvel objet créé.
  3. Le code de la fonction constructrice est exécuté. C'est à ce moment que les propriétés et méthodes sont ajoutées à l'objet this.
  4. L'objet nouvellement construit (qui est la valeur de this) est retourné implicitement par la fonction. Il n'est généralement pas nécessaire d'utiliser un return explicite, sauf si vous souhaitez retourner un objet complètement différent (ce qui est une pratique peu courante et souvent déconseillée pour les constructeurs).

function Produit(nom, prix) {
    // 1. Un nouvel objet vide est implicitement créé.
    // 2. 'this' référence maintenant ce nouvel objet.

    // 3. Le code du constructeur s'exécute, initialisant les propriétés du nouvel objet.
    this.nom = nom;
    this.prix = prix;

    // Note sur les méthodes :
    // Une méthode définie directement ici serait recréée pour chaque instance,
    // ce qui peut consommer plus de mémoire. Pour des méthodes partagées,
    // on utilise généralement le prototype du constructeur.
    // this.afficherDetails = function() {
    //     console.log(`Produit: ${this.nom}, Prix: ${this.prix} €`);
    // };

    // 4. L'objet 'this' (qui est l'instance de Produit) est retourné implicitement.
}

const articleElectronique = new Produit('Smartphone', 799.99);
console.log(articleElectronique); // Affiche { nom: 'Smartphone', prix: 799.99 }

L'opérateur instanceof

L'opérateur instanceof permet de vérifier si un objet est une instance d'un constructeur particulier. Sa syntaxe est objet instanceof Constructeur. Il renvoie true si l'objet est une instance du constructeur spécifié, et false dans le cas contraier.


function Animal(nom) {
    this.nom = nom;
}
const monChien = new Animal('Rex');

// Vérifier si monChien est une instance d'Animal
console.log(monChien instanceof Animal); // true

// Vérifier si monChien est une instance d'une autre fonction (non liée)
function Vegetal(type) {
    this.type = type;
}
console.log(monChien instanceof Vegetal); // false

Il est important de noter que tous les objets en JavaScript sont des descendants de Object. Par conséquent, toute instance d'objet vérifiera positivement l'opérateur instanceof avec le constructeur Object :


console.log(monChien instanceof Object); // true
const tableau = [];
console.log(tableau instanceof Object); // true

En Résumé

  • Une fonction constructrice permet de créer de multiples instances d'objets basées sur un modèle commun.
  • À l'intérieur d'un constructeur, le mot-clé this est utilisé pour attribuer des propriétés et des méthodes au nouvel objet créé.
  • Les constructeurs retournent implicitement l'objet qu'ils ont créé ; un return explicite n'est généralement pas nécessaire.
  • L'opérateur instanceof est un moyen fiable de vérifier la provenance d'un objet par rapport à son constructeur.

Étiquettes: JavaScript constructeur `new` (opérateur) `this` (mot-clé) `instanceof` (opérateur)

Publié le 13 juillet à 01h36