доступ к данным прослушивателя событий через функции в компоненте

Question

Я пытаюсь получить доступ к данным, полученным от функции прослушивателя событий в init (), в другой функции в компоненте кадров.Я попытался использовать привязку, чтобы данные, полученные в прослушивателе событий, можно было связать с пробелом " this ".

Вот мой код

AFRAME.registerComponent('move', {
  schema: {    
  },

  init: function() {    

    this.el.sceneEl.addEventListener('gameStarted', testfun.bind(this), {once: 
    true});

    function testfun(e){      
        this.speed = e.detail.source;
        console.log(this.speed); // I get proper values here
    }
    console.log(this.speed);  // value is not updated and I only get "undefined"
  },

  tick: function(t, dt) {
    console.log(this.speed); // I get undefined
  }

});

IЯ думал, что если я связываю это с функцией, я могу получить доступ к данным даже вне области прослушивания.Не могли бы вы потратить немного времени, чтобы помочь мне понять это?

Спасибо, Нирадж

Answer 1

Это ожидаемое поведение.Вы, вероятно, не поняли, что события будут срабатывать в любое произвольное время после ваших console.log вызовов.К моменту запуска init this.speed еще не инициализировано.Вы должны ждать, пока не наступит событие gameStarted, чтобы получить значение.То же самое относится и к tick до начала события.Дайте this.speed начальное значение, чтобы избежать undefined

AFRAME.registerComponent('move', {
  schema: {    
  },

  init: function() { 
    var self = this;   
    this.speed = 0;
    this.el.sceneEl.addEventListener('gameStarted', testfun.bind(this), {once: 
    true});

    function testfun(e){      
        self.speed = e.detail.source;
        console.log(self.speed); // I get proper values here
    }
    console.log(this.speed);  // value is not updated and I only get "undefined"
  },

  tick: function(t, dt) {
    console.log(this.speed); // I get undefined
  }

Answer 2

Причина в том, что изменяемая вами переменная (скорость) находится вне области видимости.Поскольку вы объявили новую функцию testfun со своими собственными свойствами в функции init.Если вы можете использовать синтаксис ES5 +, тогда вы можете объявить testfun как функцию стрелки, и все готово.Для более подробной информации о здесь: https://zendev.com/2018/10/01/javascript-arrow-functions-how-why-when.html

попробуйте это:

AFRAME.registerComponent("move", {
  schema: {},

  init: function() {
    this.speed = 0;
    this.el.sceneEl.addEventListener("gameStarted", testfun, {
      once: true
    });
    const testfun = e => {
      this.speed = e.detail.source;
      console.log(this.speed); // I get proper values here
    };
    console.log(this.speed); // value is not updated and I only get "undefined"
  },

  tick: function(t, dt) {
    console.log(this.speed); // I get undefined
  }
});