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

我试图访问从aframe组件中另一个函数的

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
  }

});

---

我想，如果我将它绑定到函数，我也可以访问偶数侦听器范围之外的数据。您能抽出一点时间帮我解决这个问题吗？

原因是您正在修改的变量（速度）超出范围。因为您已经在function

init

中声明了一个新函数

testfun

，它有自己的属性。 如果可以使用ES5+语法，那么可以将

testfun

声明为箭头函数，这样就完成了。 有关更多信息，请阅读此处：

试试这个：

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

---

原因是您正在修改的变量（速度）超出范围。因为您已经在function

init

中声明了一个新函数

testfun

，它有自己的属性。 如果可以使用ES5+语法，那么可以将

testfun

声明为箭头函数，这样就完成了。 有关更多信息，请阅读此处：

试试这个：

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

---

这是预期的行为。您可能还没有意识到在

console.log

调用之后，事件会在任意时间触发。当

init

运行

时，此速度尚未初始化。您必须等到
gameStarted
事件触发后才能获取值。事件触发前勾选
也是如此。为
this.speed
提供一个初始值，以避免
未定义

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
  }

这是预期的行为。您可能还没有意识到在
console.log
调用之后，事件会在任意时间触发。当
init
运行
时，此速度尚未初始化。您必须等到
gameStarted
事件触发后才能获取值。事件触发前勾选
也是如此。为
this.speed
提供一个初始值，以避免
未定义

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
  }

在gamestarted事件触发后，我有条件地将“移动”组件附加到实体。我使用一个帧状态组件来实现这一点。因此，我能够在偶数的听者中获得速度的值，但不在我试图达到的范围之外。我不确定哪里出了问题，但它仍然不起作用。我试过了你给我的密码。我没有得到testfun之外的速度值，因为0（初始化值）请阅读下面的答案：当您访问变量时，
gameStarted
事件尚未触发。在gameStarted事件触发后，我会有条件地将“移动”组件附加到实体。我使用一个帧状态组件来实现这一点。因此，我能够在偶数的听者中获得速度的值，但不在我试图达到的范围之外。我不确定哪里出了问题，但它仍然不起作用。我试过了你给我的密码。我没有得到testfun之外的speed值，因为0（初始化值）读取下面的答案：当您访问变量时，
gameStarted
事件尚未触发谢谢Diego。实际上，这个组件“move”是有条件地附加到实体的，条件是启动gameStarted的事件。因此，init函数将在触发该事件后执行。我使用帧状态组件实现了这种条件连接/分离。我现在意识到，基于事件连接和分离此组件不允许我保持this.speed的值。我现在已更改代码以删除此条件，因此现在此问题已得到解决。非常感谢您的帮助。如果事件在
init
之前触发，testfun也不会捕获它。您需要附加eventlistener，然后等待触发事件。您应该能够将变量存储在组件中。我建议您熟悉javascript作用域的工作原理：谢谢您，迭戈。实际上，这个组件“move”是有条件地附加到实体的，条件是启动gameStarted的事件。因此，init函数将在触发该事件后执行。我使用帧状态组件实现了这种条件连接/分离。我现在意识到，基于事件连接和分离此组件不允许我保持this.speed的值。我现在已更改代码以删除此条件，因此现在此问题已得到解决。非常感谢您的帮助。如果事件在
init
之前触发，testfun也不会捕获它。您需要附加eventlistener，然后等待触发事件。您应该能够将变量存储在组件中。我建议您熟悉javascript作用域的工作原理：