Question

在这种情况下，我正在使用vue.js，但我想它也将适用于纯JS。问题是，当我在另一个函数中的某个函数中时，必须按其完整路径调用变量，例如-Object.variable而不是this.variable。有没有办法使用this.timer，this.pages而不是TVComponent.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);
  },
})

Answer 1

this不是您在函数中所期望的经典问题

A。绑定

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

B。使用闭包

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

C。使用箭头功能

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

这是必须真正了解JS的事情之一，以免在不同的地方一遍又一遍地陷入困境。我建议这本书：

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

Answer 2

传递给array:6 [ 0 => "Answer" 1 => "AnswerGroup" 2 => "Condition" 3 => "Notion" 4 => "Question" 5 => "Theme" ]的函数会收到自己的上下文，但是，如果您使用箭头函数，它将使用当前上下文，而忽略setInterval给定的上下文。

setInterval

Answer 3

这是因为setInterval() this对象与vue.js this不同，因为它们具有不同的范围。

在输入有问题的函数的作用域之前，尝试将this对象分配给新变量。

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

请参阅：https://developer.mozilla.org/en-US/docs/Glossary/Scope

Answer 4

我认为您必须在这种情况下将其绑定。我们在React类中这样做。

无法在对象中使用'this'关键字，因为它在另一个函数中

4 个答案: