我试图编写一个可以将按键记录并存储到名为" 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;
}
}
答案 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
,它将在两者的范围内,或者重写逻辑,因此只有一个函数需要访问它。例如,您的事件处理程序不需要做太多逻辑 - 它只能找出按下的键并将其传递给管理状态的对象。