JavaScript inheritence and array

Question

I defined my classes like that:

function Employee () {
    this.name = "";
    this.val = new Array();
}

function WorkerBee () {
    this.beeQueen = "lola";

    this.setVal = function(val) {
        this.val.push(val);
    };
}
WorkerBee.prototype = new Employee;


function SalesPerson () {
    this.dept = "development";  
}
SalesPerson.prototype = new WorkerBee;

function Engineer () {
    this.dept = "R&D";
}
Engineer.prototype = new WorkerBee;

Problem: all the objects I create share the same val array:

var mark = new WorkerBee;
mark.name = "Mark";
mark.setVal('00000')

var louis = new SalesPerson;
louis.name = "Louis";
louis.setVal('11111')

var ricky = new SalesPerson;
ricky.name = "Ricky";
ricky.setVal('33333')

var john = new Engineer;
john.name = "John";
john.setVal('55555');

This:

html += "<br /><br />Name: " + mark.name;
html += "<br />Val: " + mark.val;

html += "<br /><br />Name: " + louis.name;
html += "<br />Val: " + louis.val;

html += "<br /><br />Name: " + ricky.name;
html += "<br />Val: " + ricky.val;

html += "<br /><br />Name: " + john.name;
html += "<br />Val: " + john.val;

displays:

Name: Mark
Val: 00000,11111,33333,55555

Name: Louis
Val: 00000,11111,33333,55555

Name: Ricky
Val: 00000,11111,33333,55555

Name: John
Val: 00000,11111,33333,55555

I read http://yehudakatz.com/2011/08/12/understanding-prototypes-in-javascript/ and http://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/ but I'm still confused!

When I use a string instead of an array this works well (because the reference to the string is overwritten I suppose) but how to do it with array ?

So I can have:

Name: Mark Val: 00000

Name: Louis Val: 11111

Name: Ricky Val: 33333

Name: John Val: 55555

Richard JP Le Guen · Accepted Answer · 2011-11-30 15:54:57Z

3

You need to apply the "parent" constructor in your "inheriting" constructor functions:

function WorkerBee () {
    Employee.apply(this);
    /*...*/
}
WorkerBee.prototype = new Employee();

Do the same for all your "inherited" constructor functions:

function SalesPerson () {
    WorkerBee.apply(this);
    /*...*/
}
SalesPerson.prototype = new WorkerBee();

function Engineer () {
    WorkerBee.apply(this);
    /*...*/
}
Engineer.prototype = new WorkerBee();

See the example on jsfiddle.

And like @austincheney pointed out, JavaScript has no "classes" - only functions (which are objects), constructors (which are functions) and objects.

JavaScript uses prototypal inheritance. This means that when you try to access a property (or function) of an object which doesn't exist, it will delegate to the prototype object.

Consider:

var isaacNewton = {
    name: 'Isaac Newton'
};

function Scientist() {}
Scientist.prototype = isaacNewton;

var neilDeGrasseTyson = new Scientist();

console.log(neilDeGrasseTyson.name);

isaacNewton.name = 'Sir Isaac Newton';

console.log(neilDeGrasseTyson.name);

The output here is:

Isaac Newton
Sir Isaac Newton

Object neilDeGrasseTyson hasn't inherited the name property. It simply doesn't have one. Since it doesn't have a property name when we try to access name the neilDeGrasseTyson object will delegate to the prototype object Scientist.prototype, and return the value of Scientist.prototype.name which is isaacNewton.name.

In your code, objects mark, louis, ricky and john don't have a property val. All those calls to setVal end up manipulating WorkerBee.prototype.val since none of those objects have their own val property. By applying the Employee constructor to them, you introduce the properties of an Employee to them, so they don't have to delegate.

To drive the point home a little more, another solution would have been to put the method setVal in Employee and give each "inheriting" constructor a this.val property: http://jsfiddle.net/FDCXF/1/

edited Nov 30, 2011 at 15:54

answered Nov 25, 2011 at 14:40

Richard JP Le Guen

28.8k8 gold badges93 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

RightSaidFred Over a year ago

+1 Only other thing I'd probably do would be to put the setVal function on Employee.prototype since it seems that everything inheriting from Employee will have its own val Array. Might as well share the function.

halukul Over a year ago

Ok this works! Thank you for the answer :) But what happens when I don't call .apply internally ? Why is it using a shared variable and why is this the default behavior ? It seems to me like a strange choice for a language to do this!

RightSaidFred Over a year ago

@hakulul: Prototypal inheritance is simply an internal chain of object references. When the val property is requested from an object created from Engineer, it first checks to see if it has that property. If not, it looks at its prototype, which is a WorkerBee object. If the WorkerBee object doesn't have it, it looks to its prototype, which is an Employee object. Because the Employee object has that property, that's the value that will be used. As a result, all objects inheriting from that original new Employee will all share the same Array.

halukul Over a year ago

Ding! I get it know. When they don't have their own field, JavaScript searches in the prototype chains (so it's shared) but as soon as they have their own field (through .apply) then each have a different one. Seems pretty simple now that I understand it :) Thank you for your time Richard JP Le Guen! It helped a lot. Thank you too RightSaidFred!

austincheney · Accepted Answer · 2011-11-25 14:39:38Z

-2

1) JavaScript does not have classes.

2) JavaScript only has function scope and not block scope.

3) A variable is only provided scope with the "var" keyword.

Re-engineer your code knowing this and see if you still encounter this problem.

answered Nov 25, 2011 at 14:39

austincheney

1,1157 silver badges8 bronze badges

3 Comments

nonchip Over a year ago

1) sorry, but thats just wrong. 2) depends on implementation, ECMAscript specs require block scope, but MSIE ignores this, so many developers avoid using code that relies on block scope.

austincheney Over a year ago

@nonchip You might be thinking of a different language. JavaScript does not have classes at all. There is some talk of adding classes so that Java developers feel less stupid coming across the wire to JavaScript. It does not have block scope either, but it will soon. Block scope will be allowed with the "let" keyword. Let is already available in the JavaScript 1.7 release which is not tied to any standard. The standard defining "let" is EcmaScript 6, which is still in development. As far as I know only Mozilla products fully support "let" at this time.

nonchip Over a year ago

@austincheney well, I only use firefox, maybe that's why I'm used to "let". oh, and you're right, there are no "class"es, but you can use functions (using "this" or "prototype") or objects (using functions as object members) somewhat object-oriented, that's what i refer to as classes in javascript...

Collectives™ on Stack Overflow

JavaScript inheritence and array

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related