Properly implementing prototypal inheritance: best practices

Question

Properly implementing prototypal inheritance: best practices

While there are numerous discussions on prototypal inheritance in JavaScript already, I assure you this is not just another lazy copy. Having thoroughly read all existing threads, I've noticed a plethora of syntactic approaches and varying answers which have left me as bewildered as others on this subject!

Here's the gist of my current approach:

My implementation currently 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);

Although everything seems to be working smoothly so far, I've been advised that it might not be the optimal approach. Specifically, I was suggested to redefine the constructor like so:

Woman.prototype.constructor = Woman;

The suggestion also entails discarding the use of Person.call method within the actual constructor. However, upon considering this alternative, I find myself at a loss when it comes to passing parameters using this new approach. Plus, the question lingers - why should I make the change when what I'm doing is effective?

Am I overlooking something crucial?

Could there be scenarios where my current implementation might lead to unforeseen errors?

Can anyone offer a definitive 'correct' way forward along with the rationale behind it?

javascript oop inheritance prototype

Answer 1

Answer №1

It seems that the approach you have taken is widely regarded as the best one. However, it's worth noting that:

Woman.prototype.constructor = Woman;

does not serve the same purpose as Person.call(...). Each of these actions has a distinct role:

Invoking the parent constructor within the child constructor ensures proper initialization of the child instance, resembling the use of super() in ES6 or similar languages.
On the other hand, setting the constructor property simply restores the original value of Women.prototype.constructor. Neglecting to do so would result in brenda.constructor pointing to Person. While this does not affect how your inheritance functions internally, external code interacting with your object may depend on having the correct value for constructor. For more information, refer to Advantages of setting the "constructor" Property in the "prototype".

Therefore, the recommended course of action is to execute both steps.

Sometimes, the assignment occurs within the Object.create method, which accurately replicates the original properties and characteristics of the property (including non-enumerability):

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

In my opinion, the introduction of the class keyword in ES6 aimed at simplifying the complexities surrounding constructor functions and prototypes. While understanding these concepts is essential, the adoption of class syntax offers a more streamlined approach to inheritance:

class Woman extends Person { 
  constructor(name) {
    super(name); 
    this.gender = "female";
  }
}

Answer 2

It seems that the approach you have taken is widely regarded as the best one. However, it's worth noting that:

Woman.prototype.constructor = Woman;

does not serve the same purpose as Person.call(...). Each of these actions has a distinct role:

Invoking the parent constructor within the child constructor ensures proper initialization of the child instance, resembling the use of super() in ES6 or similar languages.
On the other hand, setting the constructor property simply restores the original value of Women.prototype.constructor. Neglecting to do so would result in brenda.constructor pointing to Person. While this does not affect how your inheritance functions internally, external code interacting with your object may depend on having the correct value for constructor. For more information, refer to Advantages of setting the "constructor" Property in the "prototype".

Therefore, the recommended course of action is to execute both steps.

Sometimes, the assignment occurs within the Object.create method, which accurately replicates the original properties and characteristics of the property (including non-enumerability):

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

In my opinion, the introduction of the class keyword in ES6 aimed at simplifying the complexities surrounding constructor functions and prototypes. While understanding these concepts is essential, the adoption of class syntax offers a more streamlined approach to inheritance:

class Woman extends Person { 
  constructor(name) {
    super(name); 
    this.gender = "female";
  }
}

Answer 3

Answer №2

Here is an Object-Oriented Programming approach in JavaScript

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

Answer 4

Here is an Object-Oriented Programming approach in JavaScript

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

Properly implementing prototypal inheritance: best practices

Answer №1

Answer №2

Similar questions

Having trouble setting a JavaScript variable with a PHP session variable

Turn off the autofill option for passwords in Google Chrome

Error: An unexpected token '<' was encountered during the React Webpack build process

Exploring methods to retrieve data from the web3 platform through Node.js

Does one require the express.js framework in order to create a web application using nodeJS?

Issue with datepicker functionality not operational for newly added entries in the table

retrieving JSON data within HTML elements

Using Selenium to interact with drop-down lists using div tags instead of select tags

Image or Surface at the Front for Textural Effect

Using Bootstrap tooltips in an Ajax request

Top method for patiently awaiting the completion of the .forEach() function

In Angular components, data cannot be updated without refreshing the page when using setInterval()

The AJAX function triggers repeatedly upon each click

Trouble with retrieving the key-value pair of an object using V-html in Vuejs

Utilize the map function to modify elements within a nested data structure

Vue.js - Launching Modal for Editing Data Entry

Receiving and transmitting messages repeatedly in Discord.JS

Creating a Dynamic Slideshow on Autopilot

Using SVG sprites from external sources alongside child nodes

Strange behavior of for loops in Node.js