javascript - 使用 javascript 对象作为 "function store"并动态调用它们？

Question

考虑这样的事情:

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]());

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

Answer 1

这实际上是一种流行的做法，因为有些人倾向于使用对象来模拟来自其他语言的命名空间。我认为它没有什么不好，只要您了解这种方法可能设置的陷阱。例如，当您将这些函数作为参数传递时，您应该记住 this 会发生什么(请看下面的示例):

const store = {
    a() {
        this.b();
    },
    b() {
        console.log("It works!");
    }
}

store.a();  // Logs "It works"
setTimeout(store.a, 10) // Error: this.b is not a function

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

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