Best way to create a new constructor that relies on an old one using prototypes

Question

So, suppose I have the following constructor function, whose prototype I have modified like so:

function foo(options) {
  this.propA_ = 'whatever';
  this.propB_ = 'something';
  this.propC_ = options.stuff;
  this.randomMethod = function omg() {
    /*code etc etc etc*/
  }
}

foo.prototype.p1 = 1;
foo.prototype.p2 = 2;

After I have made foo, I want to create a new constructor, bar(), that is like a sort super foo: it has all of the properties, prototpye info, and methods of foo, but it ALSO has some extra properties and methods sprinkled on top. Would the following code be the most elegant way to do this?

function foo(options) {
  this.propA_ = 'whatever';
  this.propB_ = 'something';
  this.propC_ = options.stuff;
  this.randomMethod = function omg() {
    /*code etc etc etc*/
  }
}

foo.prototype.p1 = 1;
foo.prototype.p2 = 2;

function bar(options) {
  this = foo(options);
  this.propD_ = 'yet another thing';
  this.propE_ = options.moreStuff;
}

bar.prototype.p3 = 3;
foo.prototype.testing = 'A test';

smallObj = foo()'
bigObj = bar();

After running that code, here is what I would expect to get

console.log(a.p3); //3

bigObj.p2 = 100;
console.log(bigObj.p2); //100
console.log(foo.prototype.p2); //2

console.log(bigObj.randomMethod()); //Will work
console.log(smallObj.p3); //undefined
console.log(smallObj.propA_); //'whatever'
console.log(bigObj.propA_); //'whatever'

foo.prototype.propA_ = 'something totally different'
console.log(bigObj.propA_); //'something totally different'

Is this a correct way of "extending" the functionality of some existing constructor, to make a sort of "Foo Plus". Basically, I'd like for foo to continue to work exactly as it did before bar() came into existence, but for bar to be a set of properties and methods that are added on top of foo. Am I doing this right?

Is it correct? No. Run it. This will fail. `this = foo(options);` Seems like you're just guessing at it. There's lots of information about inheritance online for you to study. — , Jun 12 '13 at 23:44
Yes, I know that my understanding is poor. I have studied several threads on here and I am still not very clear on what is going on. I'm trying to rationalize my own example. And yes, I know it fails, my question is why. — AlexZ, Jun 12 '13 at 23:48
Ok, so I made some changes to your fiddle: http://jsfiddle.net/8QCE2/ I can sort wrap my head around why `this = new foo(opts);` is wrong: this refers to the object constructed by bar(), and obviously I can't just redefine that object all willy-nilly; I can set its properties and I can add methods and what not, but I can't just redefine it. What I would like to do is get the "this" in bar() to inherit the prototype of foo.... — AlexZ, Jun 13 '13 at 00:15
Okay, so I almost have it. Link to the latest fiddle: http://jsfiddle.net/kZTe2/ So basically the prototype is copying over just fine, so I think I have that right. Further, changes the prototype of foo is reflected in the prototype of bar, which is also great. My problem is that properties constructed within foo() itself are not being transferred to bar(). Line 45 in my fiddle is not producing the results it should. Why is this? How do I get properties set inside the constructor to transfer over to a new object that is inheriting it? — AlexZ, Jun 13 '13 at 00:15
It's better to declare your method properties with prototype as they don't change per instance but value properties that do you can declate with `this.something="my instance value"`. A simple explanation with sample code about prototype and `this` behavior is here: http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 You can press F12 in chrome, run the code in the console and play with it to better understand it. — HMR, Jun 13 '13 at 00:24
Thanks for the input. I do know that declaring props in prototype is they are expected to be constant across all instances of an object is much better than using `this`. However, I am trying to extend a fairly large existing JS class ([infobubble.js for GMaps](https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobubble/src/infobubble.js?r=198)), and I'd like to keep the original infoBubble constructor as is. I just want to make an infoBubblePlus class that has some extra features, without destroying the original infoBubble... — AlexZ, Jun 13 '13 at 00:31
@AlexZ If you're extending google maps api you could use closure compiler and the closure library. Then use goog.base and goog.inherit to extend infoBubble. Plus side is that you can compile your code after, down side is that your code has to fit the compiler and it'll take time to get familiar with the compiler/closure library. — HMR, Jun 13 '13 at 02:16

score 1 · Answer 1 · answered Jun 13 '13 at 01:50

Ok, I finally worked through the discussion I have in the comment thread in response to the quesion, and this is the answer I came up with. I'll repost the code here - thank you to everyone who helped me work through this!

function foo(options) {
    this.propA_ = 'whatever';
    this.propB_ = 'something';
    this.propC_ = options.stuff;
    this.randomMethod = function omg() {
        /*code etc etc etc*/
    };
}
foo.prototype.p1 = 1;
foo.prototype.p2 = 2;

function bar(options) {
    //this = new foo(options);
    var parent = new foo(options);
    this.prototype = parent.prototype;

    for (var x in parent) {
        if (parent.hasOwnProperty(x)) {
            console.log('iterating past'+x);
            this[x] = parent[x];
        }
    }

    this.propD_ = 'yet another thing';
    this.propE_ = options.moreStuff;
}
// Make `bar` inherit from an instance of `foo`
bar.prototype = Object.create(foo.prototype);

// Add properties to the bar prototype
bar.prototype.p3 = 3;

// Not sure what you were doing here
//foo.prototype.testing = 'A test';

var myOpts = {
    stuff: 'a cat',
    moreStuff: 'many dogs'
};

var smallObj = new foo(myOpts);
var bigObj = new bar(myOpts);


console.log(smallObj.p2); //2

console.log(bigObj.p2); //2
bigObj.p2 = 100;
console.log(bigObj.p2); //100
console.log(foo.prototype.p2); //2

//console.log(bigObj.randomMethod()); //Will work
console.log(smallObj.p3); //undefined
console.log(smallObj.propA_); //'whatever'
console.log(bigObj.propA_); //'whatever'

foo.prototype.propA_ = 'something totally different';
console.log(bigObj.propA_); //'whatever'

score 0 · Accepted Answer · answered Jun 13 '13 at 07:48

Not sure why you have so much code to have prototype inheritance. You can use something like goog.inherit (and goog.base if you plan to use closure compiler to compile) from the closure library.

Here is some sample code that uses goog.inherit:

var goog = {};
/**
 * Inherit the prototype methods from one constructor into another.
 * @param {Function} childCtor Child class.
 * @param {Function} parentCtor Parent class.
 */
goog.inherits = function (childCtor, parentCtor) {
    /** @constructor */
    function tempCtor() { };
    tempCtor.prototype = parentCtor.prototype;
    childCtor.superClass_ = parentCtor.prototype;
    childCtor.prototype = new tempCtor();
    childCtor.prototype.constructor = childCtor;
};
/** @constructor */
var GrandParent = function (arg1) {
    window['console'].log("grandparent constructor called with arg1:", arg1);
}
GrandParent.prototype.doSomething = function () {
    return "From GrandParent";
}
/** @constructor */
var Parent = function (arg1, arg2) {
    GrandParent.call(this, arg1);
    window['console'].log("parent constructor called with arg1:", arg1);
    window['console'].log("parent constructor called with arg2:", arg2);
}
goog.inherits(Parent, GrandParent);
/** @override */
Parent.prototype.doSomething = function () {
    return Parent.superClass_.doSomething() + " From Parent";
}
/** @constructor 
* @extends Parent */
var Child = function (arg1, arg2, arg3) {
    Parent.call(this, arg1, arg2);
    window['console'].log("child constructor called with arg1:", arg1);
    window['console'].log("child constructor called with arg2:", arg2);
    window['console'].log("child constructor called with arg3:", arg3);
}
goog.inherits(Child, Parent);
/** @override */
Child.prototype.doSomething = function () {
    return Child.superClass_.doSomething() + " From Child";
}

var c = new Child("arg1", "arg2", "arg3");
console.log(c.doSomething());

Best way to create a new constructor that relies on an old one using prototypes

2 Answers2

Linked