Programmation orientée objet en JavaScript

Apprendre à programmer en orienté objet (prototype et classe) avec JavaScript

a marqué ce sujet comme résolu.

Tout le monde se secoue ! :D

J'ai commencé (dimanche 13 décembre 2015 à 21h02) la rédaction d'un tutoriel au doux nom de « Programmation orientée objet en JavaScript » et j'ai dans l'objectif de proposer en validation un texte aux petits oignons. Je fais donc appel à votre bonté sans limite pour dénicher le moindre pépin, que ce soit à propos du fond ou de la forme. Vous pourrez consulter la bêta à votre guise à l'adresse suivante :

Merci !

+0 -0

Bonsoir messieurs :) ,

artragis, le mini-tuto OOP JS est terminé.

Javier, mon mini-tuto cible les développeurs qui souhaitent savoir un maximum de choses sur la programmation orienté-objet JavaScript (et si possible en moins de 5 minutes), donc chaque sous-partie doit traiter les concepts pointus de manière simple, concis, relever l'essence du sujet tout en restant focus sur la programmation orienté objet JS. Pour être franc, lorsque je vois un tutoriel complet (cf : qui traite des variables, blocs conditionnels, boucles, manipulation du DOM etc), ils sont dédiés aux très débutants, je n'ai tout simplement pas envie de les lire dans un cadre d'un apprentissage pour la simple et bonne raison que je connais déjà 80-90% de leur contenu, donc je me désiste très facilement à vouloir aller plus loin lorsque je clique sur les chapitres suivants.

+0 -0

Disclaimer : je respecte ton avis, c'est toi qui vois :)

Simplement, j'ai pas l'impression que tu aies vraiment lu le contenu du cours en question. Il est beaucoup plus pointu qu'il n'en a l'air et dispose d'une partie qui se je me souviens bien fait écho à ton petit tuto/mémo/article. Ça me paraissait pas délirant de l'y intégrer pour pas se répeter.

Les gens comme toi (et moi, d'ailleurs) iront directement lire le chapitre en question sur l'OO, non ?

Mais peu importe :) L'important c'est que tu le présentes comme tu en as envie.

+0 -0

Je pense pas non plus.

Il y a plusieurs problèmes avec ton tuto. Le premier et le plus important est que tu donnes pas l'impression de bien maitriser les concepts dont tu parles dans le tuto.

Je vais pas lister toutes les erreurs qu'il y a dedans, je vais plutôt faire quelques remarques :

  • En lisant ton tuto, on pourrait croire qu'il y a une différence entre les prototypes et les classes
  • Tu cites par exemple le mot-clé public, qui n'a aucun effet en ES5 / ES6 (réservé pour usage futur)
+0 -0

Bonjour,

Il y a plusieurs problèmes avec ton tuto. Le premier et le plus important est que tu donnes pas l'impression de bien maitriser les concepts dont tu parles dans le tuto.

Je vais pas lister toutes les erreurs qu'il y a dedans

Et pourtant, c'est la raison pour laquelle que ce forum a été généré, tu pourrais me dire au moins quelques erreurs que tu as trouvé, cela me permettrait d'améliorer ce mini-tuto par exemple. Je ne vais pas me vanter d'être un expert JS que je ne suis pas, mais à mon avis cet impression que tu as est du au fait que mon mini-tutoriel ne donne pas beaucoup d'exemples avec des objets magiciens/warriors ou voiture/camion, je n'explique pas en détail toutes les instructions car je considère qu'un lecteur sait lire : citer des détails aussi inutile que "on se sert de l'opérateur point . pour accéder à un élément de l'objet" sont des détails mineurs qui polluent la lecture. Personnellement je considère qu'une personne qui souhaite apprendre la programmation orienté objet ne va pas commencer à pratiquer ce concept par du JavaScript, une personne qui souhaite apprendre la programmation orienté objet en JavaScript connait généralement un langage orienté objet utilisé coté backend (PHP, Java, C#, Python etc), puis cherche à pousser ses connaissances en JS, c'est pour cela que je parle brièvement de la visibilité (en citant comme référence le mot public comme tu l'auras remarqué) ou des éléments static, par contre si ces concepts avaient des particularités que d'autres langages n'ont je les aurais cité. Le but ici est d'apprendre à savoir comment on fait en JavaScript, pas d'écrire un bouquin POO JS Pour Les Nuls

je vais plutôt faire quelques remarques :

  • En lisant ton tuto, on pourrait croire qu'il y a une différence entre les prototypes et les classes
  • Tu cites par exemple le mot-clé public, qui n'a aucun effet en ES5 / ES6 (réservé pour usage futur)

C'est surement une impression car j'ai fait exprès de mettre le code prototype et classe cote à cote (bien le markdown ZdS ne le permette pas) afin que le lecteur puisse voir la similarité, et si tu lis bien la phrase de conclusion : "JavaScript a toujours permis de créer des objets, l'ajout de la syntaxe avec les classes (ES6) n'est qu'une sucre syntaxique des prototypes pour que les débutants puissent mieux appréhender la programmation orienté objet en JavaScript.".

+0 -0

C'est marrant, tu as cru que je disais que ton tuto était trop technique/compliqué ou n'avait pas assez d'exemples/d'explications pour débutants. Je lui reproche l'inverse. Le contenu est trop pauvre et peu technique à mon avis. Il ne présente pas suffisamment les spécificités de la POO JavaScript.

Je ne vais pas me vanter d'être un expert JS que je ne suis pas, mais à mon avis cet impression que tu as est du au fait que mon mini-tutoriel ne donne pas beaucoup d'exemples avec des objets magiciens/warriors ou voiture/camion, je n'explique pas en détail toutes les instructions car je considère qu'un lecteur sait lire : citer des détails aussi inutile que "on se sert de l'opérateur point . pour accéder à un élément de l'objet" sont des détails mineurs qui polluent la lecture.

Je ne crois pas donner un exemple voiture/camion ou expliquer les opérateurs basiques du JavaScript me donnerait plus l'impression que tu maitrises la poo du JS ou l'héritage par prototype, non.

c'est pour cela que je parle brièvement de la visibilité (en citant comme référence le mot public comme tu l'auras remarqué)

Justement, je ne comprends pas pourquoi tu écris public et pas public. Je trouve que ça porte à confusion. Ok, public est un mot réservé en JS. Mais pourquoi l'indiquer de cette manière : public ?

Le but ici est d'apprendre à savoir comment on fait en JavaScript, pas d'écrire un bouquin POO JS Pour Les Nuls

A mon avis le but n'est pas atteint.

C'est surement une impression car j'ai fait exprès de mettre le code prototype et classe cote à cote (bien le markdown ZdS ne le permette pas) afin que le lecteur puisse voir la similarité, et si tu lis bien la phrase de conclusion : "JavaScript a toujours permis de créer des objets, l'ajout de la syntaxe avec les classes (ES6) n'est qu'une sucre syntaxique des prototypes pour que les débutants puissent mieux appréhender la programmation orienté objet en JavaScript.".

Oui oui, j'ai lu la phrase à la fin. Pourquoi tu la mets à la fin d'ailleurs ? Pourquoi pas dès que tu introduis le mot-clé class ? Ca éviterait les confusions. Tu dis que ton tuto s'adresse à ceux qui ont déjà appris les concepts POO avec d'autres langages (tu cites PHP, Java, C#, Python etc). Comment veux-tu que les gens qui ont appris la POO avec ces langages ne soient pas complètement déboussolés quand tu parles de classes ES2015 si tu ne leur dis pas directement que c'est un sucre syntaxique pour la déclaration de prototypes/fonctions et non pas des classes au sens POO du terme ?

Au passage, le Markdown de ZdS est une implémentation complète de Markdown avec des ajouts. Markdown ne supporte pas la mise en forme "côte à côte". Sucre syntaxique est masculin. Le lien que tu donnes en fin de tuto et en fin de ton post est mort.

il est possible de s'y prendre de 2 manières : avec les prototypes ou avec les classes

C'est la même chose. Parle de "syntaxes" plutôt que de "manières".

ES6 (programmation orientée objet avec des classes)

Non. JavaScript est class-less.

Note: Les exemples suivants peuvent ne pas fonctionner si votre navigateur ne supporte pas ES6.

Aucun navigateur ne supporte ES6.

Visibilité et éléments static

Ce serait le bon chapitre pour introduire le mot-clé static non ?

1
2
3
4
5
class Foo {
  static bar(n) {
    return n;
  }
}
+1 -0

victor, tu n'es pas suffisamment direct, dire "A mon avis le but n'est pas atteint." c'est trop vague comme remarque, tu ne proposes aucune solution d'amélioration. De plus dans ta réponse je ne vois rien qui montre qu'il y a des erreurs dans le mini-tutoriel.

Je pourrais éventuellement mettre la phrase avec la sucre syntaxique de la conclusion dans la partie 3 dédiée aux classes, mais comme le tutoriel est sur une seule page il y a peu de chance pour que le lecteur puisse le rater, de plus comme c'est en conclusion ça donne un effet encore plus marquant à l'introduction des classes dans ES6, ça reste la phrase à retenir.

Pour ce qui est du mot-clé static, le code ES5 que je présente dans la dernière partie doit avoir une alternative suffisamment proche d'ES6, mais je ne vois pas comment présenter une alternative ES6 de cette partie sans passer par de l'"émulation" à cause des attributs private. Et puis encore une fois, ce n'est pas la partie avec les classes qui est difficile à comprendre, une personne qui connait la POO sait déjà ce qu'est une classe ou un membre static, la question c'est de savoir comment on fait ça en JavaScript avec la programmation orienté prototype.

+0 -0

victor, tu n'es pas suffisamment direct, dire "A mon avis le but n'est pas atteint." c'est trop vague comme remarque, tu ne proposes aucune solution d'amélioration.

Je vois pas ce qui est vague. A mon avis, le le but n'est pas atteint. Je donne mon avis, et cet avis est que le but n'est pas atteint. Je trouve pas que ce soit vague. Effectivement, je ne propose pas de solution. Parce que c'est pas à moi de proposer des solutions. Idem quand je dis que le dernier Star Wars est une daube. J'ai pas à expliquer comment faire un meilleur Star Wars. Je donne mon avis, et il n'est pas particulièrement vague.

De plus dans ta réponse je ne vois rien qui montre qu'il y a des erreurs dans le mini-tutoriel.

Faire croire aux habitués de la POO (donc au public à qui tu t'adresses) qu'ES2015 est class-based ou class-oriented est une erreur. Mentionner le mot-clé public alors qu'il n'a aucune sémantique en JS est une erreur. Faire croire au lecteur que certains navigateurs supportent ES2015 est une erreur. Parler d'ES2015 et de POO et de visibilité et de méthodes static sans mentionner le mot-clé static est une erreur.

Je pourrais éventuellement mettre la phrase avec la sucre syntaxique de la conclusion dans la partie 3 dédiée aux classes, mais comme le tutoriel est sur une seule page il y a peu de chance pour que le lecteur puisse le rater, de plus comme c'est en conclusion ça donne un effet encore plus marquant à l'introduction des classes dans ES6, ça reste la phrase à retenir.

A mon avis ça donne plus l'effet d'un truc dit en passant que de la phrase à retenir.

Pour ce qui est du mot-clé static, le code ES5 que je présente dans la dernière partie doit avoir une alternative suffisamment proche d'ES6, mais je ne vois pas comment présenter une alternative ES6 de cette partie sans passer par de l'"émulation" à cause des attributs private.

Je ne comprends pas cette phrase. Que veux-tu dire par "alternative suffisamment proche" ? Que veux-tu dire par "émulation" ? (Je ne connais pas un seul émulateur JavaScript.) Pourquoi "à cause des attributs private" ?

Et puis encore une fois, ce n'est pas la partie avec les classes qui est difficile à comprendre, une personne qui connait la POO sait déjà ce qu'est une classe ou un membre static,

Ca dépend un peu quel est ton but. Si ton but est d'apprendre des bêtises (du genre que le concept OO de classe existe en JS) au lecteur, d'accord. Si ton but est de lui apprendre un peu de JS, alors c'est raté, parce que le lecteur qui "sait déjà ce qu'est une classe" va bêtement croire que class en JS c'est autre chose qu'une définition de fonction/prototype.

la question c'est de savoir comment on fait ça en JavaScript avec la programmation orienté prototype.

Ben la réponse est simple : on déclare une fonction/prototype et on l'instancie avec le mot-clé new. Après, comment on déclare la fonction/prototype, c'est vraiment pas intéressant, qu'on le fasse avec une déclaration de fonction ou avec le mot-clé class ne change rien à l'affaire.

Tu veux pas plutôt écrire un article sur ES2015 ? Ou si c'est trop difficile, juste les sucres syntaxiques qu'ES2015 apporte ? Ou sur la transpilation ES5 -> ES2015 ? Ce serait tellement plus intéressant que cet article, qui se résume à "Une nouvelle version de JS est sortie en juin 2015, dans cette nouvelle version on peut déclarer une function/prototype avec class mais rien ne change, le concept de classe n'existe toujours pas en JS, c'est vraiment que du sucre, adoptez la nouvelle syntaxe si elle vous plait mais ça change rien à la POO."

+2 -0

Idem quand je dis que le dernier Star Wars est une daube. J'ai pas à expliquer comment faire un meilleur Star Wars.

D'accord, tu es juste là pour dire que c'est de la merde. Le problème c'est que si tu ne te justifies pas, ton avis ne vaut plus grand chose.

Faire croire aux habitués de la POO (donc au public à qui tu t'adresses) qu'ES2015 est class-based ou class-oriented est une erreur. Mentionner le mot-clé public alors qu'il n'a aucune sémantique en JS est une erreur. Faire croire au lecteur que certains navigateurs supportent ES2015 est une erreur. Parler d'ES2015 et de POO et de visibilité et de méthodes static sans mentionner le mot-clé static est une erreur.

Je ne comprends pas cette phrase. Que veux-tu dire par "alternative suffisamment proche" ? Que veux-tu dire par "émulation" ? (Je ne connais pas un seul émulateur JavaScript.) Pourquoi "à cause des attributs private" ?

Je ne fais rien "croire" à personne, je ne mentionne nulle part que JavaScript est "class-based" ou "class-oriented", je montre les deux styles d'écritures. Je mentionne le mot-clé public car c'est exactement ce que le lecteur cherche à comprendre lorsqu'il souhaite créer un objet et utiliser un membre de manière privé (avec var) ou… public (avec this) ! Je ne fais pas "croire" que les navigateurs supportent ES6 car tu as des fonctionnalités ES6 qui sont déjà implémentés (je me suis servi de Set y a pas longtemps tient). Aussi je mentionne le mot-clé static, mais je ne l'utilise pas explicitement dans mon code (car ES5), il aurait fallu que je fasse une transposition direct du code de la partie 5 en ES6 comme dans mes exemples de la partie 3, le problème encore une fois c'est que je ne peux pas me permettre de faire de la bidouille (ou "émulation" si tu ne préfères pas) pour simuler une notion "private" qui n'existe pas lorsqu'on adopte la syntaxe avec les classes. Tiens eux font de la bidouille. Mais typiquement, montrer aux gens qu'ils est possible de faire des choses de cette manière, c'est leur permettre d'écrire du code in-maintenable pour d'autres qui reprendront leurs projets.

Ca dépend un peu quel est ton but. Si ton but est d'apprendre des bêtises (du genre que le concept OO de classe existe en JS) au lecteur, d'accord. Si ton but est de lui apprendre un peu de JS, alors c'est raté, parce que le lecteur qui "sait déjà ce qu'est une classe" va bêtement croire que class en JS c'est autre chose qu'une définition de fonction/prototype.

Ce n'est pas moi qui veut faire "croire" que la notion de classe existe en JS, ce sont ceux qui ont introduit les mot-clés class et extends dans ECMAScript.

Ben la réponse est simple : on déclare une fonction/prototype et on l'instancie avec le mot-clé new. Après, comment on déclare la fonction/prototype, c'est vraiment pas intéressant, qu'on le fasse avec une déclaration de fonction ou avec le mot-clé class ne change rien à l'affaire.

C'est justement là que tu te trompes, une personne qui a fait du C++, Java, C#, PHP, Python ou tout autre langage de cette famille n'ira pas penser une seule seconde qu'il est possible de créer des structures en JS avec un simple mot-clé comme function puis de les instancier, qu'il est possible de créer de définit des méthodes avec prototype, c'est là toute la subtilité. Dire que le mot-clé class n'est qu'une sucre c'est du bonus, lui faire comprendre ce qu'est function et prototype c'est l'information qui est au coeur même de ce mini-tutoriel.

+0 -1

Le problème c'est que si tu ne te justifies pas, ton avis ne vaut plus grand chose.

Je crois que j'ai suffisamment justifié mon avis. Je ne vais pas répondre au reste de ton dernier post, ça ne m'intéresse absolument pas. Après tout, j'ai pas besoin de te convaincre de quoi que ce soit.

+2 -0

Mouais, tu n'es pas d'une grande aide, tu es juste là pour essayer de casser gratuitement.

J'ai pris le temps de relever les erreurs. J'ai pris le temps d'expliquer ce qui va pas avec ton tuto. J'ai pris le temps de te faire des propositions d'amélioration.

Je me suis investi et j'ai été constructif. Si c'est ce que tu appelles "casser" et "gratuitement", tant pis. J'ai mieux à faire (ouvrir une ZEP pour un système d'"ignore" par exemple).

+2 -0

Bonjour Gugelhupf,

Si tu n'interprètes pas les retours de victor correctement, je n'aurai qu'une chose à dire : ton tutoriel n'en vaut pas la peine et ça je le sais sans l'avoir lu.

Je n'y connais rien en Javascript et ça m'embêterait d'apprendre des choses fausses de la part de quelqu'un qui refuse de se remettre en question.

Maintenant libre à toi d'accepter de t'améliorer ou non, mais ne viens pas parler de mauvaise foi alors que tu défèques sur les retours pertinents de victor alors qu'il a passé du temps à t'expliquer pourquoi tu te plantes. Si animosité il y a, tu ne peux t'en prendre qu'à toi-même…

A+

L'idée est sympa, mais elle est mal réalisée.

Au passage, je ne suis pas un expert du Javascript (mais vraiment pas), cela dit, je suis en mesure d'affirmer qu'il ne faut pas utiliser alert() pour debugger mais plutôt console.log().

+5 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte