javascript - 对象与函数在 Backbone,js 中的实例化

Question

我接手了一个研究项目，做的还不错，除了最近，我想我对Backbone中实现的一些JS结构有误解。我对模型或集合的结构以及它返回的是对象还是函数感到困惑。

该项目具有当前的模型结构:

define([…], function(…) {
  var measureModel = Backbone.Model.extend({
    defaults: {…},
    initialize: function(){…}
    …
  });
  return measureModel; //here there is no function, so I assume its an object
});

对于集合:

define([…], function(…){
  var measuresCollection = Backbone.Collection.extend({
    model: measureModel,
    initialize: function(){…}
  });
  return new measuresCollection(); //here I assume it is an function
});

我用上面的结构制作了新的模型和集合，但是出现了下面的错误，所以我也试了这个:

define([…], function(…){
  return Backbone.Collection.extend({  // here I just return the Object
    model: newerModel,
    initialize: function(){…}
  });
});

按照第一个结构，在一些新模型和集合上，我收到错误 Uncaught TypeError: object is not a function 或 Uncaught TypeError: [Object object] is not a function 或 Uncaught TypeError: undefined is not a function，取决于结束返回语句的省略，或直接返回对象。

我在另一个 View 中调用构造函数，如下所示:this.newerCollection = new NewerCollection();

• 为什么使用相同的结构会出现(任何)这些错误？
• 创建变量并返回它和直接返回它之间有什么区别？
• 为什么我会使用一种方式而不是另一种方式？

Answer 1

extend 始终返回一个函数，该函数用作您已扩展的模型/集合/ View 的构造函数。

在此代码块(问题中的第一个代码块)中，您将返回一个函数，它是扩展模型的构造函数:

define([…], function(…) {
  var measureModel = Backbone.Model.extend({
    defaults: {…},
    initialize: function(){…}
    …
  });
  return measureModel; //here you are returning a function, which is a constructor for the extended Model
});

在此代码块(问题中的第二个代码块)中，您将返回一个对象，而不是函数，因为您已经使用 new 实例化了一个 measuresCollection . measuresCollection 变量本身就是构造函数:

define([…], function(…){
  var measuresCollection = Backbone.Collection.extend({
    model: measureModel,
    initialize: function(){…}
  });
  return new measuresCollection(); //here you are returning an object because it is instantiated using `new`
});

如果您尝试使用该模块的值来实例化一个新对象，您将收到“对象不是函数”错误。

在此代码块中(问题中的第三个 block )将等同于第二个 block 中的 returning measuresCollection。在那里，您将返回一个函数而不是一个对象，就像第一个 block 一样。

define([…], function(…){
  return Backbone.Collection.extend({  // this is returning a function, the same as the first code block
    model: newerModel,
    initialize: function(){…}
  });
});

如果您从模块中省略 return 语句，它会返回 undefined 并且当您尝试使用它时会收到“undefined is not a function”错误实例化一个对象。

在第一个和第三个代码块中返回构造函数的方式基本上没有区别。前者只是在返回之前将构造函数分配给局部变量。这样做的唯一原因是如果您需要在返回之前对其进行操作。