Création d'une classe en JS

Hello

https://www.typescriptlang.org/play/index.html

JS reste le langage que j'ai le plus de mal à appréhender, à chaque fois je me demande comment je dois faire pour faire l'équivalent d'une classe, il y a n façons de faire en JS ce qui ne m'aide pas. En regardant l'exemple fourni par Microsoft dans ses exemples Typescript/JS je comprends ceci :
- les "classes" JS sont en fait juste des variables que l'on met en majuscule car tous les dev sont ok pour saisir des noms de classes en majuscule depuis des décennies, ces variables contiennent juste une fonction et c'est ce que JS appelle une classe,
- un constructeur JS est juste une fonction ayant strictement le même nom que la classe que l'on souhaite créer ?
- dans l'exemple de classe, pourquoi mettre une parenthèse après var Greeter = ? C'est pas possible de mettre fonction() directement ?
- ligne 8 : return Greeter est exécuté quand exactement ?
- pourquoi mettre des parenthèses après la fin de la définition de var Greeter = (function()) ligne 9 ?

Il y a d'autres points qui ne m'aident pas, ce que j'ai déjà pu voir ailleurs :
- au tout début d'une classe on met this dans une variables comme _ pour ne pas perdre le scope de this, du coup on peut faire _.uneMethode() partout. Qu'elle méthode est à privilégier ?
- même question pour les objects {}, est-ce que je dois faire var MaClasse = (function() {}) ou alors { unTruc: function(a,b) {} } ?

C'est pas clair dans ma tête et un peu d'aide serait la bienvenue.

TypeScript target ES3 par défaut. C'est à dire qu'il transpile son code TypeScript en une version de JavaScript qui date de 1999 pour des raisons de compatibilité avec les vieux browsers.

Le JavaScript de nos jours sait gérer les classes par défaut en natif. Tout dépend de ta plateforme d'exécution en fait.

Quels sont tes navigateurs minimums à supporter ?

Si tu n'as pas besoin de supporter IE (qui je le rappelle ne devrait plus être supporté car déprécié), tu peux utiliser les classes telles quelles sans avoir besoin d'un outil de transpilation (Babel ou TypeScript).

Salut,

Si mes souvenirs sont bons tu te posais déjà des questions autour de cela et tu avais du mal à t'y retrouver eh bien dans ce cas peut-être que le plus simple pour toi serait d'utiliser les class ES6, tu peux alors avoir un code assez proche du code avec TypeScript... (D'ailleurs le type de code fourni par le compilateur TypeScript peut être fixé via des options...).

Mais si tu veux faire autrement avec des constructeurs il y a plusieurs façons...

Citation:

---

Envoyé par Aizen64

dans l'exemple de classe, pourquoi mettre une parenthèse après var Greeter = ?

---

Cela permet d'en faire une fonction immédiatement exécutée, une IIFE (Immediately-Invoked Function Expression). La fonction est exécutée au chargement du script...

Citation:

---

Envoyé par Aizen64

C'est pas possible de mettre fonction() directement ?

---

Si c'est possible mais alors la fonction ne sera pas immédiatement exécutée, il faudra ajouter une instruction pour l’exécuter...

Citation:

---

Envoyé par Aizen64

ligne 8 : return Greeter est exécuté quand exactement ?

---

Lorsque la fonction IIFE est exécutée (au chargement du script).

En fait il faudrait que tu regardes des tutoriels sur les IIFE...

Ah Marco46 a répondu entre temps...

Aizen64, l’impression de complexité que tu as est normale. Le modèle objet de JS est bordélique pour des raisons historiques, commerciales, techniques et on pourrait presque même dire religieuses en ce qui concerne certaines personnes.

En ES3 on a deux choses : les constructeurs, qui sont juste de bêtes fonctions, et les prototypes, qui sont le fondement théorique du modèle objet de JS. Et si on n’a pas une petite idée de comment marchent les prototypes, on va droit dans le mur, car tout JS repose là-dessus, même les class ES6 (et à plus forte raison celles de TypeScript).

Et donc, traditionnellement, en JS on utilise cet unique combo constructeur + prototype pour définir une « classe », comme on peut trouver dans tous les tutos :

Code:

---

1 2 3 4 5 6 7 8 9

function Bidule() { // code d’instanciation // ... }   Bidule.prototype = { // propriétés et méthodes de la « classe » // ... };

---

Et pour faire de l’héritage, ahem. Je me souviens de ces cours de maths au collège où je me contentais d’apprendre la formule sans chercher à comprendre. Ben là c’est pareil :

Code:

---

1 2 3 4

function BiduleSpecial() { // ... } BiduleSpecial.prototype = new Bidule(); // parce que

---

Et comme tout le monde fait comme ça depuis des années, les moteurs JS (V8, SpiderMonkey, etc.) sont optimisés pour ce cas de figure. Il me semble que cette histoire de hidden classes commence à être assez connue aujourd’hui.

Il a fallu attendre ES5 (quelqu’un me corrige si je me trompe) pour que JavaScript assume pleinement sa nature de langage à prototypes en se dotant de la fonction Object.create(). Avec elle, plus besoin de constructeurs.
Mais c’est une façon de penser radicalement différente, et peut-être que la vraie question à se poser ici est « ai-je vraiment besoin de trouver un équivalent aux classes dont j’ai l’habitude dans les autres langages ? »

Tout ça a été débattu en détail dans la discussion L’opérateur new, bonne ou mauvaise pratique ?

À propos du mot-clé this, c’est une histoire de liaison de contexte. Une fonction déclarée avec le mot-clé function a une liaison dynamique. Pour faire simple, le contexte this sera ce qui se trouve « avant le point » au moment de l’appel. Par exemple, dans monObjet.methode(), au sein de methode() le contexte sera monObjet. S’il n’y a rien devant le point, ce sera soit window, soit undefined selon le mode (et je t’encourage vivement à toujours utiliser le mode strict).
Le problème se pose quand on utilise une fonction de rappel, par exemple pour une requête ajax.

Code:

---

1 2 3

req.onload = function () { // quel sera le contexte ici ? };

---

Autre exemple :

Code:

---

1 2 3

setTimeout(function () { // quel sera le contexte ici ? }, 1000);

---

C’est pour cette raison qu’on met this dans une variable. Bien sûr, on peut bidouiller avec les méthodes .call(), .apply() ou .bind(), mais ça a tendance à embrouiller à la maintenance.
Alternativement, on peut utiliser les fonctions flèches d’ES6.