Backbone bizzare syntax

Question

I was really struggling to understand the syntax of the Backbone but failed miserably, look at the following code:

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

I have looked at the source code of the Backbone.js and found the following declaration of Backbone.Model

var Model = Backbone.Model = function(attributes, options) {
  var attrs = attributes || {};
  options || (options = {});
  this.cid = _.uniqueId('c');
  this.attributes = {};
  if (options.collection) this.collection = options.collection;
  if (options.parse) attrs = this.parse(attrs, options) || {};
  attrs = _.defaults({}, attrs, _.result(this, 'defaults'));
  this.set(attrs, options);
  this.changed = {};
  this.initialize.apply(this, arguments);
};

as I understand var Model is now a function, which will work as constructor. What I don't understand is:

1. we are not calling var myModelObject = new Model() or var myModelObject = new Backbone.Model(). Instead we are calling Backbone.Model.extend(). How on earth does this work as a constructor?
2. This call Backbone.Model.extend() breaks my mind. We are calling a function called extend on another function called Backbone.Model

Answer 1

I think you're getting confused between two different objectives:

var myModelObject = new Backbone.Model() or var myModelObject = new MyCutomModel() is used to to create a new instance of a model.

Backbone.Model.extend() is used to create your own custom module, so your code would look something like this:

var MyCutomModel = Backbone.Model.extend({
    initialize: function () {
        // Overwrite the default initialize function
    }, 
    customMethod: function () {
        // Write your own custom method that you can use in this model
    }
});

The extend method is not part of JavaScript. There's no such thing as a default extend method that is native to Javascript.

However, many libraries have their own extend methods and it's very common for libraries and individuals to write their own extend methods (what they do might be quite different though, $.extend, _.extend, Backbone.Model.extend are all different; although $.extend and _.extend are pretty similar).

Backbone has its own custom extend methods (Read the Source Code), which basically adds properties and methods to the object and to its prototype.

Once you create an instance, of MyCutomModel, you can use the methods you've defined for it in your extend.

var my_custom_model = new MyCutomModel();
my_custom_model.customMethod();

To answer the second part of your question: Yes, it's a little confusing. It's JavaScript!

Backbone.Model is a function, but what that function does is return an object. That function can also have methods that you can call on that function. Look at the following code taken from this stackoveflow question:

function Foo(){}
Foo.prototype.bar = function(){}
var x = new Foo()
x.bar()

Since JavaScript functions are actually a Function object, it's perfectly ok in JavaScript for a function to return something and to also have a method.