why do we need to call the parent constructor in JavaScript Inheritance

Question

I am experimenting with JavaScript Inheritance. Basically, I am following this tutorial.

I see that, with the code there, the Person class is instantiated twice. Please have a look at this fiddle.

What I did is comment out:

Person.call(this)

And the inheritance is working just fine.

In the original code, the line

Person.call(this)

is used. Is there a need of calling parent constructor with child scope?

Could you please also give some explanation, I am new to OO JavaScript.

Thanks a lot.

EDIT:

My code in the fiddle is as follows:

function Person(gender) {
    this.gender = gender;
    document.write('Person instantiated</br>');
}

Person.prototype.walk = function(){
    document.write("is walking</br>");
};

Person.prototype.sayHello = function(){
    document.write("Hello</br>");
};

Person.prototype.sayGender = function(){
    document.write(this.gender + "</br>");
};



function Student() {
    //Person.call(this);
    document.write('Student instantiated</br>');        
}
Student.prototype = new Person();

Student.prototype.constructor = Student;

Student.prototype.sayHello = function(){
    document.write("Student says Hello</br>");
}
Student.prototype.sayGoodBye = function(){
    document.write("Student says goodbye</br>");
}


var student1 = new Student();
student1.sayHello();
student1.walk();
student1.sayGoodBye();

document.write(student1 instanceof Person);
document.write("</br>");
document.write(student1 instanceof Student);

@T.J.Crowder: Sorry if the tone of my question had went wrong. I never meant to be rude. — hrishikeshp19
– hrishikeshp19, Commented Feb 23, 2012 at 9:00

Bergi · Accepted Answer · 2012-04-02 23:05:12Z

4

Yes, you will need it. In your example, all Students have the same gender and there will be only one Person instantiated, regardless of the number of instantiated Students.

Better would be:

function Student() {
    // gives this Student properties of one (new) Person:
    Person.call(this);
    document.write('Student instantiated</br>');        
} 
// does not create a Person, just makes Students have Person prototype features
Student.prototype = Object.create(Person.prototype);

answered Apr 2, 2012 at 23:05

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

1 Comment

Om Shankar Over a year ago

This answer should be accepted. It was asked why do we need to do Person.call(this); and it answers that. Try putting a debugger before Person.call(this); and see the value of this (Student); you will find that it doesn't have gender property before, but gets it as soon as parent is called.

imjustmatthew · Accepted Answer · 2012-04-02 22:56:52Z

Running the example you provided only calls the Person() constructor once during initial execution of the script when the line "Student.prototype = new Person();" is executed.

If we modify your script to create a second student and separate the setup from the instantiation: bit: http://jsfiddle.net/anacW/

function Person(gender) {
    this.gender = gender;
    document.write('Person instantiated</br>');
}

Person.prototype.walk = function(){
    document.write("is walking</br>");
};

Person.prototype.sayHello = function(){
    document.write("Hello</br>");
};

Person.prototype.sayGender = function(){
    document.write(this.gender + "</br>");
};



function Student() {
    //Person.call(this);
    document.write('Student instantiated</br>');        
}
Student.prototype = new Person();

Student.prototype.constructor = Student;

Student.prototype.sayHello = function(){
    document.write("Student says Hello</br>");
}
Student.prototype.sayGoodBye = function(){
    document.write("Student says goodbye</br>");
}

document.write("*** Building student1 *** </br>");
var student1 = new Student();
student1.sayHello();
student1.walk();
student1.sayGoodBye();

document.write("*** Building student2 ***</br>");
var student2 = new Student();
student2.sayHello();
student2.walk();
student2.sayGoodBye();

document.write("*** InstanceOf Tests ***</br>");
document.write("student1 is Person?: " + (student1 instanceof Person));
document.write("</br>");
document.write("student1 is Student?: " + (student1 instanceof Student));
document.write("</br>");
document.write("student2 is Person?: " + (student2 instanceof Person));
document.write("</br>");
document.write("student2 is Student?: " + (student2 instanceof Student));

This code gives:

Person instantiated
*** Building student1 *** 
Student instantiated
Student says Hello
is walking
Student says goodbye
*** Building student2 ***
Student instantiated
Student says Hello
is walking
Student says goodbye
*** InstanceOf Tests ***
student1 is Person?: true
student1 is Student?: true
student2 is Person?: true
student2 is Student?: true

Which shows you that the Person constructor is only being called once, and is never called by instantiating a Student. This might be desirable in your case (I don't know enough javascript to tell you whether it's 'proper' form or not).

I don't know any case where this is desirable; usually it leads to bugs (as far as the example isn't too simple). There are some cases for that code construct, but not in oo inheritance.

balkon_smoke · Accepted Answer · 2012-02-23 09:38:26Z

-1

Here how I do this:

Foo = function() {}
Foo.prototype.sayHello = function() { console.log("hello"); }

Bar = function() {}
Bar.prototype = new Foo();
Bar.prototype.sayBye = function() { console.log("bye"); }

var oBar = new Bar();
oBar.sayHello(); // "hello"
oBar.sayBye(); // "bye"

answered Feb 23, 2012 at 9:38

balkon_smoke

1,2172 gold badges11 silver badges25 bronze badges

1 Comment

hrishikeshp19 Over a year ago

Yes. But, in this approach, constructor of Bar is NEVER called. So, having anything private for "Bar" is meaningless. So, Bar is never initialized, all you use is Foo object.

Collectives™ on Stack Overflow

why do we need to call the parent constructor in JavaScript Inheritance

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related