The correct way to implement prototypal inheritance

Question

There is already numerous threads about prototypal inheritance in JavaScript, but this is not a copy due to laziness. I have literally read them all and have found almost as many different syntactic approaches as I have found answers, so it appears that I am not the only one that is confused on this subject!

Specifics:

My current approach looks like this.

var Person = function(name) {
    this.name = name;

    this.greeting = function() {
        alert("Greetings, I am " + name);
    }

}

var bob = new Person("bob");
bob.greeting();

var Woman = function(name) {
    Person.call(this, name);
    this.gender = "female";
}

Woman.prototype = Object.create(Person.prototype);

var brenda = new Woman("brenda");
brenda.greeting();

Person.prototype.eats = true;

alert(brenda.eats);

Having tested the code I have found it works perfectly - as far as I can tell - but I have been told that this is not the best approach and that I should define the constructor like this:

Woman.prototype.constructor = Woman;

And not use the Person.call method in my actual constructor method. Two things, having been told that I can't see an easy way to then pass in the parameters using the 2nd approach, and also, just why? What I'm doing seems to work fine.

Am I missing something?

Is there some cases where what I'm doing will give unpredictable errors?

Can anyone give a definitive 'correct' approach and the reason for it?

Answer 1

What you have is, I think, considered to be the best approach. The point you raise however is irrelevant:

Woman.prototype.constructor = Woman;

is not a replacement for Person.call(...). In fact, those two things have nothing in common, they serve different purposes:

• Calling the parent constructor in the child constructor ensures that the child instance is correctly initialized. It's like calling super() in ES6 or other languages.

• Assigning to constructor simply restores the original value of Women.prototype.constructor. If you did not do that, brenda.constructor would refer to Person. This doesn't have an impact on the internal workings of your inheritance, but other code that consumes your object might rely on constructor having the correct value. See also Advantages of setting the "constructor" Property in the "prototype".

So the answer to your question is: you should do both.

Sometimes you see the assignment taking place as part of the Object.create call. This is even more accurate, since it recreates the original characteristics of the property (like non-enumerability):

Woman.prototype = Object.create(Person.prototype, {
  constructor: {value: Woman, writable: true}
});

---

FWIW, I believe one of the reasons of introducing class in ES6 was to reduce the confusion around constructor functions and prototypes. That is not to say that you should not know about it, after all, class is more or less just syntactic sugar, but it just makes inheritance a bit easier:

class Woman extends Person { // almost like Woman.prototype = Object.create(Person.prototype)
  constructor(name) {
    super(name); // almost like Person.call, but enforced by the interpreter
    this.gender = "female";
  }
}

Answer 2

this is OOP approach in JS

var Person = function(name) {
    this.name = name;
}

Person.prototype.greeting = function(){ 
    var newPerson = new Person(this.name);
    alert("Greetings, I am " + name);
    return newPerson;
} 

Person.prototype.toString=function(){ 
    return '[Person "'+this.name+'"]';
} 

Woman.prototype = new Person();

Woman.prototype.constructor=Woman;      

function Woman(name){ 
    this.name=name;
} 

Woman.prototype.toString=function(){ 
    return '[Woman "'+this.name+'"]';
} 

var somePerson = new Person('Mr.');
var myPerson = new Woman('She');
alert('somePerson is '+somePerson);   // results in 'somePerson is [Person "Mr."]' 
alert('myPerson is '+myPerson);             // results in 'myPerson is [Woman "She"]' 

myPerson.greeting();                    // calls a method inherited from Person