javascript - 可以简化将变量添加到函数范围的多个闭包吗？

Question

我试图将两个变量传递给 filereader 回调。本质上，我是在遍历文件并显示它们的缩略图；为此，我需要两个变量(在本例中为 parent 和 canvas)。下面的代码有效，但我想确保 future 的自己不会讨厌现在的自己。

我假设将两个变量传递到回调函数的范围内而不覆盖 this 是一种相当常见的情况。

此代码使用命名空间(父级)，这是可以避免的，但我仍然想知道如何将两个变量传递给回调函数。

reader.onload = (function (parent) { // even funkier closure to access the parent, the canvas, and the file
    return function(canvas) { // funky closure to be able access the canvas and file
        return function(r) {
            canvas.sourceImage.src = r.target.result;
            parent.functions.render(canvas);
            parent.functions.preview(canvas, canvas.sourceImage.width/10, canvas.sourceImage.height/10);
        };
    }(parent.canvases[j]);
})(parent);

reader.readAsDataURL(file);

---

根据评论，这里是完整的代码。我并不是特别在寻找代码审查(有一个堆栈!)，但欢迎任何反馈。

(function () {
    this.readFiles = function (parent) {
        var files = parent.fileInput.files;
        var j = parent.canvases.length; // so we don't overwrite old previews
        for (var  i = 0; i < files.length; i++, j++) {
            var file = files[i];
            var reader = new FileReader;

            var canvas = document.createElement('canvas');
            canvas.id = "previewCanvas" + j;
            canvas.className = parent.canvasClasses;
            canvas.width = 100;
            canvas.height = 100;
            parent.previewWrapper.appendChild(canvas);

            /* Initialize Canvases for each file */
            parent.canvases[j] = this.create(document.getElementById('previewCanvas' + j));

            reader.onload = (function (parent) { // even funkier closure to access the parent, the canvas, and the file
                return function(canvas) { // funky closure to be able access the file
                    return function(r) {
                        canvas.sourceImage.src = r.target.result;
                        parent.functions.render(canvas);
                        parent.functions.preview(canvas, canvas.sourceImage.width/10, canvas.sourceImage.height/10);
                    };
                }(parent.canvases[j]);
            })(parent);

            reader.readAsDataURL(file);
        }
    }
}).apply(Canvas.functions);

Answer 1

虽然@MichaelGeary 主要通过重构代码来回答我的问题，但标题问题的答案是立即执行外部函数，并且可以访问当前变量:

reader.onload = (function (parent) { 

   var canvas = parent.canvases[j];
   // put more variables ad nauseum here. 
   // They will be passed to the return function without being changed.

   return function(r) {
        canvas.sourceImage.src = r.target.result;
        parent.functions.render(canvas);
        parent.functions.preview(canvas, [...]);
        };
})(parent);

这样您就可以在回调中使用计数器和其他可能根据需要更改的变量。