0

I'm working on a legacy project, I'm confused with what this does

define(['jquery', 'components/BaseComponent', 'bootstrap'], function(
    $, BaseComponent, bootstrap
) {
    'use strict';

    return BaseComponent.extend({

        initialize: function(options) {

            BaseComponent.prototype.initialize.call(this, options); // what is this man?
            this.widgetOptions = $.extend({}, options); // what is this man?

            return this; // what is this man?
        },

        render: function() {

            BaseComponent.prototype.render.call(this); //again?


            return this; //again?
        }
    });
});

I have experience developing marionette app but above code still confused me. No documentation and the one who did this has left.

Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
Jess Jordan
  • 21
  • 6

1 Answers1

2

Inheritance and calling parent functions

First, some informations:

BaseComponent.prototype.initialize.call(this, options);  // what is this man?

  • BaseComponent is a constructor function (understanding javascript constructors), which has the Backbone's extend helper function. This helper function wraps some of the complexity of prototypal inheritance.

  • BaseComponent.prototype is the prototype of the parent class containing functions and properties.

  • BaseComponent.prototype.initialize is a function of the parent class (BaseComponent), which we are overriding by defining a new initialize for this module.

Functions of a "class" are contained inside the prototype property. By using the .call function on a function from the parent's prototype, we can call the function in the context of the current object.

Making copy of objects

this.widgetOptions = $.extend({}, options); // what is this man?

This is making a new object, in which properties of options are copied over. This is using jQuery's extend and it makes a shallow copy.

This is a good pattern because:

  1. it ensures that this.widgetOptions is an object,
  2. it's a copy so you can safely modify the properties without affecting the received options object (which could be reused by the calling code).

Chaining function calls

return this; // what is this man?

This serves to chain function calls, like this:

myView.render().lookImChaining().functionCalls();

Inside the render function, it is a Backbone standard. But in the initialize, it makes no sense since you never actually call the initialize manually.

From the Backbone's doc:

A good convention is to return this at the end of render to enable chained calls.

The default view render:

render: function() {
    return this;
},
Community
  • 1
  • 1
Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
  • overriding means what? we can use the method available in `BaseComponent`? how does `prototype` come into play here? why not just `BaseComponent.initialize.call()` ? – Jess Jordan Nov 10 '16 at 06:01
  • overiding means that your BaseComponent has method named initialize and your posted code too have method with same name, and since you are inheriting from BaseComponent your code overrides the initialize method of BaseComponent. Try removing that prototype word from BaseComponent.prototype.initialize.call(this, options) you will get max callstack size reache error since initialize will keep calling itself. – nikhil mehta Nov 10 '16 at 09:53
  • @JessJordan I added lots of link to additional information. – Emile Bergeron Nov 10 '16 at 15:01