Javascript prototype inheritance issue

Question

I'm having an issue with prototype inheritance and I can't find out why it's not working properly.

The snippet is this:

function Field(newKey, val) {
    this.key = newKey || "";
    this.value = val || "";
}

Field.prototype.isEmpty = function() {
    return this.value === undefined || this.value === null || this.value === "";
};

function DoubleField(newKey, val) {
    this.base = Field;
    this.base(newKey, val);
}
DoubleField.prototype = new Field();
DoubleField.prototype.constructor = DoubleField;

function IntegerField(newKey, val) {
    this.base = DoubleField;
    this.base(newKey, val);
}
IntegerField.prototype = new DoubleField();
IntegerField.prototype.constructor = IntegerField;

var f = new Field('keyfield', 'valField');
var d = new DoubleField('keydouble', 'valDouble');
var i = new IntegerField('keyinteger');

var res = f.isEmtpy();

The call to f.isEmpty is failing? Why? Calls to d.isEmpty or i.isEmpty work just fine as expected.

I cannot realize what I'm doing wrong. Any help would be much appreciated!

"Failing" how? (Note that it's misspelled, you have var res = f.isEmtpy(); but it should be var res = f.isEmpty();) — T.J. Crowder
– T.J. Crowder, Commented May 11, 2012 at 21:39
@dougajmcdonald: That's what lint tools are for, no question. — T.J. Crowder
– T.J. Crowder, Commented May 11, 2012 at 21:44

Danilo Valente · Accepted Answer · 2012-05-11 21:40:11Z

4

The error is in the last line of code:

var res = f.isEmtpy();//That's what you wrote

The correct is:

var res = f.isEmpty();

answered May 11, 2012 at 21:40

Danilo Valente

11.4k8 gold badges55 silver badges71 bronze badges

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

2 Comments

Stephen Over a year ago

@Calapacho you should use firebug or Chrome inspector to help find your errors. Without proper debugging tools, coding really sucks.

Calapacho Over a year ago

Damn! I've been looking at the code for an hour not noticing that! I did use firebug but the problem was I wasn't realizing about the typo anyway. Thanks BTW, using JSLint did helped a lot too!

T.J. Crowder · Accepted Answer · 2012-05-11 21:43:44Z

1

You haven't said how it's failing. As I noted in a comment, at the very least there's a typo: var res = f.isEmtpy(); should be var res = f.isEmpty();

But beyond that (which I assume is just a typo in the question, not the code), note that this line in your derived constructors:

this.base = DoubleField;

...will not work as you intend. Consider the case of IntegerField. You call new IntegerField and it sets this.base to DoubleField and calls it. But the DoubleField constructor then sets this.base to Field. So you have an IntegerField instance with a base property pointing to Field, not DoubleField.

You can't use instance properties to trace lineage. It works for a parent/child situation, but you run into the "grandchild" problem described above.

I recommend using one of the inheritance helper scripts out there. There are several, including my own Lineage. These scripts help you build inheritance hierarchies, handling the plumbing for you so you can focus on building whatever it is you're trying to build. We only need them temporarily; JavaScript is getting syntactic sugar to help with this in the next version (but of course, it'll be years before we see widespread support of it, once it's actually finalized).

answered May 11, 2012 at 21:43

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

2 Comments

Calapacho Over a year ago

@t-j-crowder: thanks for the answer, however I want to know what I'm doing instead of using a library that would solve my issues. Besides, I cannot use libraries actually in my code. Policy problems... BTW, I've been watching a video from Crockford about this and he explains how to solve it with closures. Maybe that would help in my case to solve the grandchild issue. youtube.com/watch?v=hQVTIJBZook

T.J. Crowder Over a year ago

@Calapacho: Just reading the Lineage source should help you understand this stuff (although my passion for giving functions names may make it a bit trickier to read than necessary; when you get to it, follow the non-named ctor branch of the code). Absolutely pay attention to Crockford, but make your own determinations. He's a smart, informed person, but he has a tendency to state his opinion as fact (his JavaScript: The Good Parts does that a fair bit). For straight hierarchies such as yours, you don't need closures. (You may want them, for private data etc., but you don't need them.)

Collectives™ on Stack Overflow

Javascript prototype inheritance issue

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related