Programmation orientée objet en JavaScript

Euh non. Tu as le droit de ne pas être d'accord ou d'ignorer les remarques (qui sont justes AMHA) de victor, avec les "conséquences" que cela aura sur la suite à donner à ce tutoriel mais venir prétendre qu'il est de mauvaise foi (bon, il est un peu aigri par moment notre victor ( ) mais jamais de mauvaise foi) ou qu'il n'est pas constructif alors que ses posts prouvent matériellement le contraire… Non. Tu devrais prendre du recul sur ton tutoriel et être capable - ce qui est essentiel en tant qu'auteur - de le remettre en question.

mrjay42

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().

A vrai dire j'ai hésite à utiliser console.log(), l'avantage avec alert() c'est qu'il n'y a pas besoin de lancer des outils comme Firebug pour montrer un simple résultat. Et puis concrètement personne ne se sert d'alert() pour une application en production aujourd'hui, mais il reste tout de même plus connu qu'un simple console.log(). Je remplacerais dans une future version. Merci

Arius

Il y a clairement de l'abus dans la manière de victor de donner ses remarques, il y a des erreurs et… rien d'autre, je peux comprendre que toi ou Ge0 respectiez ses connaissances techniques, je ne suis pas aveugle, je lis moi aussi les messages sur les forums, c'est intéressant, mais il n'en reste pas une personnalité qui souffre du symptôme de Linus. L'autre jour je poste un message sur un topic qui parle de piratage sur photoshop, comme mon message ne devait pas suffisamment être à son goût il le reformule, reçoit un -1 par je ne sais qui, et se plaint d'avoir donné la bonne réponse en premier… Et là tu as Ge0, personne à l'appui qui vient dire "ton tutoriel n'en vaut pas la peine et ça je le sais sans l'avoir lu", du grand n'importe quoi. On a le droit de critiquer, positivement ou négativement, le souci c'est que quand on ne lit pas, ou qu'on lit en diagonale pour ensuite dire qu'il y a des erreurs sans donner de raison, jusqu'à insister pour que cette personne donne une vraie raison et que tu te rends compte qu'au final ce n'était pas "des erreurs" mais juste "qu'il n'aime pas" ou encore qu'il interprète des choses que je ne dis même pas (cf: "class-based" etc) jusqu'à te faire tourner en rond, c'est qu'il y a un problème.

Très sincèrement guglehupf, ton tutoriel est impubliable : il n'en a ni la forme ni le fond.

Je m'explique :

• Les objectifs du cours ne sont exprimés nulle part. Je ne parle même pas d'avoir une formalisation en début de tutoriel, chacun ses méthodes de rédaction, je parle de la visée de chaque partie du tuto. Je suis désolé, mais commencer la première partie d'un tutoriel par "créons notre première structure" sans qu'on sache d'où ça sort, c'est étrange. En plus créer une structure en POO… c'est contradictoire.
• On voit clairement dès le départ que c'est un article de blog que tu as copié sans vraiment l'adapter au format de diffusion du site. D'ailleurs ta phrase d'introduction est sans équivoque "Dans cet article je vais vous détailler comment créer des structures et instancier des "objets"".
• on y ajoutera que les guillemets autour d'objet est contrintuitif car que la POO soit orientée classe ou prototype, ça reste de la POO et à la fin tu as un objet, d'ailleurs faire un typeof(new quelquechose()) te dira "object".
• ensuite on a une partie qui n'est réduite qu'à un tableau de comparaison, sans commentaire, sans aucun but, sans aucune analyse… Bref c'est inexploitable.
• ES6 n'est pas implémenté partout (l'est-il quelque part?)
• si tu veux de l'orienté classe en JS, bah tu fais du typescript, pas pour rien que google est passé à ce langage pour son angular v2.

L'autre jour je poste un message sur un topic qui parle de piratage sur photoshop, comme mon message ne devait pas suffisamment être à son goût il le reformule, reçoit un -1 par je ne sais qui, et se plaint d'avoir donné la bonne réponse en premier…

Aaaah c'est ça ! Maintenant je comprends pourquoi tu refuses en bloc toutes mes remarques : tu es vexé par cette histoire ! La rancune est un sentiment malsain. Je connais pas le symptôme de Linus, j'ai aucune idée de ce que ça pourrait être. Mais effectivement, quand j'explique un truc et qu'on vient poster exactement la même chose que ce que j'ai expliqué précédemment, ça me fait marrer et ça me donne envie de faire des blagues. Désolé que la blague en question ne t'ait pas plu. :/

artragis, merci pour ton retour,

Les objectifs du cours sont exprimés en introduction, lorsque je présente les parties. Je suis du genre à rentrer dans le vif du sujet (cf: "créons notre première structure") parce que je sais personnellement qu'écrire un bout de code vaut parfois mieux de longs pavés de texte (je prendrais du temps pour écrire chaque partie de manière plus détaillée lorsque je serais payé à la ligne comme Victor Hugo pour publier mes écrits ). Je prends l'exemple de ton tutoriel sur les dates en PHP, celle que tu as commencé à écrire il y a plusieurs années avec Zazou, je te le dis en toute amitié, si en tant que lecteur je voulais "lire" j'aurais consulté la documentation officielle (et c'est ce que je fais rassures-toi), ce que les gens analysent ce sont les exemples de code court, les points marquants à retenir, les comparaisons/distinctions/avertissements, tout en restant simple et concis, parce qu'au final nous sommes des informaticiens qui re-re-relisons des phrases que nous avons déjà vu re-revu et nous n'avons pas de temps à perdre, c'est en cela que les billets/cours/articles de mkyong, josé paumard, jm doudoux ou autres sont appréciés. Oui comme tu as pu le remarquer j'ai d'abord publié cet "article" sur mon site, mais j'ai tout de même "pris du temps" pour l'adapter au ZdS, j'ai créé des tableaux à 2 colonnes contenant du code en Markdown par exemple. Sinon tu as raison concernant la partie 3, il aurait surement fallu ajouter "1 phrase" en plus, pour que les gens comprennent que juste en dessous tu as un tableau de comparaison/équivalence prototype/class, j'en profiterais pour dire que les classes ES6 sont du sucre syntaxique par exemple (au lieu de le dire en conclusion).

Je ne vois pas en quoi créer une "structure" est contradictoire en POO, d'ailleurs struct est un mot-clé qu'on utilise en C++ et C# pour créer des objets. Je ne fais pas un cours TypeScript, ES6 inclu les mot-clés class ou extends donc je les présente.

Enfin pour reprendre sur le scandale des guillemets autour de instancier des "objets" et ES6, je ne comprends pas pourquoi ces guillemets piquent autant les yeux, peut-être que ce sont mes yeux qu'il faudra brûler au chalumeau, j'ai l'impression du coup de pousser certains à interpréter des choses que je ne dis pas, donc je vais les enlever … Et ES6 est déjà en partie implémenté par des navigateurs, j'ai récemment utilisé Set et le spread operator avec Firefox, donc là non plus je ne comprends pas.

victor,

Nous sommes sur internet, les gens en colère, narcissique, aigri qui font des remarques aussi inutiles que futiles se comptent par centaine sur ces forums (et c'est peut-être aussi un caractère qui nous appartient en tant qu'informaticion), donc tu te fais des idées je ne suis pas vexé, le problème c'est que tu manques de cordialité, non seulement tu ne m'aides pas vraiment lorsque tu dis qu'il y a des erreurs, en plus de ça lorsque je t'en demande tu essayes de me faire tourner en bourrique. La référence à Linus vient du fait que ce gars (aussi compétent soit-t-il et on s'en fou car on se le croit tous) essaye de plomber les autres, donc oui il a créé un OS et les gens le respectent car utilisent son outil (voire un gagne pain), le jour où t'auras un produit qui tiendra mieux la route (on ne sait jamais), les gens ne se souviendront plus de lui, ou comme d'un petit nerveux.

(aussi compétent soit-t-il et on s'en fou car on se le croit tous)

Tu fais mieux de la psychologie que tu ne fais du javascript.

C'était donc ça…

Bah tu sais quoi, Gugelhpuf, les gens comme toi me font sentir moins seul dans ma stupidité. Parce que j'ai rarement lu quelque chose d'aussi nul. Ça me fait cet effet-là :

Désolé victor si tu te sens sur-protégé par ma sollicitude à ton égard.

(Ce message est avant tout à titre humoristique et j'ai un grand respect pour les travaux de Linus qui ont eu un impact planétaire sur l'industrie de l'informatique, c'est tout ce que je retiens du personnage)

Je ne vois pas en quoi créer une "structure" est contradictoire en POO, d'ailleurs struct est un mot-clé qu'on utilise en C++ et C# pour créer des objets. Je ne fais pas un cours TypeScript, ES6 inclu les mot-clés class ou extends donc je les présente.

C'est exactement la remarque qui me fait penser que tu ne maîtrises pas du tout ton sujet.

le mot clef struct permet en C# de créer un objet, pas une structure, c'est juste que pour le compilateur, cela change les modalités d'instanciation, c'est donc un outil avancé pour des utilisateurs qui veulent optimiser des parties cruciales de leur code.

le mot clef struct en C++ ne crée pes des objets mais… des structures.

QUant à mon tuto sur les dates, qu'il ressemble trop à un truc "rentre dedans" est très sûrement la raison de son refus sur le sdz et sur zds. Mauvais exemple donc.

Et bien désolé artragis si tu penses que je ne maitrise pas mon sujet, pour moi function, class ou struct sont des mots-clés qui permettent de créer des structures, bien sûr ces mots-clés ont des particularités différente en fonction du langage (la visibilité public par défaut des attributs et méthodes en C++, le passage par copie de valeur en C# etc) mais je ne vois pas où est le problème.

Je ne comprends pas pourquoi tu dis que ton tutoriel est "rentre dedans", ou qu'il est refusé (il est bien publié sur OC ?), j'ai plus l'impression que tu as été contraint de prendre la forme d'un modèle SdZ/OC pour que ce dernier soit "conforme" (ce qui au passage fait souffrir ma molette). Sinon je viens de remarque que tu as un mot "LL'essentiel" (2 L) dans ton tutoriel.

Et bien désolé artragis si tu penses que je ne maitrise pas mon sujet, pour moi function, class ou struct sont des mots-clés qui permettent de créer des structures, bien sûr ces mots-clés ont des particularités différente en fonction du langage (la visibilité public par défaut des attributs et méthodes en C++, le passage par copie de valeur en C# etc) mais je ne vois pas où est le problème.

si tu ne vois pas la différence entre une simple structure de données et un objet, c'est sûrement à cause de ça que victor a été si agressif quant à ton tuto.

il est bien publié sur OC

sur OC, avec zéro vérif. sur le sdz il a pas été validé et il a été refusé par Andr0 sur zds.

Sinon je viens de remarque que tu as un mot "LL'essentiel" (2 L) dans ton tutoriel.

m'en tappe, c'est un truc sur OC que personne ne regarde.

si tu ne vois pas la différence entre une simple structure de données et un objet, c'est sûrement à cause de ça que victor a été si agressif quant à ton tuto.

Agressif, agressif… le plus méchant que j'ai dit c'était "tu donnes pas l'impression de bien maitriser les concepts dont tu parles dans le tuto".

tu manques de cordialité, non seulement tu ne m'aides pas vraiment lorsque tu dis qu'il y a des erreurs, en plus de ça lorsque je t'en demande tu essayes de me faire tourner en bourrique.

Ah bah si je t'aide. J'ai donné plein de détails, j'ai donné des conseils sur quoi améliorer, comment améliorer, j'ai même donné des sujets de tutos que je trouverais plus intéressant que ça. Après, ta fierté (et ton orgueil blessé par cette histoire de Photoshop, que t'aurais pas ressorti si t'avais digéré) te fait refuser de reconnaitre tes erreurs.

Merci pour ton retour Gabbro,

Je n'ai pas vraiment eu le choix concernant la présentation de mes tableaux à 2 colonnes, l'objectif était de mettre cote à cote du code… C'est l'une des raisons qui font que je fais du markdown dans un bloc de code JS ou utilise des commentaires /* */ pour le code à l'intérieur de ces tableaux.

Concernant mon introduction, les termes "programmation orienté objet avec des classes" ou "programmation orienté prototype" ne devraient pas te choquer, ce ne sont pas des termes que j'invente. Par contre là où j'ai fait une grosse bourde, c'est dans le terme "instancier des objets" car on instancie des class, struct ou function pour JS. Du coup j'aurais plutôt du dire quelque chose du style "créer des structures avec function et les instancier pour obtenir des objets".

Pour ce qui est du mot EDIT, tu as raison, j'ai commencé mon tutoriel avec 3 parties, le problème c'est que je n'ai pas pris la peine de modifier le paragraphe existant. Je devrais mieux m'appliquer à ce niveau.

Je précise « (requiert IE9 ou plus) » ou « ES5/6 » lorsque le code de la partie en question le requiert (cf chapitres 3 et 4). Par défaut tout code ES5 fonctionne avec ES6, je devrais le préciser.

Par contre là où j'ai fait une grosse bourde, c'est dans le terme "instancier des objets"

Je vois pas du tout en quoi c'est une bourde. Tu nous expliques ?

on instancie des class, struct ou function pour JS.

• C'est quoi la différence entre class et fonction en JS ?
• Et struct en JS, c'est quoi ? (struct n'est pas un mot-clé en JS, du coup on sait pas de quoi tu parles)

Primo, honte à moi !, j'ai oublié de sortir mon triptyque :

• Quels messages souhaites-tu faire passer ?
• Quels sont les prérequis de ton texte ?
• Quel est son public cible ?

Secondo, que tu aies mis des tableaux dans un but précis n’empêche pas que celui-ci ne soit pas atteint. En l'état actuel, ils ne permettent pas de comparer facilement (à cause de l'ascenseur horizontal, notamment).

Tertio, ton tuto n'allant pas très loin, j'imagine qu'il s'adresse à des gens sachant faire du javascript, mais sans POO. Dans ce cas, tu te dois d'expliquer/rappeler les subtilités¹ du genre différence programmation par objet vs par prototype. Ce n'est pas parce qu'ils existent qu'ils sont connus du lecteur².

Sur cela, mon reproche ne portait pas sur tant sur programmation par objet vs par prototype que sur le fait que tu listes des choses proches sans faire la distinction entre elles. Quels sont les différences (en deux lignes) entre l'un et l'autre, dans quel cas préférera-t-on une méthode plutôt que l'autre. Bref, un contexte.

victor,

Je te réponds dans l'ordre de tes questions :

1. Un objet est une instance de classe/structure/function, c'est le produit obtenu. Même si on comprend l'idée qu'il y a derrière "instancier des objets", généralement on dira "instancier une classe".
2. Dans les faits, en JS, il n'y a aucune différence entre une class et une function, seul le style d'écriture change (cf: syntaxe sucrée). Si tu instancies une class ou fait de l'héritage avec, derrière tu auras les mêmes mécanismes que si tu t'y étais pris avec le style prototype, du coup même des fonctions tels que Object.isPrototypeOf() fonctionneront de la même manière avec les deux styles.
3. J'ai parlé de struct/class/function pour faire référence aux mot-clés utilisé afin de créer des structures (tout langage confondu), je n'ai précisé "JS" que pour le dernier mot-clé.

Grabbo,

1. Je souhaite présenter la programmation orienté objet en JavaScript (avec ses différents style pour y parvenir, c-à-d avec les prototypes et classes), d'une manière simple et concise, le lecteur ne doit pas passer son temps à "lire", doit rapidement obtenir l'information qu'il cherche à la lecture de la page.
2. Les seuls prérequis sont de connaitre JavaScript, et si possible connaitre n'importe quel autre langage orienté objet. Généralement une personne qui connait JavaScript connait forcément un langage backend tel que PHP, Java, Python, C#.
3. Le public ciblé est ceux qui font du JavaScript et souhaitent en savoir plus sur ce langage. Personnellement je connais des gens compétents, qui ont beaucoup pratiqué du JS, mais qui ne connaissent même pas le style d'écriture admis pour créer des objets en JS. Une fois j'ai vu un gars créer une fonction, contenant juste un return de JSON, utiliser l'opérateur new sur cette fonction (facepalm), oui "ça marche" je suis d'accord mais bon c'est un peu n'importe quoi.

Enfin si j'ai mis les 2 codes cote à cote c'est pour montrer qu'il n'y a de différence que le style d'écriture, pour ce qui est des "préférences" tout dépend du concerné (je pense personnellement que celui qui débarque dans JS et qui a la possibilité de faire de l'ES6 sautera sur l'occasion d'utiliser class car ce dernier lui semblera plus familier).

Tes remarques sont très intéressantes, bien construites. Merci

1. Un objet est une instance de classe/structure/function, c'est le produit obtenu.

Quand tu dis "structure", tu veux dire "objet" ?

Même si on comprend l'idée qu'il y a derrière "instancier des objets", généralement on dira "instancier une classe".

On dit ça "généralement" parce que généralement les gens font de la POO avec des langages qui ont des classes. C'est pas le cas du JS. En JS, on dit "instancier des objets".

En fait, les deux sont équivalents, il n'y a pas de différence entre "instancier une classe" et "instancier un objet"… sauf s'il n'y a pas de classe. Et comme en JS il n'y a pas de classe…

1. J'ai parlé de struct/class/function pour faire référence aux mot-clés utilisé afin de créer des structures (tout langage confondu), je n'ai précisé "JS" que pour le dernier mot-clé.

D'accord, je n'avais pas compris ça.

Non, quand je dis structure, c'est notre modèle de base pour tous les objets qui en découlent :

1

function Structure(){}

Quand je dis objet :

1
2

var o = new Structure(); // Instanciation de notre "structure" pour obtenir un objet.
var alias = o; // Cette ligne est bidon, mais c'est pour montrer qu'on manipule toujours le même objet

Si je ressors les cours de ma prof d'UML, elle définit un objet comme "quelque chose d'unique", même si deux objets appartiennent à la même famille (le même struct, class, function etc), ils peuvent avoir des états différents (valeur des attributs différents). Ce qu'il y a entre parenthèse c'est mon interprétation.

Peux-tu expliquer un peu plus ce que tu veux dire par "structure" ?

Dans ton exemple, je ne vois pas ce qui distingue une structure d'un objet.

Premier code : tu déclares un objet (type function) ayant pour prototype Function avec pour nom Structure. Autrement dit : une fonction nommée Structure.

Deuxième code : tu instancies un objet.

Tu prends l'exemple d'un diagramme de classe UML, lorsque tu génères ton code à partir de ce modèle, tu obtiendras comme implémentation dans le langage de ton choix une class, struct ou function, c'est ce que j'appelle une "structure" (ps: jamais essayé de générer du JS à partir d'outil UML mais je sais que ça existe).

Ensuite je peux comprendre que pour toi, qui doit surement faire beaucoup de JavaScript (et qui cherche à me "piéger" j'ai l'impression ), le fait de déclarer une fonction revient à avoir un objet de type function, avec pour attribut name Structure, et ayant pour contenu un certain code, mais là on est déjà à un niveau spécifique de JavaScript. C'est comme parler de null, toi tu me diras que c'est un objet, que JavaScript te diras que c'est un objet… et moi je te dirais que non ça a été implémenté en tant que tel, s'en est devenu spécifique à JavaScript.

D'accord, je comprends ta définition de structure. Du coup ça n'a pas grand chose à voir avec ton tuto ou avec la discussion de ce topic il me semble.

Ensuite je peux comprendre que pour toi, qui doit surement faire beaucoup de JavaScript (et qui cherche à me "piéger" j'ai l'impression ), le fait de déclarer une fonction revient à avoir un objet de type function, avec pour attribut name Structure, et ayant pour contenu un certain code, mais là on est déjà à un niveau spécifique de JavaScript.

Yep.

C'est comme parler de null, toi tu me diras que c'est un objet, que JavaScript te diras que c'est un objet… et moi je te dirais que non ça a été implémenté en tant que tel, s'en est devenu spécifique à JavaScript.

Non. En JavaScript null indique justement l'absence intentionnelle d'objet. Ce n'est pas un objet. C'est une primitive.

Bonjour les agrumes !

La bêta de votre tutoriel « Programmation orientée objet en JavaScript » a été mise à jour et coule sa pulpe à l'adresse suivante :

Merci d'avance pour vos commentaires.

Note: J'ai essayé de prendre en compte la plupart de vos remarques, d'améliorer l'existant :

• "un sucre syntaxique" et pas "une sucre syntaxique"
• Préciser pour les tableaux à 2 colonnes ES5/ES6 et ES6 only
• remplacer "alert()" par "console.log()"
• Adapter les sauts de lignes entre les colonnes de comparaison
• Bug lien http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262, 1st edition, June 1997.pdf#sec-11.2.2
• Enlever EDIT, faire des phrases et modifier le terme "instancier des objets".
• Améliorer l'introduction de la partie 3