Question

I have a base view V:

V = Backbone.View.extend({   
  initialize: function() {
    console.log(this.options.z);
    console.log(this.options.q);   
  }
});

extended by VV, which sets the value of a property (q: 234):

VV = V.extend({q:234});

V is further specialized to VV:

new VV({z: 123})

​
The problem is that the base type has no access to q, how can I do this?
I’m trying to understand this inheritance system, in this example
q and z are like virtual/abstract values that are to be defined in
sub classes.

http://jsfiddle.net/maxl/G8cab/

Answer 1

When you say this:

VV = V.extend({q: 234});

you’re creating VV as “subclass” of V that will have an extra q property. The properties defined by the “class” have nothing to do with the automatic options handling from View#initialize.

The documentation might be better if it said “creating a new instance of the View”.

Then, when you new VV({z: 123}), that {z: 123} is passed to the view’s initialize method in its single options parameter (pre-1.1.0 Backbones automatically set this.options to the constructor’s options) the q will be in this.q so your initialize should look more like this:

initialize: function(options) {
  console.log(options.z);
  console.log(this.q);
}

Also, if you did this:

var VVV = VV.extend({q: 'pancakes'});

you’d be replacing the default q that instances of VV get and this.q would be 'pancakes' inside initialize.

Demo: http://jsfiddle.net/ambiguous/eqBV2/

Using View#extend is like subclassing (or more accurately it creates a new prototypical instance) whereas new creates new objects (or copies of the prototypical instance). Of course, the class/instance language doesn’t fit the reality of JavaScript so we have to be careful not to take the terminology too seriously.