Constructor inheritance; what am I not getting here?

Question

I'm trying to understand inheritance in Javascript, but this code (tested in Firebug) doesn't work the way I'm expecting. What am I not understanding about it?

var A = function(v){
  this.v = v || 'foo';
}

A.prototype.shout = function(){ alert(this.v); }

var B = function(){};

B.prototype = new A;

var test = new B('bar')
test.shout() // returns 'foo'

What I'm expecting is that when I assign test the property this.v is set to "bar". As far as I understand JS prototypical inheritance setting B's prototype to A's means everything in B is overwritten. I would expect then that it's constructor is overwritten, and that calling new B('bar') would execute A's constructor with the parameter "bar".

If my understanding is incorrect, could someone please correct me. It would also be good to find the solution to what I'm looking to do:

// constructors from above
B.prototype.yell = function(){ alert('hello world'); }
var test1 = new B('bar'), test2 = new B('spam'), test3 = new B('eggs');

...so that the JS objects I'm creating follow a similar inheritance pattern to standard OOP and therefore B would inherit A's constructor and methods.

Edit:

After reading the comments, I believe a better question would be to ask how would one overwrite B's constructor with A's?

Answer 1

Following is a constructor. It runs when you call new A.

var A = function(v){
  this.v = v || 'foo';
}

In B constructor is function(){}; So you are not setting this.v

To achieve result you are trying you should follow this pattern:

var A = function(v){
  this.v = v || 'foo';
}

A.prototype.shout = function(){ alert(this.v); }

var B = function(v){
    B.prototype.constructor.call(this,v); // here you call A constructor 
};

B.prototype = new A;


var test = new B('bar')
test.shout() // returns 'bar

Answer 2

When you set

var B = function(){};

you create a parameterless constructor B. Then when you do

B.prototype = new A;

you are calling the A constructor with no parameters (causing this.v = 'foo'), and then causing B's prototype to point to the v and shout from A. However, B as a constructor hasn't changed. This can be seen by adding some parameters to the definition of 'B', for example:

var B = function(x){this.v += x};

should produce 'foobar'.

Addendum: The closest way I can think of to "copy" the constructor is actually to create both constructors with some third-party function and assign to both A & B. Example:

var objmaker = function(defaultval) {
    return function(v) { this.v = v || defaultval; };
}

var A = objmaker('foo');
A.prototype.shout = function(){ alert(this.v); }

var B = objmaker('bar');
B.prototype = A.prototype; // B can now shout()

var testA1 = new A('A');
testA1.shout(); // returns 'A'
var testA2 = new A();
testA2.shout(); // returns default 'foo'

var testB1 = new B('B');
testB1.shout(); // returns 'B'
var testB2 = new B();
testB2.shout(); // returns default 'bar'

It's not really copying, as you can see by the different default values, but it is one way to ensure the two definitions stay in sync.

Answer 3

Try

var test2 = new A('baz');
test2.shout(); //returns baz

I think when you make 'var B' a new function, rather than making it a' new A', you wipe out the 'constructor' you made 'A' as. I'm not sure how the original is still getting invoked to set test's instance of v to 'foo'.

Answer 4

How about instead of trying to make javascript work like some other language, you could maybe learn something new from it, and use so it works like javascript?

have a look at this: http://javascript.crockford.com/prototypal.html

Answer 5

Instead of setting the prototype to a new instance of A, make B's prototype delegate up to A's prototype. Crockford calls this beget, it's implemented as dojo.delegate in Dojo. It's a simple function that looks like this:

function delegate(o){
  F = function(){}
  F.prototype = o;
  return new F;
}

And you can use it to create this link between prototypes:

var B = function(){}
B.prototype = delegate(A.prototype);

By doing this, the A constructor never gets called, and the v value is never set. This limits inheritance to only the prototype, and not the prototype plus constructor.