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

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

有些人出于某种原因喜欢这些内联函数，但我认为它们只会增加困惑。命名函数对代码进行了一些分解，并向代码添加了一些文档。

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