Question

我试图访问从aframe组件中另一个函数的init（）中的事件侦听器函数获取的数据。我尝试使用绑定，以便可以将在事件侦听器中获得的数据绑定到“ 此”空间。

这是我的代码

null

我认为，如果我将此绑定到功能上，那么我也可以访问均匀侦听器范围之外的数据。您能抽出一点时间来帮助我解决这个问题吗？

谢谢，尼拉吉

Answer 1

原因是您要修改的变量（速度）超出范围。由于您已经在函数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
  }
});

Answer 2

这是预期的行为。您可能没有意识到在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
  }

跨组件中的函数访问事件侦听器数据

2 个答案: