代码之家 › 专栏 › 技术社区 › VSO

创建一系列函数的实际原因?

closures javascript

VSO · 技术社区 · 8 年前

我正在学习闭包。我理解javascript模块模式,但闭包的另一个“实际应用”似乎是避免在循环中创建函数并将其推送到数组中的问题。

我想不出有什么理由这么做。下面是一个循环中的闭合问题示例: 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 它工作得很好,所以我真的无法在这里看到真实世界的应用程序。

2 回复 | 直到 8 年前

Pointy 8 年前

大约一周前,我在做一件事,画简单的条形图。这些图比较了可比较事物属性的特定值。这些图可以显示正数和负数,尽管有时所有可比较的数字都是负数或都是正数。

结果有8种情况:

集合中有两个符号,我画的图是关于负最小值的
集合中有两个符号,我画的图是正最大值
集合中有两个符号,我画的图是负值,不是最小值
集合中有两个符号,我画的图是一个不是最大值的正值
所有的值都是负数,我画的图是负最小值
所有的值都是正的,我画的图是正的最大值
所有的值都是负值,我画的图是一个不是最小值的负值
所有的值都是正值,我画的图是一个不是最大值的正值

有鉴于此,我创建了一个简单的函数来查看一组特定值的质量,并给我一个介于0和7之间的数字。然后我制作了一个函数数组,代码只调用结果值指示的任何函数。这允许代码的清晰分离,否则会有点混乱。我还可以记录或以其他方式记住用于调试的“情况代码”;如果有一种特殊的条看起来是错误的,我确切地知道应该看哪个函数。

Get Off My Lawn 8 年前

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

首先,我创建了一些有趣的组件来修改游戏对象:

x/y位置
旋转
规模

它们看起来像这样:

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

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

接下来,每当我想要一个游戏对象访问该对象的功能时,我只需将该组件连接到游戏对象。现在,它在每一帧上运行更新功能。它看起来像这样:

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 但是 游戏对象2 还具有来自的其他功能 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()

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