匿名函数包装局部变量并返回新函数

Question

我非常抱歉要求另一个匿名函数的问题，但它每当我找出它们时都会出现接缝，JavaScript会给我另一个曲线球。

我使用KineticJS创造了多个圆的动画，然后他们像这样（以下these tutorials）

for (i = 0; i < rows; i++) 
{ 
    for (j = 0; j < cols; j++) 
    { 
     index = i * cols + j; 
     circles [ index ] = new Kinetic.Circle({...}); 
     ... 
    } 
} 
... 
for (i = 0; i < rows; i++) 
{ 
    for (j = 0; j < cols; j++) 
    { 
     index = i * cols + j; 
     anims [ index ] = new Kinetic.Animation({func: function (frame) 
      { 
       (function (innerCircle) 
       { 
        ... 
       } (circles [ index ])); 
      }, 
      node: layer 
     } 
    ); 
    } 
} 

我的目的是创建匿名函数时传递的index当前值。问题是只有最后一张图像被动画，我不知道为什么。这里是full jsfiddle

Answer 1

你应该创建一个新的变量作用域的函数位于错误的地方。它应该在通过的功能之外，并且应该返回一个新功能。

返回的函数将有权访问所需的值。

for (i = 0; i < rows; i++) 
{ 
    for (j = 0; j < cols; j++) 
    { 
     index = i * cols + j; 
     anims [ index ] = new Kinetic.Animation({func: function(innerCircle) { 
                 return function (frame) { 

                 }; 
                 })(circles[index]), 
      node: layer 
     } 
    ); 
    } 
} 

---

不过说实话，不喜欢这样的内联函数。当你创建一个返回你的函数的命名函数时，它变得非常清晰。

function makeFunc(innerCircle) { 
    return function (frame) { 
      // you can use innerCircle in here 
    }; 
} 

for (i = 0; i < rows; i++) { 
    for (j = 0; j < cols; j++) { 
     index = i * cols + j; 
     anims [ index ] = new Kinetic.Animation({ 
     func: makeFunc(circles[index]), 
     node: layer 
     }); 
    } 
} 

有些人只是因为某些原因喜欢这些内联函数，但我认为他们只是增加了混乱。一个命名函数将代码分解一点，并向代码添加一些文档。

此外，它的效率稍高一点，因为在循环的每次迭代中都没有创建新的内联函数。相反，您正在重复使用同一个构建处理程序。