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?

• dumbass: 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.

Answer 1

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.

• Will: To the OP -- this is available on modern browsers (EcmaScript 5 standard), but not e.g. IE 8.
• user2820280: @Will Hm okay, thats not a big problem. But it would be nice, if there is a solution for IE8.
• Aadit M Shah: @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 () {}));

Answer 2

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/

Answer 3

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');