JavaScript Prototypal Inheritance and Object Creation

JavaScript and Prototypal Inheritance

JavaScript uses prototypal inheritance for object creation. What does this mean your asking? One way to think of objects in JavaScript is that they are like a collection of key value pairs. In JavaScript, an object is simply an instantiation of a function that produces a variable using these key and values (more on object constructors). That function usually uses the constructor method which is part of the JavaScript Object.prototype (base class for all JavaScript objects) and to be more explicit the properties and methods are defined on the prototype property on the Object constructor function, not the object instances themselves.

/*for example creating an Automobile 
object with properties
*/
function Automobile(make, model, year, fuelType) {
    this.make = make;
    this.model= model;
    this.year = year;
    this.fuel = fuelType;
}
 
//and instantiating a new Auto object looks like this. 
var familyVan = new Automobile('Honda', 'Odyssey', 2015, 'Gas');

What is happening is we are calling the constructor function inherited from the base Object class when we use the new keyword while calling the Automobile function. There are some differences between the ES5 and ES6 specs, which I’m not about to get into right now, but ES6 can help take some of the repetition of assigning values to object properties out of their creation. But most of this is just syntactic sugar and does not change the way JavaScript creates new objects. Note we are also not going to touch on the ES6 class keyword.

Modifying the Object

You may have declared an object using this following method by creating an anonymous object as a variable and then using either brackets or dot notation to further modify the object.

var yota= {make:"Toyota", model:"4Runner", year: 1992, color:"blue"};
 
//and then to modify it say adding a new function to it done something like 
yota.goOffRoad = function(){
  console.log('4 wheelin!'); 
};
//then you could call this new function on our yota variable 
yota.goOffRoad(); //'4 wheelin!'

This works, on an anonymous object or also on a created object like our previous familyVan. But this would not work if we tried to create the function following the definition of our Automobile function, like so:

function Automobile(make, model, year, fuelType) {
    this.make = make;
    this.model= model;
    this.year = year;
    this.fuel = fuelType;
}
 
Automobile.driveTrain= function(driveType){
   this.driveType = driveType; 
};
 
//create our familyVan again
var familyVan = new Automobile('Honda', 'Odyssey', 2015, 'Gas');
//but if we attempt to call the driveType function to set the property..
familyVan.driveTrain('Front Wheel Drive'); //Throws an Unexpected TypeError, that familyVan.driveType is not a function

typesdontmatter
If you look at the actual object via a console.log(familyVan) you will see that there is not a function defined for our familyVan.driveTrain. This is where accessing the prototype of our object is necessary to modify our Automobile constructor it’s initial creation. We must assign new properties or methods this way using the following method via accessing the Object.prototype.

Automobile.prototype.driveTrain = function(driveType){
   this.driveType = driveType; 
};
 
//now you can do the below and not get that Unexpected TypeError
familyVan.driveType('Front Wheel Drive');

I know this is kind of a weird example (everyone seems to use cars!). But the point I wanted to make is that when modifying an object constructor, you must use the Object.prototype base class and not try to modify it directly as in the example of the anonymous object type. This was definitely one of the weirder parts when learning JavaScript for me in the beginning, especially coming from a .NET/C# background. Anyway, hope you found this useful and happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *