Prototype & Object Oriented Java Script

In Object Oriented Programming world an object is generally an instance of an class but in java script, almost “everything” is an object. Arrays, Dates, Functions, Regex are all a type of Objects. even boolean, numbers, strings can be a type of object if created with new operator and of course a JS object is always a type of Object.so in JS If you understand objects, you understand JavaScript.

This article is more about prototypal inheritance in java script, so we will cover this in three parts —

1- Creating java script objects
2- Prototype object and inheritance
3- Classes in java script

1- Creating Java Script Objects

There are different ways to create new objects:
- Using an object literal.
- Using the keyword new.
- Using Object.create() method.
- Using constructor function

Using an object literal :
This is the easiest way to create a JavaScript Object. Using an object literal, you both define and create an object in one statement. An object literal is a list of name:value pairs (like age:50) inside curly braces {}.

Using the keyword new:
The following example also creates a new JavaScript object with four properties:

Using Object.create() method:
The Object.create() method creates a new object, using an existing object as the prototype of the newly created object.

Using constructor function:
In JavaScript, a constructor function can be used when you need to create multiple objects. For example-

In the above example, function Person() is an object constructor function.

To create an object from a constructor function, we use the new keyword. so behind the scene the above is equivalent to —
const person1 = Object.create( Person.prototype );
Person.call( person1, ‘John’, 23, ‘male’);

when “this” keyword is used in a constructor function, “this” refers to the object when the object is created

Note: It is considered a good practice to capitalize the first letter of your constructor function.

On executing the above code, the JavaScript engine will create two copies of the constructor function, each for person1 and person2.
every object created using the constructor function will have its own copy of properties and methods.

2- Prototype object and inheritance

When a function is created in JavaScript, the JavaScript engine adds a prototype property to the function, called a prototype object.
prototype object contains two properties -
constructor: The constructor property points back to the function.
__proto__ : This is the reference to the constructor function
We can access the function’s prototype property using functionName.prototype.

we can attach properties and methods to the prototype object of constructor function, this will enable all the objects created using the constructor function to share those properties and methods.
The new property can be added to the constructor function’s prototype property using either the dot notation or square bracket notation as shown below:

Note: properties added in constructor function using “this” reference are instance specific not shareable but properties and methods added in constructor functions prototype are shareable among all the constructor instances.
be careful when adding properties in shareable space(prototype object of constructor function) because prototype space is shared by all the instances and any instance can change any property inside prototype object.

In the above example, person1 and person2 point to the same friends’ array of the prototype object. so if person1 modifies friends property by adding another string in the array, the changes made in the friend’s property by person1 object is reflect on person2.friends also. (to avoid this you can use the “this” reference specific to the instances)

Inheritance :
Inheritance in javascript can be explained through the typical Rectangle and Square Example -

3- Class in Java Script:

We understand the constructor functions and prototype objects, now let’s look at class in js:
javascript classes are nothing but just a new way of writing the constructor functions by utilising the power of prototype, lets see an example for this:

So if you compare this with what prototypal inheritance using constructor functions, it is very similar.
By writing the above code, we have actually created a variable named Vehicle which references to function constructor defined in the class, also we have added a method to the prototype of the variable Vehicle, same as bellow:

So, in java script class is a new way of doing the constructor functions.

Class Properties :

1- Constructor :
Constructor is special function in the class declaration, which defines a function, that represents the class itself. When you new up a class instance, the constructor is automatically called.
let car = new Vehicle(“Honda”, “Accord”, “Purple”);
A constructor can use super keyword to call the constructor of the class its extending from. A class can not have more than 1 constructor function.

2- Static Methods:
Static methods are functions on class itself, and not on its prototype, unlike the other methods in the class, which are defined on its prototype.
Static methods are declared using static keyword, and are mostly used to create utility functions. They are called without creating the instance of the class. Remember, static methods can not be called from the class instance.See an example below.

3- Getters/Setters:
Class can also have getter/setters to get the property value and or to set the property values. Under the hood, getters/setters are defined on the class prototype.Something like below.

4- Subclassing:
Subclassing is a way you can implement inheritance in Javascript classes, keyword extends is used to create a child class of a class.
Lets take an example:

You can see when calling the getName() function, the function from the child class was called.
Sometimes we need to call function of the base class. We use super keyword in order to call the base class methods from within the methods of the child class.
Change the getName() function in the child class to something like:
class Car extends Vehicle{
getName(){
return super.getName() +” — called base class function from child class.”;
}
}
Now, if you call getName() from the instance it should return the result as below:

Thank You !! :)