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

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
      });
   }
}

有些人出于某种原因只是喜欢那些内联函数，但我认为它们只会增加混乱。命名函数会稍微分解代码，并在代码中添加一些文档。

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