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

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

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