J'ai une classe comme: Cependant, je ne peux pas sembler référencer / appeler this.draw () dans le seintval, il est indiqué this.draw () n'est pas une fonction, et si je supprime les devis, il est indiqué inutile Un seinterval Appel, qu'est-ce que je fais mal?
3 Réponses :
function run(){
this.interval;
this.start = function(){
this.interval = setInterval(this.draw,1000);
};
this.draw = function(){
//some code
}
;}
var run = new run();
run.start();
La valeur de note également que vous avez créé une fonction appelée éditer : OK, en regardant les autres réponses que je peux voir que, juste peut-être i surcommiquez-le et aussi longtemps que mais mon point de ne pas donner à votre constructeur et plus tard variable le même nom est toujours , et je laisserai tout le Ce est défini en fonction de la manière dont une fonction est appelée. Lorsque vous appelez une fonction sous forme de constructeur à l'aide de Nouveau , alors Ceci se référera à l'objet créé. De même lorsque vous appelez une fonction avec notation DOT, comme run.start () this Ce se référera à exécuter . Mais au moment où le code exécuté par le seinterval est appelé ceci ne signifie pas ce que vous pensez. Ce que vous pouvez faire, c'est enregistrer une référence à ce , puis utilisez cette référence, comme: exécuter et une variable appelé exécuter - vous devez leur donner des noms différents. Dans mon code (en gardant à l'esprit que JS est sensible à la casse) J'ai changé le nom de la fonction pour commencer par un «R» de la majuscule - qui est la convention pour les fonctions destinées à être exécutées en tant que constructeurs. Draw () n'a pas besoin d'accéder au ceci il aurait été bien de simplement dire: auto car il s'agit d'une technique que vous aurez besoin si Draw () doit accéder à ceci . Vous auriez également besoin de le faire de cette façon si vous deviez ajouter des paramètres à la fonction draw () .
this.draw ne fonctionnera pas si dessin nécessite le droit ceci à l'intérieur, lorsque Draw est appelé dans le seinterval (this.draw, 1000) Version, Ceci sera Fenêtre Intérieur Dessine . Tout le auto est nécessaire si dessin utilise une instance propriétés (c'est-à-dire s'il s'agit vraiment d'une méthode plutôt que d'une fonction simple).
Vrai. Quand j'ai ajouté mon "edit", je cherchais juste dessiner contenant "certains code" qui peut ne pas avoir besoin ceci , mais ce n'est probablement pas une méthode très utile Si ce n'est pas le cas, alors ... je vais éditer mon édition ...
Merci de votre réponse, supprimez les citations et les () travaillés, puis j'ai remarqué chaque fois que l'intervalle est exécuté les variables à l'intérieur de la fonction de tirage à ceci, non définie! Ensuite, j'ai tout mis sur moi, tout est résolu, mais je ne comprends toujours pas pourquoi et comment cela fonctionne, ça vous dérange d'expliquer un peu plus s'il vous plaît? Merci encore. :) Oh ok, alors cela pointe sur la fenêtre à l'intérieur de la seinterval, quelle bizarre! Quoi qu'il en soit, y a-t-il une meilleure façon de le faire, soi-même ne me regarde pas: \
Eh bien, vous n'avez pas besoin d'appeler la variable «Soi», mais sémantiquement c'est ce que c'est. Certaines personnes disent "moi" ou quelque chose à la place. Un lot de personnes disent "ça" à la place, mais je déteste "ça" parce que c'est faux sémantiquement ("this" et "que" ne devrait pas être la même chose). Quoi que vous niez si le concept est toujours le meilleur moyen de le faire (que je sache). Pour plus d'informations sur la façon dont "ces" œuvres ont un coup d'oeil à Qu'est-ce que MDN a à dire À propos de (ou juste Google "JavaScript this" et voyez ce qui s'allume).
Le Bind () Méthode!
Voir l'exemple suivant dans ES6 STRT>: P> P>
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="200" height="200" style="border: 1px solid black"></canvas>
<script>
class Circles {
constructor(canvas, r = 5, color = 'red') {
this.ctx = canvas.getContext('2d')
this.width = canvas.width
this.height = canvas.height
this.r = r
this.color = color
setInterval(
this.draw.bind(this),
1000
)
}
draw() {
this.ctx.fillStyle = this.color
this.ctx.beginPath()
this.ctx.arc(
Math.random() * this.width,
Math.random() * this.height,
this.r,
0,
2 * Math.PI
)
this.ctx.fill()
}
}
</script>
<script>
var canvas = document.querySelector('#canvas')
var circles = new Circles(canvas)
</script>
</body>
</html>
@NickSteele pourrait-il être parce qu'il provoque une invocation de fonction supplémentaire avant chacun de l'appel de l'intervalle à dessin () ? Je conviens que la solution de YAS est plus lisible.