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

Posted 2023-02-19

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

【英文标题】："Uncaught TypeError: undefined is not a function" - Beginner Backbone.js Application

【发布时间】：2012-11-10 06:19:06

【问题描述】：

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

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

这是 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();
  
;

这是我的任务 index.haml 文件

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

= yield :javascript

模型/task.js

var Task = Backbone.Model.extend();

集合/tasks.js

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

路由器/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);
    
);

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

<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>

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

【问题讨论】：

pears_planner.js 第 12 行有什么内容？您没有包含该代码，但错误消息说这就是您的问题所在。事实上，我什至可以说这可能是这个问题的唯一相关代码。

抱歉，应该是第 7 行（我在一个版本中有一些 cmets）。这就是初始化文件：var tasks = new ExampleApp.Collections.Tasks(data.tasks);

等等，那个错误是错的？因为您刚刚在该评论中添加的代码没有提及PearsPlanner.initialize，这是您的错误似乎来自的地方...帮助我们帮助您，伙计...发布错误消息和错误消息引用的代码.

很抱歉——是的，错误是错误的。我不想在很多地方公开我的应用程序的名称，但我错过了那个。查看我的编辑...

【参考方案1】：

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

此错误消息说明了整个问题。在这一行中，您正在尝试执行一个函数。但是，正在执行的不是函数！相反，它是undefined。

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

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

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

让我们看看它是在哪里声明的：

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

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

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

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

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

---

在 Javascript 中，当您执行一个函数时，它的计算结果如下：

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

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

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

【讨论】：

如果您想学习，切勿盲目复制代码。阅读并尝试理解您复制的内容。如果您不知道某事是什么，请查一下。调试一个你不懂的程序是一种让你想把键盘扔出窗外的快捷方式。

确实如此。就我而言，这是由 $.noConflict() 的盲目复制引起的。

我可以像if (this.props && this.props.callBack) this.props.callBack(); 这样的支票

【参考方案2】：

我发生了同样的错误，请看下面的例子-

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

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

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

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

谢谢

【参考方案3】：

[笑话模式开启]

您可以通过添加以下内容来解决此问题：

https://github.com/donavon/undefined-is-a-function

import  undefined  from 'undefined-is-a-function';
// Fixed! undefined is now a function.

[笑话模式关闭]

【参考方案4】：

如果在 MongoDB 中使用 async-await ，请在 mongo 调用之前检查您是否缺少 await。

const [assistantError, assistant] = await assistantDb.findOneAssistant(
      _id: assistantId,
    );

这里如果缺少await，以后使用助手时可能会出现这个问题。