使用javascript对象作为；“功能存储”；动态调用它们？

考虑一下这样的情况：

const keyAction = {
    a() {
        console.log("You've pressed 'a'");
    },
    b() {
        console.log("You've pressed 'b'");
    },
    c() {
        console.log("You've pressed 'c'");
    }
}

document.addEventListener('keydown', e => keyAction[e.key]());

document.addEventListener('keydown', e => {
    if (typeof keyAction[e.key] === 'function') {
        keyAction[e.key]();
    }
});

---

这种做法不好吗？有什么理由不这样做吗？

事实上，这是一种流行的做法，因为有些人倾向于使用对象来模拟来自其他语言的名称空间。我认为这没什么不好的，只要你理解这种方法可能设置的陷阱。例如，您应该记住当您将这些函数作为参数传递时，

此

会发生什么情况（请参见下面的示例）：

另外，正如@Nick Ovchinnikov所指出的，在您的具体示例中还有一个陷阱。您应该确保，无论何时按下按钮，环境都不会试图调用不存在的函数，否则您可能会遇到错误。因此，最终您的处理程序绑定应该是这样的：

const keyAction = {
    a() {
        console.log("You've pressed 'a'");
    },
    b() {
        console.log("You've pressed 'b'");
    },
    c() {
        console.log("You've pressed 'c'");
    }
}

document.addEventListener('keydown', e => keyAction[e.key]());

document.addEventListener('keydown', e => {
    if (typeof keyAction[e.key] === 'function') {
        keyAction[e.key]();
    }
});

---

使用对象作为函数存储不是一个坏主意。它易于理解、易于维护和快速访问（因为有hashmap系统）。与if/else if/…相比，它还使您能够对数据进行处理。。。事情-例如，做一个循环。。。ect

取决于你想做什么，这可能是一个很好的帮助

尽量避免每次调用函数tho时重新创建对象。构建一次并重用它

const keyAction={
a:（）=>{
log（“您已按下'a'”）；
},
b:（）=>{
log（“您按下了“b”）；
},
};
函数clickFunc（键）{
键动作[键]（）；
}

.ex{
背景色：#4444；
颜色：白色；
身高：5公分；
宽度：5em；
边缘：1米；
光标：指针；
显示器：flex；
弯曲方向：行；
对齐项目：居中；
证明内容：中心；
}

A.
B

如果您遇到问题，当您按下一个未处理的键时，您将看到

错误：keyAction[e.key]不是一个函数

if (typeof keyAction[e.key] === 'function') {
    return keyAction[e.key]()
}

console.log('You pressed a some button')

---

Javascript是一种动态语言，当然在某些情况下它是非常棒的。但是不需要滥用，因为你失去控制的速度比你想象的要快

为什么要创建3个函数？创建1并在可能的副本中使用e.key:@Justcode如果，如果这些函数具有不同的implementation@brk喜欢我们可以在一个函数中调用另一个函数。是的，我同意这样做没有错，绝对没有错。在调用它之前，请记住检查

keyAction[e.key]

是否未定义。感谢您的解释@Nick Ovchinnikov的也包含了我的想法的一个重要陷阱。你能把它写进你的答案里吗？好的！已经注意到了这一点。谢谢！