Question

I am new to oop in Javascript and just need to get to grips with this.

If I have a class with properties

function myClass(){
this.foo=null;
}

I then use inheritance to create a child class

myChild.prototype = new myClass(); 

function myChild(){
alert(this.foo);
}

How do I set the property of foo when instantiating the child class e.g I want to alert ‘bar’. I don’t want to simply pass ‘bar’ to myChild as I have a list of properties to set that are relevant to a method in myClass and not myChild.

var newChild = new myChild();

Answer 1

You can actually find the answer to this question also in my answer to previous question and it is similar to inheritance in other languages.

If you extend a class, the constructor function of the child class has to accept its own arguments and the one for the parent class. So assuming you have:

function Parent(a) {
    this.foo = a;
};

// and 

function Child(b, a) {
    Parent.call(this, a); // executes the parent constructor for this instance
    this.bar = b;
    alert(this.foo);
};

inherits(Parent, Child);

(the implementation of inherits can be found in this answer).

Inside Child you have to call the construtor of the parent class and pass the parameters, similar how you do it in Java or Python.

If you have many parameters, then you can make use of the arguments object, to make things a bit easier:

function Parent(a, b, c, d) {...};

function Child(e, f) {
   // c and d are parameters for `Child`
   // arguments[0] == e
   // arguments[1] == f
   // all other arguments are passed to Parent, the following
   // creates a sub array arguments[2..n]
   Parent.apply(this, [].slice.call(arguments, 2); 
   /...
}

// later

var child = new Child(e, f, a, b, c, d);

---

In general, myChild.prototype = new myClass(); is not a good inheritance pattern as most of the time, classes expect some arguments. This won’t execute the parent constructor for each instance but only once for all instances.