迭代 JS 对象并执行每个函数

Question

场景：我正在开发一个 chrome 扩展，我有一堆监听器需要添加到前台。

我想做什么：创建一个名为 'listeners' 的对象，仅包含函数（将运行 addListeners 的函数）和一个名为 'init' 的函数，该函数将迭代我的 'listeners' 对象并动态执行每个函数。

原因：我想向对象添加新的侦听器，而不必担心必须在我的 init 函数中直接一个接一个地调用它们。我知道这样做不会太麻烦，但如果我能让事情变得更有活力，那会很有趣。

这可能吗？

类似于：

const listeners = {
    func1: function (){...},
    func2: function (){...},
    func3: function (){...}
}

function init(){
    for (let func in listeners){
        //somehow execute func

        //func() appearently does not work
        //()=>func appearently does not work
    }
}

init();

Answer 1

试试这个：

const listeners = {
    func1: function () {
        console.log(1);
    },
    func2: function () {
        console.log(2);
    },
    func3: function () {
        console.log(3);
    }
}

function init() {
    for (let func in listeners) {
        listeners[func]();
    }
}

init();

Answer 2

for...in循环迭代对象的键，所以func变量是一个字符串，而不是一个函数。运行函数使用 listeners[func]();.

你可以用Object.values()得到一个函数，然后用for...of迭代它：

const listeners = {
  func1(){ console.log(1); },
  func2(){ console.log(2); },
  func3(){ console.log(3); }
}

function init(){
  for (const func of Object.values(listeners)){
    func()
  }
}

init();

或者对Array.forEach()做同样的事情：

const listeners = {
  func1(){ console.log(1); },
  func2(){ console.log(2); },
  func3(){ console.log(3); }
}

const init = () => Object.values(listeners).forEach(func => func())

init();

Answer 3

你只需要在循环中那样做 listeners[func]() ，在 for in 循环中，键是迭代的，所以你在你的情况下调用这样的项目 obj/array[key] func 虽然你有功能，但你需要添加 ()。 check inspect in this fiddler link

Answer 4

在其他答案之上。我认为 Array 结构更适合你的情况。

const listeners = [
  function () {
    console.log(1);
  },
  function () {
    console.log(2);
  },
  function () {
    console.log(3);
  },
];

function init() {
  listeners.forEach(func => func());
}

init();

迭代 JS 对象并执行每个函数

Iterate JS object and execute every function

javascript

function

object

addeventlistener

google-chrome-extension