javascript - javascript：对象不是函数

Question

我写了一个模块：

window.FileReader = (function () {

        var read = function (file) {
            var reader = new FileReader();

            reader.onload = function (e) {
                console.log(e.target);
            };

            // reader.readAsDataURL(file);
        };

        return {
            read: read
        };
    })();

但是当我执行

FileReader.read()

它总是警告object is not function我var reader = new FileReader()

我的代码有什么问题？

Answer 1

意思是因为你FileReader没有创建一个函数，所以你用一个对象（它有一个名为 的函数read）替换了它。所有全局变量都是全局对象（window浏览器上的 , ）的属性，因此通过设置window.FileReader = { ... };，您将FileReader用您的对象替换全局函数。

您似乎正在尝试使用File API。在这种情况下，您不想调用全局模块 object FileReader，因为这是由 File API 定义的。称它为对你更具体的东西（这里我用Foo一个明显无意义的例子）：

window.Foo = (function () {

    var read = function (file) {
        var reader = new FileReader();

        reader.onload = function (e) {
            console.log(e.target);
        };

        // reader.readAsDataURL(file);
    };

    return {
        read: read
    };
})();

// Usage:
Foo.read();

Answer 2

到window.FileReader分配的时间，该函数read还没有被调用，因此var reader = new FileReader();没有被执行。

事实上，直到你调用它才会执行FileReader.read()。但那时函数FileReader内部的值read已经被你的window.FileReader.

var reader = new FileReader();移出function，使其更早执行将消除错误：

window.FileReader = (function () {
    var reader = new FileReader();

    var read = function (file) {
        reader.onload = function (e) {
            console.log(e.target);
        };

        // reader.readAsDataURL(file);
    };

    return {
        read: read
    };
})();

但是，我认为将变量（尤其是全局变量）命名为与系统 API 中的名称相同并不是一个好主意。所以我更喜欢 TJ Crowder 的方式：只需更改全局变量的名称。

Answer 3

当您编写此行代码时：

var reader = new FileReader();

确保在代码中定义 FileReader 函数，如下所示。

window.FileReader = function(){
    ...
};

在您的代码中，您只返回一个对象并将其分配给 window.FileReader，而不是一个函数，您的代码如下：</p>

window.FileReader = (function () { ... return {}; })();

希望它会帮助你。

Answer 4

您已将 FileReader 定义为具有属性 read 的对象：Object {read: function} 您首先应将 FileReader 定义为构造函数，如下所示：

FileReader = function () { var read = function (file) { var reader = new FileReader();

        reader.onload = function (e) {
            console.log(e.target);
        };

        // reader.readAsDataURL(file);
    };

    return {
        read: read
    };
};

然后你可以从中创建一个对象：

var object = new FileReader();