“未捕獲的類型錯誤：未定義不是函數” - 初學者 Backbone.js 應用程序

Question

我正在使用主干設置一個非常簡單的應用程序，但出現錯誤。

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>

任何想法都會很棒。 謝謝！

Answer 1

未捕獲的類型錯誤：未定義不是函數 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這意味着表達式沒有返回函數對象。 所以你必須弄清楚為什么你試圖執行的不是一個函數。

在這種情況下，那是因為你沒有把東西放在你認為你做的地方。

Answer 2

我在下面的例子中出現了同樣的錯誤 -

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

在上面的瀑布函數中，我在第二個瀑布函數中接受 inputArray 參數。 但是這個 inputArray 沒有在 waterCB 的第一個瀑布函數中傳遞。

檢查你的函數參數 下面是一個正確的例子。

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

謝謝

Answer 3

[笑話模式開啟]

您可以通過添加以下內容來解決此問題：

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

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

[笑話模式關閉]

Answer 4

如果在帶有 async-await 的 MongoDB 中，請檢查在 mongo 調用之前是否缺少 await。

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

這里如果缺少await，稍后使用助手時，可能會出現此問題。