5
votes

Impossible d'utiliser le mot clé 'this' dans un objet car il se trouve dans une autre fonction

J'utilise vue.js dans ce cas, mais je suppose que cela s'appliquerait également en JS brut. Le problème est que lorsque je suis dans une fonction qui est dans une autre fonction, je dois appeler des variables par leur chemin complet comme - Object.variable au lieu de this.variable. Existe-t-il un moyen d'utiliser this.timer, this.pages au lieu de TVComponent.pages etc.

const TVComponent = new Vue ({
el: '.tvContent',

data:
{
    current_page: 0,
    timer: 0,
    pages: [
      { page: '/', interval: 10 },
      { page: 'tv/calls', interval: 10 },
      { page: 'tv/general', interval: 10 }
    ]
},

methods:
{
  tvTimer()
  {
     setInterval(function() {
        TVComponent.timer++;

        if (TVComponent.timer == TVComponent.pages[TVComponent.current_page].interval) {
           console.log('it is time!!');
        }

        console.log(TVComponent.pages[TVComponent.current_page].page);
     }, 1000);
  },
})

javascript vue.js

0 commentaires

4 Réponses :

-1
votes

Je pense que vous devez le lier dans ce contexte. Nous le faisons de cette façon dans React classess.

2 commentaires

comment le liez-vous?

Vous pouvez utiliser data.timer qui est un meilleur moyen

1
votes

La fonction que vous passez à setInterval reçoit son propre contexte, cependant si vous utilisez une fonction de flèche, elle utilisera le contexte actuel à la place, et ignorera celui donné par setInterval .

setInterval(() => { ... }, 1000)

0 commentaires

2
votes

Problème classique de ceci n'étant pas ce à quoi vous vous attendez dans une fonction

A. liez-le

methods:
{
  tvTimer()
  {
     setInterval(() => {
        this.timer ...
     }, 1000);
  },
})

B. utiliser une fermeture

methods:
{
  tvTimer()
  const _this  = this
  {
     setInterval(function() {
        _this.timer ...
     }, 1000);
  },
})

C. utiliser une fonction fléchée

methods:
{
  tvTimer()
  {
     setInterval(function() {
        // ...
     }.bind(this), 1000);
  },
})

C'est une de ces choses qu'il faut vraiment comprendre à propos de JS afin de ne pas tomber indéfiniment dans différents lieux. Je suggère cet ebook:

https://github.com/getify/You-Dont-Know-JS/blob/master/up%20%26%20going/ch2.md#this-identifier

1 commentaires

Merci, je ne connaissais pas les fonctions de reliure et de flèche. Auront besoin de lire à ce sujet!

0
votes

Ceci est dû au fait que setInterval () cet objet n'est pas le même que vue.js this , car ils ont des portées différentes.

Essayez d'assigner cet objet à une nouvelle variable avant d'entrer dans la portée de la fonction problématique.

let self = this;
tvTimer()
  {
     setInterval(function() {
        self.timer++;

        if (self.timer == self.pages[self.current_page].interval) {
           console.log('it is time!!');
        }

        console.log(self.pages[self.current_page].page);
     }, 1000);
  },

Voir: https : //developer.mozilla.org/en-US/docs/Glossary/Scope

0 commentaires