Javascript inheritance with prototype

Question

I googled 1 hour but couldn't find a good answer. So here is my question: How can I inherit a class with its prototypes?

I have currently this solution: http://jsfiddle.net/RdxYN/2/

function BaseContent(a, b) {
    this.propertyA = 'propertyA';
    this.a = a;
    this.b = b;
    alert('x');
}

BaseContent.prototype.funcA = function () {
    alert(this.a + ', ' + this.b);
    alert(this.propertyA);
};

function ContentA(a, b) {
    BaseContent.call(this, a, b);
    this.funcA();
}

ContentA.prototype = new BaseContent;
ContentA.prototype.constructor = ContentA;
ContentA.prototype.parent = BaseContent.prototype;

var Content = new ContentA('c', 'd');

The only problem is, is that BaseContent is executed twice. I don't want that. Is there a better solution or a fix?

This question is similar to: How should the `.prototype` property be set up in a derived old-style constructor?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — dumbass
– dumbass, Commented Jun 25 at 5:16

Aadit M Shah · Accepted Answer · 2013-09-26 16:20:51Z

4

The new way to achieve inheritance in JavaScript is to use Object.create as follows:

function BaseContent(a, b) {
    this.propertyA = 'propertyA';
    this.a = a;
    this.b = b;
    alert('x');
}

BaseContent.prototype.funcA = function () {
    alert(this.a + ', ' + this.b);
    alert(this.propertyA);
};

function ContentA(a, b) {
    BaseContent.call(this, a, b);
    this.funcA();
}

ContentA.prototype = Object.create(BaseContent.prototype);
ContentA.prototype.constructor = ContentA;
ContentA.prototype.parent = BaseContent.prototype;

var Content = new ContentA('c', 'd');

See the demo: http://jsfiddle.net/RdxYN/7/

You should probably read my blog post on Why Prototypal Inheritance Matters to gain a deeper understanding of inheritance in JavaScript.

answered Sep 26, 2013 at 16:20

Aadit M Shah

74.5k31 gold badges177 silver badges311 bronze badges

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

3 Comments

Will Over a year ago

To the OP -- this is available on modern browsers (EcmaScript 5 standard), but not e.g. IE 8.

user2820280 Over a year ago

@Will Hm okay, thats not a big problem. But it would be nice, if there is a solution for IE8.

Aadit M Shah Over a year ago

@user2820280 Just add the following code to the beginning of your program and it'll work in every browser:

if (!Object.create) Object.create = (function (Factory) { return function (prototype) { Factory.prototype = prototype; return new Factory; }; }(function () {}));

Eternat · Accepted Answer · 2013-09-26 16:26:52Z

1

My suggestion would be to set it up more like this

function BaseContent(a, b) {
    this.propertyA = 'propertyA';
    this.a = a;
    this.b = b;
    alert('x');
}

BaseContent.prototype = {
    funcA: function () {
        alert(this.a + ', ' + this.b);
        alert(this.propertyA);
    }
};

function ContentA(a, b) {
    BaseContent.call(this, a, b);
    this.funcA();
}

ContentA.prototype = BaseContent.prototype;
ContentA.prototype.constructor = ContentA;

var Content = new ContentA('c', 'd');

Here is the example is JSFiddle http://jsfiddle.net/LD8PX/

answered Sep 26, 2013 at 16:26

Eternat

434 bronze badges

Comments

6220119 · Accepted Answer · 2013-09-26 16:38:47Z

1

For IE 7/8 compatible, you can refer to the Simple javascript inheritance

See the jsfiddle: http://jsfiddle.net/rHUFD/

var BaseContent = Class.extend({
    init: function (a, b) {
        this.a = a;
        this.b = b;
        this.propertyA = 'propertyA';
        alert('x');
    },
    funcA: function () {
        alert(this.a + ', ' + this.b);
        alert(this.propertyA);
    }
}); 

var ContentA = BaseContent.extend({
    init: function (a, b) {
        this._super(a, b);
        this.funcA();
    }
}); 

var Content = new ContentA('c', 'd');

answered Sep 26, 2013 at 16:38

6220119

80910 silver badges21 bronze badges

Collectives™ on Stack Overflow

Javascript inheritance with prototype

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related