Javascript “未捕获的类型错误：未定义不是函数” - 初学者 Backbone.js 应用程序

"Uncaught TypeError: undefined is not a function" - Beginner Backbone.js Application

提问by jake

I'm setting up a pretty simple app with backbone, and I'm getting an error.

我正在使用主干设置一个非常简单的应用程序，但出现错误。

Uncaught TypeError: undefined is not a function example_app.js:7
ExampleApp.initialize example_app.js:7
(anonymous function)

This is where the error is showing up in Chrome Inspector (init file - example_app.js):

这是 Chrome Inspector 中出现错误的地方（初始化文件 - example_app.js）：

var ExampleApp = {
  Models: {},
  Collections: {},
  Views: {},
  Routers: {},
  initialize: function() {
    var tasks = new ExampleApp.Collections.Tasks(data.tasks);
    new ExampleApp.Routers.Tasks({ tasks: tasks });
    Backbone.history.start();
  }
};

Here's my tasks index.haml file

这是我的任务 index.haml 文件

- content_for :javascript do
  - javascript_tag do
    ExampleApp.initialize({ tasks: #{raw @tasks.to_json} });

= yield :javascript

models / task.js

模型/task.js

var Task = Backbone.Model.extend({});

collections / tasks.js

集合/tasks.js

var Tasks = Backbone.Collection.extend({
    model: Task,
    url: '/tasks'
});

routers / tasks.js

路由器/tasks.js

ExampleApp.Routers.Tasks = Backbone.Router.extend({
    routes: {
        "": "index"
    },

    index: function() {
        alert('test');
        // var view = new ExampleApp.Views.TaskIndex({ collection: ExampleApp.tasks });
        // $('body').html(view.render().$el);
    }
});

And here's proof that I'm calling all of the files (I think):

这是我调用所有文件的证据（我认为）：

<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/underscore.js?body=1" type="text/javascript"></script>
<script src="/assets/backbone.js?body=1" type="text/javascript"></script>
<script src="/assets/backbone-support/support.js?body=1" type="text/javascript"></script>
<script src="/assets/backbone-support/composite_view.js?body=1" type="text/javascript"></script>
<script src="/assets/backbone-support/swapping_router.js?body=1" type="text/javascript"></script>
<script src="/assets/backbone-support.js?body=1" type="text/javascript"></script>
<script src="/assets/example_app.js?body=1" type="text/javascript"></script>
<script src="/assets/easing.js?body=1" type="text/javascript"></script>
<script src="/assets/modernizr.js?body=1" type="text/javascript"></script>
<script src="/assets/models/task.js?body=1" type="text/javascript"></script>
<script src="/assets/collections/tasks.js?body=1" type="text/javascript"></script>
<script src="/assets/views/task_view.js?body=1" type="text/javascript"></script>
<script src="/assets/views/tasks.js?body=1" type="text/javascript"></script>
<script src="/assets/views/tasks_index.js?body=1" type="text/javascript"></script>
<script src="/assets/routers/tasks.js?body=1" type="text/javascript"></script>
<script src="/assets/tasks/index.js?body=1" type="text/javascript"></script>
<script src="/assets/tasks/task.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>

Any ideas would be great. Thanks!

任何想法都会很棒。谢谢！

回答by Alex Wayne

Uncaught TypeError: undefined is not a function example_app.js:7

未捕获的类型错误：未定义不是函数 example_app.js:7

This error message tells the whole story. On this line, you are trying to execute a function. However, whatever is being executed is not a function! Instead, it's undefined.

此错误消息讲述了整个故事。在这一行，您正在尝试执行一个函数。然而，正在执行的任何东西都不是函数！相反，它是undefined.

So what's on example_app.jsline 7? Looks like this:

那么example_app.js第 7 行是什么？看起来像这样：

var tasks = new ExampleApp.Collections.Tasks(data.tasks);

There is only one function being run on that line. We found the problem! ExampleApp.Collections.Tasksis undefined.

只有一个函数在该行上运行。我们发现了问题！ExampleApp.Collections.Tasks是undefined。

So lets look at where that is declared:

那么让我们看看声明的位置：

var Tasks = Backbone.Collection.extend({
    model: Task,
    url: '/tasks'
});

If that's all the code for this collection, then the root cause is right here. You assign the constructor to global variable, called Tasks. But you never add it to the ExampleApp.Collectionsobject, a place you later expect it to be.

如果这就是这个集合的所有代码，那么根本原因就在这里。您将构造函数分配给名为Tasks. 但是您永远不会将它添加到ExampleApp.Collections对象中，您以后希望它位于该位置。

Change that to this, and I bet you'd be good.

把它改成这个，我打赌你会很好。

ExampleApp.Collections.Tasks = Backbone.Collection.extend({
    model: Task,
    url: '/tasks'
});

See how important the proper names and line numbers are in figuring this out? Never ever regard errors as binary (it works or it doesn't). Instead read the error, in most cases the error message itself gives you the critical clues you need to trace through to find the real issue.

看到正确的名称和行号在解决这个问题时有多重要吗？永远不要将错误视为二进制（它有效或无效）。而是阅读错误，在大多数情况下，错误消息本身为您提供了需要跟踪以找到真正问题的关键线索。

---

---

In Javascript, when you execute a function, it's evaluated like:

在 Javascript 中，当你执行一个函数时，它会被评估为：

expression.that('returns').aFunctionObject(); // js
execute -> expression.that('returns').aFunctionObject // what the JS engine does

That expression can be complex. So when you see undefined is not a functionit means that expression did not return a function object. So you have to figure out why what you are trying to execute isn't a function.

该表达式可能很复杂。所以当你看到undefined is not a function它意味着表达式没有返回一个函数对象。所以你必须弄清楚为什么你试图执行的不是一个函数。

And in this case, it was because you didn't put something where you thought you did.

在这种情况下，那是因为你没有把东西放在你认为你做的地方。

回答by Dere Sagar

I have occurred the same error look following example-

我在下面的例子中出现了同样的错误 -

async.waterfall([function(waterCB) {
    waterCB(null);
}, function(**inputArray**, waterCB) {
    waterCB(null);
}], function(waterErr, waterResult) {
    console.log('Done');
});

In the above waterfall function, I am accepting inputArray parameter in waterfall 2nd function. But this inputArray not passed in waterfall 1st function in waterCB.

在上面的瀑布函数中，我在第二个瀑布函数中接受 inputArray 参数。但是这个 inputArray 没有在 waterCB 的第一个瀑布函数中传递。

Cheak your function parameters Below are a correct example.

检查你的函数参数 下面是一个正确的例子。

async.waterfall([function(waterCB) {
    waterCB(null, **inputArray**);
}, function(**inputArray**, waterCB) {
    waterCB(null);
}], function(waterErr, waterResult) {
    console.log('Done');
});

Thanks

谢谢