将值添加到具有匿名函数的Array中的JavaScript对象

Question

我正在使用Filepicker.io来存储图像。我试图使用它们的filepicker.stat()函数获取图像的元数据。然而，虽然它让我与元数据的内部工作，像这样：

filepicker.stat(InkBlobs[i], { width: true, height: true }, function(metadata){ console.log(JSON.stringify(metadata)) }); 

我不能得到的元数据指出，匿名函数。我想要做的是这样的：

for(i = 0; i < InkBlobs.length; i++) 
{ 
    filepicker.stat(InkBlobs[i], { width: true, height: true }, function(metadata){ InkBlobs[i].add(JSON.stringify(metadata)); }); 
} 

这显然是行不通的（在InkBlobs[i].add(...)）的一部分，所以我怎么能捕获元数据，并与位于阵列中的其他数据包括它？数组内容可以是JSON.stringify()'d。

Answer 1

首先，我假设回调收到metadata作为参数;这是从问题中的代码中遗漏的，但我会假设如下。

你基本上可以做你写的东西，你只需稍微改变一下管理i并有一个地方来存储它。由于这是JavaScript，因此您可以将自己的属性添加到InkBlob实例中，但这通常有点危险（如果您与非公开内容发生冲突，或者他们在下一个版本中添加了类似对象的内容等） 。

首先让我们处理i：

for(i = 0; i < InkBlobs.length; i++) 
{ 
    filepicker.stat(InkBlobs[i], { width: true, height: true }, makeCallback(i)); 
} 
function makeCallback(index) { 
    return function(metadata){ 
     InkBlobs[index].add(JSON.stringify(metadata)); 
     // This bit ^^ is still theoretical 
    }; 
} 

现在，不要关在i，我们的回调关闭了index，这是我们传递给makeCallback当我们在循环中调用它的观点。回调发生前i发生变化，index没有。

您还可以使用ES5的bind如果回调看到this不必通过stat进行控制：

for(i = 0; i < InkBlobs.length; i++) 
{ 
    filepicker.stat(InkBlobs[i], { width: true, height: true }, function(index, metadata){ 
     InkBlobs[index].add(JSON.stringify(metadata)); 
     // This bit ^^ is still theoretical 
    }.bind(null, i)); 
} 

注意i我们通过bind参数通过所提供的任何的前面显示出来stat（在我的示例中bind，null的第一个参数是回调期间设置的this）。

我从这里开始使用bind，因为它更简洁。

现在我们必须使用inkblobs存储元数据。这里有一种方法：

var data = []; 
var count = 0; 
for(i = 0; i < InkBlobs.length; i++) 
{ 
    filepicker.stat(InkBlobs[i], { width: true, height: true }, function(index, metadata){ 
     data[index] = { 
      blob:  InkBlobs[index], 
      metadata: metadata // No reason to stringify it that I know of, but you could 
     }; 
     ++count; 
     if (count === InkBlobs.length) { 
      useTheNewArray(); 
     } 
    }.bind(null, i)); 
} 

请注意，我们迫不及待地打电话useTheNewArray，直到我们看到回调所有斑点。另外请注意，我们不只是将push添加到新阵列中，因为它们可能无序到达（理论上）。当然，如果订单无关紧要，push就不用了，你不再需要count变量了。