Programmation orientée objet avec le langage JavaScript (1re partie)

JavaScript est un langage de script créé par Netscape en 1995 et standardisé par l'organisme EMCA en 1996 et 1997. Cette standardisation a abouti au standard ECMAScript spécifié dans le document ECMA-262, ce dernier décrivant les mécanismes de base du langage.

Cette spécification sert de fondations aux différents dialectes suivants :

• JavaScript correspondant à un enrichissement d'ECMAScript ;
• JScript correspondant à la mise en œuvre de Microsoft ;
• ActionScript, correspondant à la mise en œuvre d'Adobe.

Le langage JavaScript est couramment utilisé dans des navigateurs web afin d'ajouter des traitements et de la richesse à ce niveau. Qui n'a jamais réalisé des contrôles de validité de champs de formulaire avec JavaScript. Le langage est connu pour cette utilisation, mais il peut être également embarqué dans d'autres types d'applications afin de rendre leurs traitements plus flexibles et modifiables pendant leurs exécutions.

Dans cet article, nous nous concentrons sur le cœur du langage JavaScript et n'aborderons pas l'utilisation de JavaScript dans un navigateur, à savoir l'utilisation de ce langage conjointement avec (X)HTML et CSS par l'intermédiaire d'objets fournis par l'environnement d'exécution.

Afin de tester les exemples de code fournis dans cet article, nous vous conseillons d'utiliser l'outil Rhino [3], l'implémentation de JavaScript en open source et en Java de Mozilla.

Étant très légère, cette implémentation permet donc de tester rapidement des scripts JavaScript en dehors de navigateurs web par l'intermédiaire d'une console interactive d'exécution fournie par l'outil. Cette dernière peut également être utilisée pour exécuter un fichier de scripts. Afin de lancer la console, vous pouvez utiliser le script de lancement (rhino.bat) suivant, script fonctionnant sous Windows :

set JAVA_HOME=C:\applications\jdk1.5.0_07
set RHINO_HOME=C:\applications\rhino1_6R3

%JAVA_HOME%\bin\java -classpath %RHINO_HOME%\js.jar org.mozilla.javascript.tools.shell.Main -f %1

Il prend en paramètre le fichier de script à exécuter et affiche les différents messages sur la sortie standard de la console. Ces messages peuvent être applicatifs en se fondant sur la fonction print ou résultant d'erreurs de syntaxe des scripts. L'équivalent de ce script pour Unix (rhino.sh) est décrit ci-dessous :

#!/bin/sh

JAVA_HOME=/applications/jdk1.5.0_07
RHINO_HOME=/applications/rhino1_6R3

$JAVA_HOME/bin/java -classpath $RHINO_HOME/js.jar org.mozilla.javascript.tools.shell.Main -f $1

Tous les scripts de l'article sont fournis sous forme de fichiers qui peuvent être passés en paramètre de ce script de lancement. Ces derniers sont téléchargeables au niveau de chaque portion de code de l'article. Néanmoins, si vous préférez tester l'exécution des scripts dans un navigateur, des fichiers HTML de tests sont également fournis avec des traitements identiques.

Maintenant que le décor a été planté, commençons la description des différents concepts de JavaScript relatifs à la programmation orientée objet.

Tout d'abord, en JavaScript, la notion de classe n'existe pas et le langage n'est pas typé. Nous pouvons déjà nous apercevoir que les mécanismes relatifs à la programmation orientée objet vont être très différents de ceux de Java ou C++. Ils permettront néanmoins de mettre en œuvre la plupart des concepts de ce paradigme.

En effet, en JavaScript, tout fonctionne en se fondant sur des objets: avec ce langage, toute entité ou structure peut être vue en tant qu'objet.

Le langage JavaScript permet de créer simplement un objet en se fondant sur l'objet Object ou en utilisant une forme littérale dont la syntaxe est décrite par la notation JSON [4]. Le code suivant illustre la création d'un objet « vierge » avec ces deux techniques :

 

Cacher/Afficher le codeSélectionnez

1.
2.

var obj1 = new Object(); // à partir de l'objet Object
var obj2 = {}; // Avec la notation JSON

Le langage considère les objets en tant que tableau associatif. En effet, chaque élément d'un objet correspond à une « entrée » dans l'objet. Cette dernière est identifiée par un nom, le type n'étant connu qu'à l'exécution. Ainsi, un attribut d'un objet correspond à une entrée avec un type quelconque et une méthode à une entrée dont le type attendu est fonction. Une de caractéristiques d'un tableau associatif est le fait que tout est dynamique. En effet, il est possible d'ajouter, de modifier et de supprimer les entrées de l'objet tout au long de sa vie. Le code suivant illustre la mise en œuvre de ces principes en utilisant les différentes notations supportées par JavaScript:

 

Cacher/Afficher le codeSélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

var obj = new Object();
obj["attribut"] = "valeur1";
// similaire à obj.attribut = "valeur1";

obj["methode"] = function(parametre1, parametre2) {
    alert("parametres: " + parametre1 + ", " + parametre2);
};
// similaire à obj.methode = ...

// Affichage de la valeur de attribut de obj
alert("Valeur de attribut: " + obj.attribut);

// Exécution de la méthode methode de obj
obj.methode("valeur1", "valeur2");

Le code ci-dessus peut être mis en œuvre de manière similaire avec la notation JSON dont nous avons commencé à parler précédemment. Elle permet de décrire de manière littérale des tableaux associatifs et donc des objets JavaScript, car, comme nous l'avons dit précédemment, ces deux notions sont similaires en JavaScript. Le code suivant décrit comme mettre en œuvre l'exemple précédent avec la notation JSON :

 

Cacher/Afficher le codeSélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

var obj = {
    attribut: "valeur",
    methode: function(parametre1, parametre2) {
        alert("parametres: " + parametre1 + ", " + parametre2);
    }
}

// Affichage de la valeur de attribut de obj
alert("Valeur de attribut: " + obj.attribut);

// Exécution de la méthode methode de obj
obj.methode("valeur1", "valeur2");

Comme vous avez pu le constater dans les deux exemples précédents, rien n'est typé et le rattachement d'attributs et de méthodes à un objet est dynamique. Il peut être réalisé à n'importe quel moment de l'exécution. De plus, l'exemple précédent illustre le fait que les fonctions JavaScript sont prises en compte par le langage en tant qu'objet. Les conséquences de cet aspect sont la possibilité de les affecter et les référencer. De plus, comme tout objet, les fonctions possèdent des attributs et des méthodes. Nous reviendrons sur cet aspect par la suite, car il est capital dans la mise en œuvre de programmation orientée objet par prototypage.

À l'instar des fonctions, les types primitifs, les chaines de caractères et les tableaux sont en JavaScript des pseudoobjets qui peuvent être créés par une forme littérale, mais également par instanciation. Ces pseudoobjets possèdent également des attributs et des méthodes et il n'est pas rare de voir ce genre de code JavaScript :

 

Cacher/Afficher le codeSélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.

// Nombre
var unEntier = 10;
unEntier.   //TODO

// Chaine de caractères
var uneChaine = "Ma chaine de caractères";

var uneAutreChaine1 = uneChaine.toString();
var uneAutreChaine2 = uneChaine.substring(0, 10);

Avant de voir la manière de mettre en œuvre ses propres objets, détaillons les différents éléments du langage sur lesquels JavaScript se fonde afin de mettre en œuvre la programmation orientée objet par prototype.

Comme nous l'avons vu précédemment et contrairement à Java et C++, une fonction peut être référencée par l'intermédiaire d'une variable et être utilisée telle quelle par la suite. En JavaScript, une fonction est donc implicitement considérée et manipulée en tant qu'objet de type Function et ce, quelle que soit la manière dont elle a été créée. Notons que ce mécanisme est présent dans d'autres langages de script tels que Groovy [5].

Une des conséquences est que les fonctions JavaScript possèdent des attributs et des méthodes. L'attribut qui nous intéresse particulièrement est prototype. En effet, comme son nom l'indique et comme vous vous en doutez, il va être utilisé pour mettre en œuvre la programmation orientée objet par prototype en permettant de définir la structure des objets. Nous reviendrons par la suite sur cet attribut dans une section dédiée.

Les fonctions JavaScript possèdent également d'autres particularités. Tout d'abord, le langage ne se fonde pas sur le concept de signature afin de les identifier à l'exécution, mais uniquement sur leurs noms. Cela conduit à des comportements assez inattendus puisque, quand deux fonctions portent le même nom, c'est la dernière définie qui est exécutée et ce quelque soit les paramètres qui lui sont passés. Le code suivant illustre ce fonctionnement :

 

Cacher/Afficher le codeSélectionnez

1.
2.
3.
4.

function test(parametre1) { alert(parametre1); }
function test(parametre1, parametre2) { alert(parametre1 + "," + parametre2); }

test("une valeur"); // appelle la seconde fonction

Afin de gérer les paramètres passés à une fonction, le langage JavaScript met à disposition la variable arguments dans les fonctions. Cette dernière correspond à un tableau contenant les différents paramètres passés à la fonction lors de son appel. Cet élément de langage offre la possibilité à une fonction de gérer différents appels avec un nombre de paramètres différent. Le code suivant illustre l'utilisation de la variable arguments dans une fonction :

 

Cacher/Afficher le codeSélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.

function test() {
    alert("Nombre de paramètres: " + arguments.length);
    for(var i=0; i<arguments.length; i++) {
        alert("Paramètre " + i + ": " + arguments[i]);
    }
}

test("valeur1", "valeur2");
test("valeur1", "valeur2", "valeur3", "valeur4");

D'autres fonctionnalités de JavaScript en rapport avec les fonctions sont le support par le langage des closures [6] et la possibilité de définir des fonctions dans le corps de fonctions. Les closures correspondent à des fonctions particulières qui peuvent utiliser des variables définies en dehors de leur portée. Une utilisation intéressante consiste en la possibilité d'accéder aux variables définies dans une fonction contenant à partir de la fonction contenue, comme l'illustre le code suivant :

 

Cacher/Afficher le codeSélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

function maFonction(parametre) {
    var maVariable = parametre;
    
    function monAutreFonction() {
        alert("maVariable : " + maVariable);
    }

    return monAutreFonction;
}

var fonction = maFonction("mon paramètre");
fonction(); // Affiche la valeur "mon paramètre"

Ce code paraît exotique au premier abord, mais il permet de comprendre le mécanisme des closures sur lequel va se fonder JavaScript afin de mettre en œuvre la programmation orientée objet. Avant de continuer, revenons sur l'exemple précédent afin de l'expliquer plus précisément.

Dans cet exemple, nous remarquons que la fonction maFonction retourne une fonction, ce qui est possible avec JavaScript puisque le langage considère les fonctions comme des objets et qu'elles peuvent être affectées… De plus, si vous avez l'œil, vous avez remarqué que la définition de la fonction retournée se trouve dans le corps même de la fonction maFonction et qu'elle utilise une variable locale de cette dernière. Quand la fonction retournée est exécutée, elle utilise la valeur de cette variable même si la fonction est exécutée en dehors de maFonction.

Le mot clé this est également important dans la mise en œuvre de la programmation orientée objet en JavaScript. Il est utilisé dans une méthode afin de référencer l'instance sur laquelle est exécutée cette méthode. Il faut néanmoins faire attention lorsque l'on utilise this dans une fonction qui n'est pas rattachée à un objet, car soit une erreur se produit ou des champs possèdent des valeurs non définies. L'exemple suivant illustre la mise en œuvre de ce mot clé :

 

Cacher/Afficher le codeSélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

var maFonction = function() {
    alert("attribut: " + this.attribut);
};

maFonction(); // Affiche la valeur undefined, car this.attribut ne peut être résolu

// Création de l'objet obj1 et affectation de maFonction
var obj1 = {
    attribut: "valeur1",
    methode: maFonction
}

obj1.methode(); // Affiche la valeur de attribut, à savoir valeur1

// Création de l'objet obj2 et affectation de maFonction
var obj2 = {
    attribut: "valeur2",
    methode: maFonction
}

obj2.methode(); // Affiche la valeur de attribut2, à savoir valeur2

Nous voyons clairement dans l'exemple ci-dessus que la valeur affichée par la fonction maFonction change en fonction de l'objet à laquelle elle est rattachée.

Pour clôturer cette section, abordons une dernière fonctionnalité relative aux fonctions et au mot clé this. Comme nous l'avons dit précédemment, les fonctions sont considérées par le langage JavaScript comme des pseudoobjets. Elles possèdent deux intéressantes méthodes, les méthodes apply et call, qui permettent d'exécuter des fonctions dans le contexte d'un objet. L'unique différence entre ces deux méthodes consiste dans le passage des paramètres. La première (apply) utilise un tableau pour ses paramètres tandis que la seconde (call) les place en paramètre de l'appel. Le code suivant illustre la mise en œuvre de ces deux méthodes :

 

Cacher/Afficher le codeSélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

function maFonction(parametre1, parametre2) {
    alert("Parametres: " + parametre1 + ", " + parametre2 + " - Attribut: " + this.attribut);
}

var obj1 = {
    attribut: "valeur1",
}

var obj2 = {
    attribut: "valeur2",
}

maFonction.apply(obj1, [ "valeur1", "valeur2" ]);
maFonction.call(obj1, "valeur1", "valeur2");

maFonction.apply(obj2, [ "valeur1", "valeur2" ]);
maFonction.call(obj2, "valeur1", "valeur2");

Comme nous l'avons dit précédemment, le langage JavaScript ne supporte pas le concept de classe. Il est néanmoins possible de le simuler afin de définir la structure d'objets en se fondant sur les concepts des fonctions et closures du langage.

Le point important à comprendre à ce niveau est l'utilisation du mot clé new. En JavaScript, ce dernier peut être utilisé en se fondant sur une fonction afin d'initialiser un objet. L'initialisation est réalisée en utilisant les éléments contenus dans la fonction, ces derniers peuvent être aussi bien des attributs que des méthodes. Le code suivant illustre la mise en œuvre d'une classe JavaScript en utilisant ce principe :

 

Cacher/Afficher le codeSélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

function MaClasse(parametre1, parametre2) {
    this.attribut1 = parametre1;
    this.attribut2 = parametre2;
    
    this.methode = function() {
        alert("Attributs: " + this.attribut1 + ", " + this.attribut2);
    }
}

var obj = new MaClasse("valeur1", "valeur2");
alert("Attribut1: " + obj.attribut1); // Affiche la valeur de l'attribut attribut1
obj.methode(); // Affiche la chaine de caractères contenant les valeurs des attributs

Nous pouvons remarquer dans le code ci-dessus que la fonction MaClasse permet de définir le nom de la classe et correspond au constructeur de cette dernière. Ainsi les paramètres de la fonction permettent d'initialiser la classe. Nous notons également l'utilisation du mot clé this qui permet de définir des éléments publics de la classe.

Le précédent exemple permet donc de définir une classe MaClasse dont la figure suivante illustre sa structure dans un diagramme de classes UML.

Cette première approche permet de gérer la visibilité des éléments d'une classe. En effet, en supprimant this. devant les attributs attribut1 et attribut2, ces derniers ne sont plus accessibles qu'en interne à la classe et sont alors de visibilité privée, comme l'illustre le code suivant :

 

Cacher/Afficher le codeSélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

function MaClasse(parametre1, parametre2) {
    var attribut1 = parametre1;
    var attribut2 = parametre2;
    
    this.methode = function() {
        alert("Attributs: " + attribut1 + ", " + attribut2);
    }
}

var obj = new MaClasse("valeur1", "valeur2");
alert("Attribut1: " + obj.attribut1);
// Affiche la valeur undefined (attribut1 ne peut être résolu)
obj.methode();
// Affiche la chaine de caractères contenant les valeurs des attributs

Notons que cet aspect peut également être décliné afin de mettre en œuvre des méthodes privées. Dans ce cas, les variables référençant les méthodes de classe sont des variables locales au constructeur, comme l'illustre le code suivant :

 

Cacher/Afficher le codeSélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

function MaClasse(parametre1, parametre2) {
    var attribut1 = parametre1;
    var attribut2 = parametre2;
    
    var methode = function() {
        alert("Attributs: " + attribut1 + ", " + attribut2);
    }
}

var obj = new MaClasse("valeur1", "valeur2");
alert("Attribut1: " + obj.attribut1);
// Affiche la valeur undefined (attribut1 ne peut être résolu)

try {
    obj.methode();
} catch(err) {
    print(err);
}// Génère une erreur, car la méthode ne peut pas être résolue à l'extérieur de la classe

Cette approche consiste en la manière la plus simple de mettre en œuvre des classes en JavaScript, mais elle souffre d'une limitation. En effet, à chaque fois que la méthode de construction de l'objet est appelée, une nouvelle méthode methode est créée pour l'objet. Aussi, si dix objets de type MaClasse sont créés, dix méthodes methode sont créées. Cet aspect a des impacts sur les performances et la consommation mémoire surtout dans des applications JavaScript utilisant beaucoup d'objets du type MaClasse. Le comportement souhaité serait que tous les objets pointent vers la méthode methode. La fonctionnalité de prototypage de JavaScript permet de pallier cet aspect.

Abordons maintenant le concept de prototypage qui correspond à spécifier une sorte de modèle indépendamment du constructeur afin d'initialiser chaque objet à sa création. Comme nous l'avons mentionné rapidement précédemment, la spécification de ce modèle se réalise en se fondant sur la propriété prototype de la classe Function. Il convient donc ainsi de toujours de créer une fonction constructeur comme précédemment afin de définir une classe. Cependant, contrairement à l'approche précédente, les éléments de la classe ne sont plus tous définis dans cette fonction.

La propriété prototype s'initialise en se fondant sur un objet ou un tableau associatif, notions équivalentes comme nous l'avons vu précédemment. Le code suivant illustre l'adaptation de la classe MaClasse précédemment mise en œuvre en se fondant sur le prototypage :

 

Cacher/Afficher le codeSélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

function MaClasse(parametre1, parametre2) {
    this.attribut1 = parametre1;
    this.attribut2 = parametre2;
}

MaClasse.prototype = {
    methode: function() {
        alert("Attributs: " + this.attribut1 + ", " + this.attribut2);
    }
}

var obj = new MaClasse("valeur1", "valeur2");
alert("Attribut1: " + obj.attribut1); // Affiche la valeur de l'attribut attribut1
obj.methode(); // Affiche la chaine de caractères contenant les valeurs des attributs

Le premier constat par rapport à ce code est le fait que la méthode methode n'est plus définie dans le corps de la fonction MaClasse, mais dans un bloc bien distinct. La mise en œuvre de la visibilité privée n'est alors plus possible. D'un autre côté, toutes les instances de la classe MaClasse pointent vers la même méthode methode, cette dernière étant définie dans le prototype associée à la classe. Cette fonctionnalité permet donc de corriger ainsi le problème soulevé précédemment. L'objet spécifié au niveau du prototype permet également de préciser des attributs, ces derniers servant de valeurs par défaut aux attributs des objets.

Une des caractéristiques importantes du prototypage est que les modifications de l'objet qui lui est associé, sont appliquées sur tous les objets qui vont été instanciés. Par contre, les objets précédemment instanciés ne sont pas impactés. Le code suivant illustre cet aspect :

 

Cacher/Afficher le codeSélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

function MaClasse() {
    this.attribut = "valeur";
}

var obj1 = new MaClasse();
try {
    obj1.methode(); // Erreur, car la méthode n'existe pas pour l'objet
} catch(err) {
    alert("Erreur: " + err);
}

MaClasse.prototype = {
    methode: function() {
        alert("Attribut: " + this.attribut);
    }
}

var obj2 = new MaClasse();
obj2.methode();
// Fonctionne correctement, car la méthode a été ajoutée au prototype de MaClasse

La modification du prototype d'une classe peut être mise en œuvre aussi bien sur nos objets et classes que sur des objets et classes de JavaScript ou sur ceux fournis par l'environnement d'exécution. Comme nous le verrons par la suite, cet aspect est utilisé dans des bibliothèques JavaScript telles que Prototype [9].

Une dernière approche pour mettre en œuvre des classes consiste à combiner la première approche avec celle fondée sur le prototypage. Dans ce cas, l'initialisation de la propriété prototype est réalisée dans le code du constructeur de la classe, ceci offrant la possibilité d'avoir accès à toutes les variables et méthodes de cette fonction particulière. Par contre, les principes décrits dans les différentes approches restent vrais. Les méthodes définies directement dans le constructeur seront dupliquées alors que celles positionnées sur le prototype non.

Le seul point subtil de cette approche est de forcer la propriété prototype à n'être initialisée qu'une seule et unique fois la première fois que le constructeur est appelé. Pour ce faire, il suffit d'ajouter une propriété personnalisée directement sur le constructeur de la manière suivante :

 

Cacher/Afficher le codeSélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

function MaClasse() {
    this.attribut = "valeur";

    if( typeof MaClasse.initialized == "undefined" ) {
        MaClasse.prototype.methode = function() {
            alert("Attribut: " + this.attribut);
        };
        MaClasse.initialized = true;
    }
}

var obj = new MaClasse();
alert(obj.attribut); // Affiche la valeur de l'attribut attribut
obj.methode();
// Fonctionne correctement, car la méthode a été ajoutée au prototype de MaClasse