有没有办法使用for循环在js中创建n个函数

Question

我有一段代码，其中我有 3 个不同的函数来创建 3 个蛋精灵，它们只是数量不同。

let egg1, egg2, egg3

function makeegg1(){

  egg1 = new Image();
  egg1.src = eggs[0].src;

  ctx.clearRect(eggs[0].x, eggs[0].y, 10 * 3, 14 * 3);

  egg1.onload = function(){
    ctx.drawImage(egg1, eggs[0].x, eggs[0].y, 10 * 3, 14 * 3);}

    ctx.imageSmoothingEnabled = false; 
    ctx.mozImageSmoothingEnabled = false; 
    ctx.webkitImageSmoothingEnabled = false; 
    ctx.msImageSmoothingEnabled = false; 

  collect();
  updateeggcoords(1);
}

var egg1int = setInterval(makeegg1, 1000);

//repeat this makeegg[n] function and egg[n]int variable 2 more times with n=2 and n=3
//for the list, its n-1, so 0, 1 and 2

我想通过将这段代码放入for循环来优化它，这样我只需要编写一个函数而不是再复制和粘贴2个。例如，如果我想创建更多的蛋精灵，这种复制和粘贴将变得多余，并且对于大量的蛋精灵来说是不切实际的，比如 50 个。

我试过制作一个数组，但我不确定如何使用这样的数组来存储函数。关于如何执行此操作的指导将不胜感激。如果您需要进一步说明，我会提供。

Answer 1

我认为你应该做的是让你的函数可以被不同的蛋精灵重用。我会把你的函数改成这样

function makeEgg(index){

  const egg = new Image();
  const eggImage = eggs[index - 1];

  egg.src = eggImage.src;

  ctx.clearRect(eggImage.x, eggImage.y, 10 * 3, 14 * 3);

  egg.onload = function(){
    ctx.drawImage(egg1, eggImage.x, eggImage.y, 10 * 3, 14 * 3);}

    ctx.imageSmoothingEnabled = false; 
    ctx.mozImageSmoothingEnabled = false; 
    ctx.webkitImageSmoothingEnabled = false; 
    ctx.msImageSmoothingEnabled = false; 

  collect();
  updateeggcoords(index);
}

for (let i=1; i <=3; i += 1) {
    makeEgg(i);
}

变化是：

添加 index 作为函数的参数
在函数中引用index而不是hard-coded 0

通过这样做，您可以根据需要多次重复使用此功能

有没有办法使用for循环在js中创建n个函数

Is there a way to use a for loop to create n functions in js

javascript

loops

function