javascript：对象不是函数

javascript: object is not a function

提问by hh54188

I write a module:

我写了一个模块：

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

but when I execute

但是当我执行

FileReader.read()

it always warn me object is not functionat var reader = new FileReader()

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

what's wrong with my code?

我的代码有什么问题？

回答by T.J. Crowder

It's saying that because you've made FileReadernot a function, you've replaced it with an object (which has a function called read). All globals are properties of the global object (window, on browsers), so by setting window.FileReader = { ... };, you're replacing the global FileReaderfunction with your object.

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

You seem to be trying to use the File API. That being the case, you want to notcall your global module object FileReader, as that's defined by the File API. Call it something more specific to you (here I'm using Fooas an obviously-nonsense example):

您似乎正在尝试使用File API。既然如此，你想不打电话给你的全局模块的对象FileReader，做为所用文件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();

回答by Henry Leu

When you code this line:

当您对此行进行编码时：

var reader = new FileReader();

make sure you define FileReader function in you code as below.

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

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

In you code, you only return an object and assign it to window.FileReader, not a function, see you code as below：

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

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

Hope it will help you.

希望它会帮助你。

回答by Behrad Farsi

You have defined FileReader as an object with a property read : Object {read: function}you should first of all define FileReader as a constructor function like this:

您已将 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
    };
};

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

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

        // reader.readAsDataURL(file);
    };

    return {
        read: read
    };
};

And then you can create an object from this:

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

var object = new FileReader();

var object = new FileReader();

回答by Rox Dorentus

By the time window.FileReaderbeen assigned, the function readwas not been called, thus var reader = new FileReader();was not executed.

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

In fact, it is not executed until you call FileReader.read(). But at that time the value of FileReaderinside the readfunction has already been replaced by your window.FileReader.

事实上，直到您调用它才会执行FileReader.read()。但是那个时候函数FileReader里面的值read已经被你的window.FileReader.

Moving var reader = new FileReader();out of the function, which makes it been executed earlier will eliminate the error:

移动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
    };
})();

However, I don't think it's a good idea having variables, especially global variables, named the same as something from the system APIs. So I'd prefer T.J. Crowder's way: just change the name of the global variable.

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