Discussion :

[mathspountz]

Bonjour à tous,

Je débute avec la notion de "class" javascript en utilisant prototype. Le but de l'exercice est d'afficher un cercle à la place du cursor dans un canvas.

J'ai donc une variable cursorX et une cursorY qui représentent la position du cursor. Ces deux varaibles sont updatées par les méthodes setCursorX et setCursorY par l'évênement mousemove sur le canvas.

Le canvas est updaté toutes les 50 millisecondes par la méthode refresh qui déssine un cercle est dessiné aux coordonnées x;y.

Le problème est que l'update des deux premières fonctions ne semble pas pris en compte dans la troisième (problème de portée de variable ?) :

https://jsfiddle.net/mathspountz/863Lev4a/5/

Y a t'il quelque chose qui m'échappe ?

[SylvainPV]

Tout d'abord, ne te fie pas à tout ce que tu peux lire ou entendre: il n'y a pas de classes en JavaScript, il n'y a que des objets prototypés. Beaucoup mélangent les deux, et le langage évolue pour être encore plus confusant, mais c'est bel et bien deux notions distinctes, deux approches différentes à la programmation orienté objet.

Pour ton problème, il n'a rien à voir avec les prototypes, c'est une erreur classique: tu dois passer la fonction refresh par référence à setInterval, et non pas l'appeler à l'intérieur de l'appel.
Donc : var boucle = setInterval(o.refresh, 50); au lieu de var boucle = setInterval(o.refresh(), 50);setInterval invoque la fonction avec comme contexte (valeur du mot-clé this à l'intérieur de la fonction) l'objet Window. Il faut donc également passer le bon contexte, soit via .bind(), soit en encadrant le tout avec une fonction anonyme:
var boucle = setInterval(o.refresh.bind(o), 50); ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var boucle = setInterval(function(){
  o.refresh();
}, 50);

La seconde approche est généralement retenue pour sa lisibilité et sa facilité à être étendue.

Cela donne au final : https://jsfiddle.net/863Lev4a/6/

[mathspountz]

Merci beaucoup Sylvain je n'aurais jamais trouvé seul,

2 axes de recherche donc :
- Subtilité d'un objet prorotypé par rapport à une classe

- Notions passage par référence, contexte et la méthode bind()

Je reposterai très certainement après un peu de lecture, lorsque je ne comprendrai toujours pas XD

Encore merci

[SylvainPV]

Ok j'espère que tu tomberas sur de bons articles parce que des fois on est pas vraiment aidé par ce qu'on trouve sur le net ! Je te conseille le Mozilla Developer Network comme source sûre, claire et concise.

Pour la différence prototype/classe, je recolle ce que j'avais dit sur un autre topic et qui en a aidé d'autres à comprendre:

Le concept de prototype en JS est très simple: tout est objet, tout objet a un prototype, tout objet peut être le prototype d'un autre objet. Les objets héritent des propriétés de leur prototype, et peuvent les surcharger. Il n'y a donc qu'un seul concept, l'objet prototypé, contrairement à la POOC qui distingue classes et instances. L'héritage devient lui-aussi plus simple : j'ai deux objets A et B, je veux que B hérite de A, donc j'assigne A comme prototype de B. C'est tout !