Question

我正在学习闭包。我理解javascript模块模式，但它似乎是唯一的其他＆＃34;实际应用程序＆＃34;闭包是为了避免在循环中创建函数并将其推送到数组的问题。

我无法想到这样做的一个原因。以下是从此处获取的循环中的闭包问题的示例：JavaScript closure inside loops – simple practical example

var funcs = [];
for (var i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] = function() {          // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j]();                      // and now let's run each one to see
}

您何时会在真实软件中执行此操作？我不知所措。我写了一个factory，它工作正常，所以我真的没有在这里看到真实世界的应用程序。

Answer 1

大概一周前，我正在研究绘制简单条形图的事情。图表比较了可比较物的属性的特定值。图表可以显示正数和负数，但有时所有可比数字都是负数或者都是正数。

事实证明有8个案例：

集合中有两个符号，图表I＆＃39; m是负最小值
集合中有两个符号，图表I＆＃39; m是最大正值
集合中有两个符号，图表中的图表是负值，而不是最小值
集合中有两个符号，图表中的图表是正值，而不是最大值
所有值均为负值，图表I＆＃39; m绘制为负最小值
所有数值均为正数，图表I＆＃39; m为最大正数
所有值均为负值，图表中的图表为负值而非最小值
所有值均为正值，图表中的图表为正值，而非最大值

鉴于此，我创建了一个简单的函数来查看特定值集的质量，并给出一个0到7之间的数字。然后我创建了一个函数数组，代码只调用了哪个函数得到了结果值表示。这样就可以清晰地分离代码，否则这些代码就会变得混乱。我也可以记录或以其他方式记住＆＃34;情境代码＆＃34;用于调试;如果一种特殊的条看起来不对，我确切地知道要看哪个函数。

Answer 2

为了更好地解释我的游戏引擎中一系列闭包的情况。

首先，我创建一些有趣的组件来修改gameObjects：

x / y位置
旋转
尺度

它们看起来像这样：

class ComponentA extends Component {
    update() {
        console.log('Component A')
    }
}

class ComponentB extends Component {
    update() {
        console.log('Component B')
    }
}

接下来，每当我想让gameObject访问该对象的功能时，我只需将该组件附加到gameObject即可。现在每个帧都运行该更新功能。它看起来像这样：

let gameObject1 = new GameObject()
gameObject1.addComponent(ComponentA) // component instance gets added to global array

let gameObject2 = new GameObject()
gameObject2.addComponent(ComponentA) // component instance gets added to global array
gameObject2.addComponent(ComponentB) // component instance gets added to global array

在上面的gameObject1和gameObject2分享ComponentA中的相同功能，但gameObject2还具有ComponentB的其他功能。

现在，一旦创建了所有gameObject，（这就是我们与你的问题相关的地方），引擎会遍历组件数组并像这样运行update：

class engine {

    static components = []

    tick() {
        // Here is what you need to pay attention to:
        engine.components.forEach(comp => {
            if(typeof comp == 'function') {
                comp['update']()
            }
        })
        window.requestAnimationFrame(this.tick.bind(this))
    }

    run() {
        window.requestAnimationFrame(this.tick.bind(this))
        startRenderer()
    }
}

new engine().run()

这就是我的引擎的工作方式，这与你的工作非常相似，只是一种不同的方式。

创建函数数组的实际原因？

2 个答案: