javascript inheritance using the prototype property

Question

I'm trying to do inheritance in javascript. First of all, looking on the web I found this

function A() {}
function B(){}
B.prototype = new A() ;
B.prototype.constructor = B ;

This works, however when I use the prototype property of B it doesn't work anymore ( http://jsfiddle.net/jeanluca/eQBUx/ )

function A() {}
A.prototype.bar = function(){ return 'A'; }

function B() {}
B.prototype.bar = function(){ return 'B'; }

I realize you could do

function B(){ this.bar = function(){ ... } } ;

But I think this is definitely slower than defining it using the prototype. So how could I do inheritance in the second situation ?

Thnx

Aadit M Shah · Accepted Answer · 2013-08-05 12:52:27Z

2

Here's your code:

function A() {}
A.prototype.bar = function(){ return 'A';}

function B() {}
B.prototype.bar = function(){ return 'B'; }
B.prototype = new A() ; // replaces B's "bar" with A's "bar

var b = new B ;
console.log(b.bar());

As you can see the problem is in your 6th line. You're first setting B.prototype.bar to a function in line 5 and then you immediately set B.prototype to new A in line 6 (effectively undoing what you did in line 5). The solution is to put line 6 before line 5:

function A() {}
A.prototype.bar = function(){ return 'A';}

function B() {}
B.prototype = new A() ; // now it will work
B.prototype.bar = function(){ return 'B'; }

var b = new B ;
console.log(b.bar());

See the demo for yourself: http://jsfiddle.net/eQBUx/1/

In addition I agree with Bergi: Stop using the new keyword.

Update: After reading your comment and understanding your problem in greater detail I would recommend you use my augment library for inheritance:

var A = Object.augment(function () {
    this.constructor = function () {};

    this.bar = function () {
        return "A";
    };
});

var B = A.augment(function (base) {
    this.constructor = function () {};

    this.bar = function () {
        return "B" + base.bar.call(this);
    };
});

var b = new B;

console.log(b.bar());

See the demo: http://jsfiddle.net/eQBUx/2/

edited Aug 5, 2013 at 12:52

answered Aug 5, 2013 at 11:58

Aadit M Shah

74.5k31 gold badges177 silver badges311 bronze badges

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

3 Comments

Jeanluca Scaljeri Over a year ago

Thnx, but I (and I didn't mentioned it, sorry) want to be able to call the overridden function, it will look like this: B.prototype.bar = function(){ return 'B' + this.$super(); }. Where $super probably does something Object.getPrototypeOf(this)

HMR Over a year ago

@JeanlucaScaljeri Aadit's answer will work fine, I have posted another answer on inheritance and overriding here stackoverflow.com/questions/16063394/… Look under Overriding functions That answer is more an into to prototype in JS with code to fiddle with.

Aadit M Shah Over a year ago

@HMR Cool. Personally I like my augment library more. It provides inheritance, encapsulation, private state, base prototype access, singletons, the module pattern and a bunch of additional functional features all in just 17 lines of code. I even wrote a blog post on it: Standardizing Harmony Classes

Halcyon · Accepted Answer · 2013-08-05 11:40:09Z

2

Using this to assign properties breaks the prototype chain. It's very inefficient and you can't use it to get inheritance. So .. don't?

answered Aug 5, 2013 at 11:40

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

3 Comments

Bergi Over a year ago

It doesn't alter the prototype chain, so how would it break it?

Halcyon Over a year ago

You just answered your own question.

HMR Over a year ago

I usually use this for instance specific property values and prototype for default values of immutable property values and functions. Using prototype.someArray can cause unexpected results when doing something like instance1.someArray.push("on all instances") But would work perfectly fine to define default values like Person.prototype.hands=2 Here is some detail when I'd use this or prototype stackoverflow.com/questions/16063394/…

Community · Accepted Answer · 2017-05-23 12:28:53Z

2

You're creating a property on a the prototype object which you completely replace afterwards. Do it the other way round, create the bar method on the new object. And don't use new!

function B() {}
// first create the prototype object
B.prototype = Object.create(A.prototype);
// then assign properties on it
B.prototype.bar = function(){ return 'B'; }

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Aug 5, 2013 at 11:43

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Collectives™ on Stack Overflow

javascript inheritance using the prototype property

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related