FileReader() - 闭包和传递参数的问题

Question

FileReader.onload() 事件有一些问题：

我在以下两个代码 sn-ps 之间得到不同结果的原因是什么？只要我通过 object 实例，而不是显式的 this.attachmentIndex 值，我就会得到不同的结果。

1)

fileReader.onload = (function (file, obj) {
                    return function (evt) {
                        obj.attachmentIndex // 1
                    };
                })(f, this);

2)

        fileReader.onload = (function (file, index) {
            return function (evt) {
                index // 0
            };
        })(f, this.attachmentIndex);

关闭 - FileReader.onload()

我面临的另一个问题是我似乎无法将多个参数传递给我的FileReader.onload() 事件处理程序。

        fileReader.onload = (function (file, one, two) {
            return function (evt) {
                one // 1
                two // undefined
            };
        })(f, 1, 2);

你可以在下面找到整个对象。我不得不做一些丑陋的事情来实现我想要的。我真的希望有更好的方法来达到同样的效果。

function Note() {
    this.attachmentOutput = [];
    this.attachmentIndex = 0;
    this.debugging = false;
    this.currentWorkingObject = new NoteObject(helperFn.createGuid());
    this.addAttachement = function(files) { 
        for (var i = 0, f; f = files[i]; i++) {
            var fileReader = new FileReader(),

            fileReader.onload = (function (file, obj) {
                return function (evt) {
                    var base64File = evt.target.result;
                    obj["note"].addDataToAttachementObj(obj["index"], { data: base64File })
                };
            })(f, { note: this, index: this.attachmentIndex});

            // Async => reading file
            fileReader.readAsDataURL(f);

            this.attachmentIndex++
        }

        var html = app.outputTemplate(this.currentWorkingObject.attachements);
        $('.upload-output').html(html);
    };

};

函数的触发器：

$(".upload-drop-zone").on('drop', function (e) {
        e.preventDefault();
        var files = e.originalEvent.dataTransfer.files;
        app.myCurrentNote.addAttachement(files);
    });

Answer 1

我想要 0 作为闭包中索引值的结果 - 最后我 明白了，但只是用这个丑陋的解决方法。如果我没有通过 明确论证，然后我得到 1，我不知道为什么。

FileReader 是异步的。 this.attachmentIndex 似乎在

处增加到1

    // Async => reading file
    fileReader.readAsDataURL(f);

    this.attachmentIndex++ // <- `this.attachmentIndex` incremented to `1` here

可能在调用FileReader.onload 事件之前。