26 août 2016

L'opérateur new et les constructeurs en Javascript

Design & Code

Marcos

Almeida

26 août 2016

L'opérateur new et les constructeurs en Javascript

Design & Code

Marcos

Almeida

26 août 2016

L'opérateur new et les constructeurs en Javascript

Design & Code

Marcos

Almeida

Cet article est la continuation de mon précèdent article sur l'opérateur this en Javascript. Nous avons vu précédemment que le mot clé this et les appels à fonction d'un objet sont en fait du sucre syntaxique qui cache des appels à des fonctions telles que apply() et call(). Ici, on parlera de l'opérateur new et des mots clés class et constructor introduits dans ES6. Ces mots clés sont utilisés par le langage pour donner l'impression de fonctionner comme un langage orienté objet classique.

Un objet est un dictionnaire

Pour commencer, on reprend la notion d'objet en Javascript. Dans un langage orienté objet classique, une classe définit un ensemble de propriétés et comportements (méthodes) hérité par ses objets. Un objet est une instance d'une classe, dans le sens où ils héritent des propriétés et méthodes définies par la classe.

Mais Javascript n'est pas un langage orienté objet classique, car en Javascript il n'y a pas de classes !

Tout d'abord, un objet en Javascript n'est qu'un dictionnaire qui mappe les noms de ses propriétés en ses valeurs respectives.

Prenons l'exemple suivant, où on définit une classe A avec un constructeur qui set une propriété name et une méthode sayHi() qui affiche la valeur de name.

Sortie :

Le code suivant est équivalent au code précèdent. Là on définit un dictionnaire obj, avec deux clefs : name et sayHi.

Sortie :

On pourrait aller encore plus loin et modifier la valeur de name avant d'apler sayHi(). On verra que la méthode sayHi() affichera le même texte peu importe si on a modifié la valeur de name en utilisant la syntaxe dictionnaire (1) ou la syntaxe objet.

Une classe est un constructeur, un constructeur est une fonction

Un objet n'est pas une instance d'une classe, mais une instance d'une fonction : son constructeur. Si on exécute le code suivant, on verra que A n'est pas une classe, mais une fonction avec deux paramètres. Les deux paramètres de son constructeur.

Sortie:

[Function: A]

Quand on appelle un constructeur, on appelle en fait une fonction. Le moteur d'exécution se charge de setter la valeur de this comme étant l'objet qui est en train d'être créé.

Si on exécute le code suivant, on verra que le résultat sera le même.

Piège : si A est une fonction, je peux l'appeler directement...

Eh bien oui. Essayons le code suivant :

Sortie:

On verra que obj est undefined même si la fonction A a bien été appelée ! Si vous vous rappelez de l'article précèdent, vous savez ce qui s'est passé : on a setté la valeur de name dans l'objet global/window.

Le code suivant illustre ça :

Sortie :

Et si on essayait la même chose avec la syntaxe class ?

Sortie :

[stdin]:7
    const obj = A();
                ^
TypeError: Class constructor A cannot be invoked without 'new'
    at [stdin]:7:17
    at Script.runInThisContext (vm.js:91:20)
    at Object.runInThisContext (vm.js:298:38)
    at Object. ([stdin]

Et là on trouvera la première différence entre un constructeur et une fonction. On verra que le moteur Javascript détecte l'utilisation d'un constructeur sans le mot clé new et produit une erreur.

Pour aller plus loin

Dans cet article on a vu l'opérateur new et sa relation avec les constructeurs et classes en Javascript. C'est pourquoi dans cette dernière partie, je liste quelques bonnes références où vous pouvez voir, plus en détails le fonctionnement de l'orientation objets en Javascript. Dans la première section je liste des articles qui se contentent d'expliquer la spéc. Puis, je liste des articles qui présentent les avantages et inconvénients de ce modèle. Et pour finir, vous trouverez des articles qui se concentrent sur les bonnes pratiques à adopter.