迭代JavaScript对象以绑定键

Iterating over a JavaScript object to bind keys

本文关键字：绑定 对象 JavaScript 迭代      更新时间：2023-09-26

考虑以下代码:

controls = {
  'w': 'up',
  's': 'down',
  'a': 'left',
  'd': 'right'
};
keysPressed = [];
for (control in controls) {
  direction = controls[control];
  $(document).bind('keydown', control, function() {
    keysPressed.push(direction);
  });
}

只有right方向被绑定，并且它被绑定到所有四个键。这显然不是我想要的，但是我错过了什么JavaScript阻止所有属性被适当地绑定?

编辑:

为了澄清，我使用jQuery。处理键名的热键。这是一个片段;可以假设所有变量都已声明。此外，代码在安全的function包装器中。

解决方案:

我解决了这个修改:

controls = {
  'w': 'up',
  's': 'down',
  'a': 'left',
  'd': 'right'
};
keysPressed = [];
addToKeyPressArray = function(value) {
  return function() {
    keysPressed.push(value);
  };
};
removeFromKeyPressArray = function(value) {
  return function() {
    keysPressed = keysPressed.filter(value);
  };
};
for (control in controls) {
  direction = controls[control];
  $(document).bind('keydown', control, addToKeyPressArray(direction));
  $(document).bind('keyup', control, removeFromKeyPressArray(direction));
}

在我看来，这可能是基本的"闭包for循环"的问题，许多人绊倒在JS。

通过google很容易找到解释和解决方案，例如:http://www.mennovanslooten.nl/blog/post/62

我是这样做的:

$( document ).keypress( function ( e ) {
    var char = String.fromCharCode( e.keyCode );
    if ( controls[ char ] ) {
        keysPressed.push( controls[ char ] );
    }
});

您没有声明direction变量(使用var)，因此它将处于全局作用域中。这意味着for循环将运行，然后direction将被设置为right。

所有键都被绑定，但是所有键都调用

keysPressed.push(direction);
// and that is:
keysPressed.push("right");

我还建议你阅读Jani的帖子(以及相关文章)，因为你也可能遇到这个问题。

相关文章：