如何使用普通 JS 将 IIFE 中的变量重新使用到另一个变量？

Question

我写了一个 function， initialize它立即调用 object 中的其他两个函数。 我想在toggleSymbol上重用boardXs变量。 因此，我想把它退回来initialize scope 希望它能起作用。

const game = {
    initialize: (function() {
        (function hideX() {
            let boardXs = document.querySelectorAll('#ghost > div');
            for (let i = 0; i < boardXs.length; i++) {
                boardXs[i].innerHTML = " ";
            };
            return {boardXs};
        })(),

        (function toggleSymbol() {
            console.log(boardXs)
        })();
    });
}

当我在控制台中运行game.initialize()时， hideX工作但在控制台中抛出错误：“boardXs 未定义”。

到底是怎么回事？ 如何在 IIFE 中使用变量？ 为了学习，如果可能的话，我想继续使用这个 IIFE 设置。

Answer 1

如果您从hideX返回 object 并在toggleSymbol中使用，您可以执行此操作。

如果要从 hideX 返回hideX ，则需要将返回值存储在变量中，并在 scope 或其嵌套的 scope 中使用该变量。

 const game = { initialize: (function() { // Grab object in result const result = (function hideX() { let boardXs = document.querySelectorAll('#ghost > div'); for (let i = 0; i < boardXs.length; i++) { boardXs[i].innerHTML = " "; }; return { boardXs }; })(); // use here (function toggleSymbol() { console.log(result) })(); }) } game.initialize();

 <div id="ghost"> <div> </div> </div>