30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Code
  2. ES6
Code

ECMAScript 6 Power Tutorial : Classe et héritage

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called ECMAScript 6 Power Tutorial.
ECMAScript 6 Power Tutorial: Template Strings
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

French (Français) translation by Florian Valence (you can also view the original English article)

J'aimerai partager avec vous une série d'articles à propos d'ECMAScript 6, ma passion pour celui-ci et comment vous pouvez l'utiliser. J'espère que vous prendrez autant de plaisir à les lire que moi à les écrire.

Premièrement, je travaille chez Microsoft sur le moteur de rendu de Microsoft Edge, qui montre une énorme avancée par rapport à celui d'Internet Explorer que nous avons connu (et aimer ?) au fil des années. Sa fonction que j'apprécie le plus est le fait qu'il supporte une bonne partie d'ECMAScript 6. Pour moi, c'est un avantage majeur lorsque l'on écrit de grandes applications pour le web.

Nous avons maintenant prêt de 70% des fonctionnalités d'ECMAScript 6 présentes dans Microsoft Edge, selon http://kangax.github.io/compat-table/es6/ et ES6 sur dev.modern.ie/platform/status.

Table of ECMAScript 6 features on Microsoft Edge

J'adore JavaScript, mais lorsque je dois travailler sur des projets de grande envergure comme Babylon.js, je préfère TypeScript, qui est, d'ailleurs, maintenant utilisé par Angular 2. La raison est que JavaScript (également connu sous le nom d'ECMAScript 5) ne bénéficie pas de tout les éléments de syntax que j'ai l'habitude d'utiliser dans les autres langages avec lesquels j'écris de grand projets. Il me manque les classes et l'héritage, par exemple.

Alors sans plus tarder, entrons dans le vif du sujet :

1. Création d'une classe

JavaScript est un langage orienté prototype, et il est possible de simuler des classes et l'héritage avec ECMAScript 5.

La souplesse des fonctions en JavaScript permet de simuler l'encapsulation à laquelle nous sommes habitués lorsque nous utilisons les classes. L'astuce que nous pouvons utiliser pour cela consiste à étendre le prototype d'un objet :

Nous voyons ici que nous avons défini une « classe » avec des « propriétés » et des « méthodes ».

Le constructeur est défini par la fonction elle-même (fonction Animal) où nous pouvons instancier les propriétés. En utilisant le prototype, nous pouvons définir des fonctions qui seront considérées comme des méthodes d'instance.

Cela fonctionne, mais à condition que vous connaissiez un peu l'héritage du prototype et pour quelqu'un qui vient d'un langage basé sur des classes, cela est très troublant. Bizarrement, JavaScript dispose d'un mot-clé class, mais il ne fait rien. ECMAScript 6 le fait maintenant fonctionner et permet de raccourcir le code :

Le résultat est le même, mais plus simple à écrire et à lire pour un développeur habitué à utiliser les classes. Il n'est pas nécessaire d'utiliser le prototype, et vous pouvez utiliser le mot-clé new pour définir le constructeur.

En outre, les classes introduisent un certain nombre de nouvelles sémantiques qui ne sont pas présentes dans l'équivalent ECMAScript 5. Par exemple, vous ne pouvez pas appeler un constructeur sans utiliser new, et vous ne pouvez pas essayer de construire des méthode avec new. Un autre changement est que les méthodes ne sont pas enumérable.

Point intéressant ici : les deux versions peuvent vivre côte à côte.

Au final, même avec les nouveaux mots-clés, vous vous retrouvez avec une fonction à laquelle une fonction a été ajoutée au prototype. Une « méthode » ici est tout simplement une propriété fonction sur votre objet.

Deux autres caractéristiques fondamentales du développement basé sur les classes, les getters et les setters, sont également pris en charge dans l'ES6. Cela rend beaucoup plus évident ce qu'une méthode est censée faire :

Plutôt pratique, non ?

Mais on voit ici une mise en garde commune à l'encontre de JavaScript: le « pas vraiment privé » membre privé (_age). Il y a quelque temps, j'ai écrit un article sur ce sujet.

Heureusement, nous avons maintenant une meilleure façon de le faire avec une nouvelle fonctionnalité de ECMAScript 6 : les symboles.

En quoi consiste un symbole ? Il s'agit d'un type de données unique et immuable qui pourrait être utilisé comme identificateur pour les propriétés de l'objet. Si vous n'avez pas le symbole, vous ne pouvez pas accéder à la propriété.

Cela conduit à un accès aux membres un peu plus « privé ».

Ou, du moins, moins facilement accessibles. Les symboles sont utiles à l'unicité du nom, mais unicité ne signifie pas privauté. Unicité signifie simplement que si vous avez besoin d'une clé qui ne doit pas entrer en conflit avec une autre clé, créez un nouveau symbole.

Mais ce n'est pas encore vraiment privé car, grâce à Object.getOwnPropertySymbols, les utilisateurs en aval peuvent accéder à vos propriétés symboles.

2. Gestion de l'héritage

Une fois que nous avons les classes, nous voulons également avoir l'héritage. Il est —une fois de plus— possible de simuler l'héritage en ES5, mais c'est assez complexe à faire.

Par exemple, ci-dessous, ce qui est produit par TypeScript pour simuler l'héritage :

Pas vraiment simple à lire.

Mais l'alternative d'ECMAScript 6 est meilleure :

Grâce au mot-clé extends vous pouvez spécifier une classe dans une classe enfant tout en gardant la référence à la racine avec le mot-clé super.

Avec tous ces excellents ajouts, il est maintenant possible de créer des classes et de travailler avec l'héritage sans avoir à traiter avec la magie vaudou prototype.

3. Pourquoi l'utilisation de TypeScript est encore plus pertinente qu'auparavant.

Avec toutes ces nouvelles fonctionnalités disponibles sur nos navigateurs, je pense que c'est encore plus pertinent d'utiliser TypeScript pour générer du code JavaScript.

Tout d'abord, la dernière version du TypeScript (1.4) a commencé à ajouter le support de l'ECMAScript 6 (avec les mots-clés let et const), il vous suffit de garder votre code TypeScript existant et d'activer cette nouvelle option pour lancer la génération de code ECMAScript 6.

Mais si vous regardez attentivement du code TypeScript vous remarquerez que cela ressemble à du ECMAScript 6, les types en plus. Donc apprendre TypeScript aujourd'hui est une excellente façon de comprendre ECMAScript 6 demain !

Conclusion

À l'aide de TypeScript, vous aurez tout cela dès maintenant dans tous les navigateurs comme votre code sera converti en ECMAScript 5. Si vous souhaitez utiliser ECMAScript 6 directement dans le navigateur, vous pouvez mettre à niveau vers Windows 10 et le tester avec le moteur de rendu de Microsoft Edge.

Si vous ne voulez pas le faire juste pour essayer quelques nouvelles fonctionnalités de navigateur, vous pouvez également accéder un ordinateur Windows 10 avec Edge Microsoft sur remote.modern.ie. Cela fonctionne aussi sur votre Mac OS ou Linux.

Bien sûr Microsoft Edge n'est pas le seul navigateur qui prend en charge le standard open source ES6. D'autres navigateurs sont également de la partie, et vous pouvez suivre le niveau de support sur : http://kangax.github.io/compat-table/es6/.

L'avenir de JavaScript avec ECMAScript 6 est prometteur, et honnêtement, j'ai hâte de le voir largement pris en charge sur tous les navigateurs modernes !

Cet article fait partie de la série Web Dev Tech de Microsoft. Nous sommes ravis de partager Microsoft Edge et le nouveau moteur de rendu EdgeHTML avec vous. Obtenez gratuitement des machines virtuelles ou testez à distance sur votre appareil Mac, iOS, Android ou Windows @ http://dev.modern.ie/.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.