Why the use of new keyword inside tabs.js

Question

hey guys i was just going through the code of tabs.js and i came across the following lines of code :

  if (!data) $this.data('bs.tab', (data = new Tab(this)))
  if (typeof option == 'string') data[option]()

now i have a question abot the above 2 lines of code , Why is the new keyword being used ? why could't the Tab() function be called directly , like so :

Tab[option]() instead of data[option]() ?

this coding convention of adding the new keyword is common to all bootstrap plugins , i just want to know why , i am not asking what the new keywords does , i am just asking , why is it being used in this scenario ? I have read this thread here on the new keyword.

but my question really is :

Why is the new keyword being used ? why could't the Tab() function be called directly ?

T.J. Crowder · Accepted Answer · 2015-05-04T06:59:43.320

Why is the new keyword being used ? why could't the Tab() function be called directly ?

It could be, if Tab were written that way. Apparently it isn't, it's written as a standard constructor function, and so you use it with new.

It would be possible to write it instead as a builder/factory function. The choice of whether to use constructors or builders is largely amatter of style (though Douglas Crockford would tell you there are good reasons for using builders/factories — he has a strong opinion on this, but that's what it is, opinion :-) ).

Just for completeness, a constructor function is written along these lines:

function Tab(arg) {
    this.prop = "something";
    this.thingy = arg; // Or something less direct
    // ...
}
Tab.prototype.method = function() {
    // ...
};

As you see, it expects to be called via new, and puts properties on this, which is a reference to the new object that new creates.

Whereas a builder/factory is written like this:

function createTab(arg) {
    return {
        prop: "something",
        thingy: arg // Or something less direct
        method: function() {
            // ...
        }
        // ...
    };
}

or perhaps like this:

var tabPrototype = {
    method: function() {
        // ...
    }
};
function createTab(arg) {
    var obj = Object.create(tabPrototype);
    obj.prop = "something";
    obj.thingy = arg; // Or something less direct
    return obj;
}

@TJCrowder , i'll go through ur answer , but just wanted to say , Ur my Role model :D — Tenali_raman, May 04 '15 at 06:57
@TJCrowder Thank you Soooo much , very well explained and yes i am aware of douglas crockford disliking the new keyword . lastly , can u edit your answer to mention if by factory , you mean the factory design pattern ?? Thanks alot ! — Tenali_raman, May 04 '15 at 07:07
@Tenali_raman: No, just a boring old factory function: A function that creates instances. The Factory pattern has more to it than that; the factory function is defined as an interface that subclasses implement so that the base class factory can create instances without knowing what specific subclass type it's creating. It's a superset of simple factory functions. — T.J. Crowder, May 04 '15 at 07:22
@TJCrowder , thank you , that was really kind of you to explain . Thanks alot . — Tenali_raman, May 04 '15 at 07:24

Why the use of new keyword inside tabs.js

1 Answers1