JavaScript Polymorphism variable inheritance

Question

I'm practicing polymorphism in JavaScript (first time trying) based on different examples I've found online. I know that in other languages I can access the variables of the super class from the extended one and am wondering how to do this correctly in JavaScript. The code below doesn't throw any error (at least as far as Firefox's Error Console is concerned), but statement is undefined in ExtendedClass.

function MyClass() {
  this.statement = "I'm a class with a method";
  this.speak = function() {
    alert(this.statement);
  }
}
var mInstance = new MyClass();
mInstance.speak();

function ExtendedClass() {
  Object.create(MyClass);
  this.speak = function() {
    alert(this.statement+" and I extend a class");
  }
}
var eInstance = new ExtendedClass();
eInstance.speak();

Can I access statement from ExtendedClass? Is this a good method of implementing polymorphism?

Ben McCormick · Accepted Answer · 2013-01-14 03:24:15Z

2

You can use MyClass.call(this) to set the local variables, and then use Object.create to set the prototype, like this

function MyClass() {
  this.statement = "I'm a class with a method";
  this.speak = function() {
    alert(this.statement);
  }
}
var mInstance = new MyClass();
mInstance.speak();

function ExtendedClass() {
  MyClass.call(this);
  this.speak = function() {
    alert(this.statement+" and I extend a class");
  }
}
ExtendedClass.prototype = Object.create(MyClass.prototype);
var eInstance = new ExtendedClass();
eInstance.speak();

You can see more at the MDN Docs

answered Jan 14, 2013 at 3:24

Ben McCormick

25.8k12 gold badges56 silver badges71 bronze badges

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

5 Comments

asimes Over a year ago

This looks just like RyanFishman's answer but has ExtendedClass.prototype = Object.create(MyClass.prototype); in it as well, what does that do? I'm not used to using prototype or Object.create()

Ben McCormick Over a year ago

yep, we posted simultaneously. This post may help give a long explanation: benmccormick.org/blog/2013/01/12/…, but the short explanation is that Javascript inheritance works differently than classical inheritance. Objects have a "prototype chain" that they can share with other objects. All Objects share the Object.prototype prototype by default, and they can also share other object's prototypes, as shown above. The MDN article I linked also explains this.

asimes Over a year ago

Ah, my apologies, I should have worded that differently, I didn't mean to suggest you wrote your answer after seeing his. Thank you

asimes Over a year ago

Just double checking, the extra line is for correcting ExtendedClass's constructor pointer?

Ben McCormick Over a year ago

Not exactly. the function ExtendedClass() is the constructor for the ExtendedClass type. ExtendedCLass.prototype is a reference to the ExtendedClass type's prototype chain, which is how inheritance is controlled in javascript. It doesn't have an exact equivalent in languages like javascript or C++ because those languages use classical inheritance rather than prototypical inheritance.

RyanFishman · Accepted Answer · 2013-01-14 03:23:09Z

1

I do it like this

function MyClass() {
  this.statement = "I'm a class with a method";
  this.speak = function() {
    alert(this.statement);
  }
}
var mInstance = new MyClass();
mInstance.speak();

function ExtendedClass() {
  MyClass.call(this);
  this.speak = function() {
    alert(this.statement+" and I extend a class");
  }
}
var eInstance = new ExtendedClass();
eInstance.speak();

Not sure if this is the best syntax but I know this works and you properly inherit MyClass with all it's public methods and variables.

answered Jan 14, 2013 at 3:23

RyanFishman

6955 silver badges13 bronze badges

Comments

maiorano84 · Accepted Answer · 2013-01-14 19:04:02Z

1

Prototypes are what you're looking for.

var MyClass = function(){}; //Empty Constructor
MyClass.prototype = {
    statement: "I'm a class with a method",
    speak: function(){
        alert(this.statement);
    }
};
var ExtendedClass = function(){}; //Empty Constructor
ExtendedClass.prototype = new MyClass();
ExtendedClass.prototype.speak = function(){
    alert(this.statement+" and I extend a class");
};
var eInstance = new ExtendedClass();
eInstance.speak();

edited Jan 14, 2013 at 19:04

answered Jan 14, 2013 at 3:23

maiorano84

12.1k3 gold badges38 silver badges52 bronze badges

6 Comments

asimes Over a year ago

Is this a different way to create ExtendedClass? The syntax doesn't look like a class declaration from the languages I know

maiorano84 Over a year ago

Yeah, Javascript's OOP and inheritance styles are non-traditional (to put it kindly). This is about as condensed as I can get it without using the call method. Not sure why, I just never liked using methods to actually inherit properties and methods from other objects. It all boils down to what your personal preference is, and how readable it is to you.

asimes Over a year ago

I just tried copy / pasting this to try it since it looks so different from the other ones but it throws an error: MyClass is not defined

maiorano84 Over a year ago

My apologies. I forgot to define the actual Objects in the original code. Updated with a tested working example.

asimes Over a year ago

Thanks for fixing it. I think I'm going to stick with the ones that look like Java for the time being, but it is good to see more examples

|

Collectives™ on Stack Overflow

JavaScript Polymorphism variable inheritance

3 Answers 3

5 Comments

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related