JavaScript - 嵌套函数drop.length of array

时间:2018-04-28 23:00:13

标签: javascript scope nested-function

我试图编写一个可以将按键记录并存储到名为" hotkey"的变量中的应用程序。我们的想法是创建一个按键阵列,以定义同时按键输入的热键和使用它们的触发操作。

问题是我一直遇到功能范围问题。根据我对函数作用域的理解,嵌套函数(在本例中为anyKey)应该可以访问其父作用域的所有变量(在本例中为testFunc())。

我觉得我在这里缺少一些重要的东西,但我不确定它是什么。我知道它与嵌套函数保留变量有关,但似乎我应该如何工作。有任何想法吗?我需要在这里自学的任何重要概念吗?

提前致谢。

function testFunc() { 
  var hotkey = [];  
    console.log("hotkey length is:"+hotkey.length) //Yields "hotkey length is:0"
  hotkey[0] = "dummy";

  input.addEventListener("keydown", anyKey);

}

function anyKey(ev, txt, hotkey){  //If I don't enter hotkey as a paremeter, I'm notified "hotkey is not defined".  If I _do_ enter it, I get "nested hotkey length is: undefined

console.log("nested hotkey length is:"+hotkey);

let target = ev.currentTarget;
  let tag = target.tagName;
  let char = ev.char || ev.charCode || ev.which;
  log(char, tag);
  let s = String.fromCharCode(char);
  log(s);

/***
The following code, consequentially, doesn't work because hotkey.length isn't defined
***/
        for(i = 0; i <= hotkey.length + 1; i++){
        if (hotkey[i] === undefined || hotkey[i] === "dummy"){
          hotkey[i] = char;
        }
    } 

1 个答案:

答案 0 :(得分:1)

正如评论所指出的那样,anyKey() 嵌套在testFunc()中,它只是在testFunc()内调用。这还不足以共享相同的范围。这是一个嵌套在另一个函数中的函数示例,它显示它们共享一个变量keyCount,用于跟踪按下按键的次数:

function testFunc() {
  let keyCount = {}
  let input = document.getElementById('myInput')
  input.addEventListener("keydown", addCount);
  
  // addCount is nested here
  function addCount(ev) {
    let key = ev.key
    // this functin has access to keyCount because it's nested
    // within testFunc
    keyCount[key] = (keyCount[key] || 0) + 1
    console.log("counts: ", keyCount)
  }
}
testFunc()
<input id='myInput' type="text" />

嵌套两个函数可能不方便。广告替代方案是简单地在函数之外定义hotkey,它将在两者的范围内,或者重写逻辑,因此只有一个函数需要访问它。例如,您的事件处理程序不需要做太多逻辑 - 它只能找出按下的键并将其传递给管理状态的对象。