'This' anahtar sözcüğünü bir nesnede kullanamazsınız, çünkü başka bir işlevin içindedir

Bu durumda vue.js kullanıyorum ancak sanırım düz JS'de de geçerli olacak. Sorun şu ki, başka bir işlevde olan bir işlevdeyken değişkenleri this.variable yerine - Object.variable gibi tam yollarıyla çağırmak zorundayım. Bunu kullanmanın bir yolu var mı, TVComponent.pages vs. yerine this.pages.

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);
  },
})
2

6 cevap

Bence bu bağlamda bağlamak zorundasın. Bunu React sınıfında böyle yaparız.

1
katma
Data.timer'i daha iyi bir yolla kullanabilirsiniz
katma yazar Shakeel, kaynak
onu nasıl bağlarsın?
katma yazar Liga, kaynak

Bir işlevde beklediğiniz gibi olmamak, klasik this sorunu

A. bağlayın

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

B. bir kapatma kullanın

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

C. bir ok işlevi kullanın

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

Bu, farklı yerlere tekrar tekrar düşmemek için JS'yi gerçekten anlaması gereken şeylerden biridir. Bu e-kitabı öneriyorum:

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

1
katma
Teşekkürler, ciltleme ve ok fonksiyonlarını bilmiyordum. Bunu okumak gerekecek!
katma yazar Liga, kaynak

setInterval 'a ilettiğiniz işlev kendi bağlamını alır, ancak bir ok işlevi kullanırsanız bunun yerine geçerli içeriği kullanır ve setInterval tarafından verilenleri yok sayar.

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

setInterval 'a ilettiğiniz işlev kendi bağlamını alır, ancak bir ok işlevi kullanırsanız bunun yerine geçerli içeriği kullanır ve setInterval tarafından verilenleri yok sayar.

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

Bunun nedeni, setInterval() this nesnesinin, farklı kapsamlara sahip olmaları nedeniyle vue.js this ile aynı olmamasıdır.

Sorunlu işlevin kapsamına girmeden önce, this nesnesini yeni değişkene atamaya çalışın.

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);
  },

Bakınız: https://developer.mozilla.org/en-US/docs/ Sözlük/Kapsam

0
katma

Bunun nedeni, setInterval() this nesnesinin, farklı kapsamlara sahip olmaları nedeniyle vue.js this ile aynı olmamasıdır.

Sorunlu işlevin kapsamına girmeden önce, this nesnesini yeni değişkene atamaya çalışın.

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);
  },

Bakınız: https://developer.mozilla.org/en-US/docs/ Sözlük/Kapsam

0
katma