Learn what is JavaScript prototype. How to use it and how we can achieve inheritance and extend objects or add new properties and methods.

JavaScript Prototype point to remember

  1. Prototype Basics: JavaScript has a concept called “prototype,” which is like an inheritance blueprint.
  2. Inheritance with Prototypes: Prototypes allow objects to inherit properties and methods from other objects. This means an object can share characteristics with another object.
  3. Top of the Chain: At the very top of this inheritance chain is an object called Object.prototype. All other objects inherit from it.
  4. Extending Objects: Prototypes also let you add new properties and methods to objects created from a particular constructor. This way, you can enhance or modify an object’s behavior even after it’s created.

In summary, prototypes in JavaScript help objects share and inherit characteristics, and they provide a way to extend and modify objects’ properties and methods.

JavaScript Prototype Using Code example

To understand prototypes, let’s use an example of an Employee function that takes in title as a parameter of type string.

function Employee(title) {
  this.title = title;
}

JavaScript Prototype Basic

Now Let’s assume we want to add a new property that is a method with the name “setTitle” to this Employee function. In order to do that we need to use JavaScript prototype.

Employee.prototype.setTitle = function (title) {
  this.title = title;
};

Let’s add one more method named “getTitle”  that will return the title that we set using the setTitle method

Employee.prototype.getTitle = function () {
return this.title;
};

Okay, now we can check/access these methods by creating a new instance of the Employee method.

let empObj= new Employee("Software Engineer");
empObj.setTitle("Frontend Developer");
console.log(empObj.getTitle()); // Frontend Developer

Let’s take this to the next level by declaring a new function named Engineer that takes in two parament String title, boolean isManager.

function Engineer(title, isManager) {
   Employee.call(this, title);
   this.isManager = isManager;
}

Inheritance with JavaScript Prototypes

Now, our requirement is that the Engineer method should inherit all properties from our previous method which is  Employee.  We can do this by using inheritance with JavaScript prototypes.

First, we need to create a new object that inherits all the properties and methods defined in the Employee.prototype.

This means that any changes or additions made to Engineer.prototype won’t affect Employee.prototype.

Object.create(Employee.prototype);

Then we need to assign the newly created object as the prototype for the Engineer constructor.

This establishes a prototype chain where Engineer objects can access properties and methods from both their own prototype and the Employee prototype.

Engineer.prototype = Object.create(Employee.prototype);
Engineer.prototype.constructor = Engineer;

Note: Engineer.prototype.constructor = Engineer, This line is used to fix a potential issue that arises when you set Engineer.prototype in the previous step.

When you set Engineer.prototype to an object created from Employee.prototype, the constructor property of Engineer.prototype points to the Employee constructor.

To correct this, we explicitly set it back to Engineer, so it accurately reflects the constructor function for Engineer objects.

Let’s add two methods “getIsManager” and “setIsManager” that will belong to the Engineer method.

Engineer.prototype.getIsManager = function () {
    return this.isManager;
};

Engineer.prototype.setIsManager = function (isManager) {
    this.isManager = isManager;
};

Testing the Inherited property

Since now we have all the code in place we can test our code to check if the method Engineer has inherited properties from the Employee method or not.

Simply we can create a new instance of the Engineer method and use the dot operator to access and set properties.

let engObj = new Engineer("Lead Engineer", true);

console.log(engObj.getTitle()); // Get title
engObj.setTitle("Senior Engineer"); // Set title
console.log(engObj.getTitle());

console.log(engObj.getIsManager()); // Get isManager
engObj.setIsManager(false); // Set isManager
console.log(engObj.getIsManager());

Conclusion

Now you know What is JavaScript Prototype? Learned its key points.

We have seen how we can use a JavaScript prototype to add new properties to an existing method. Also, The key takeaway is that prototypes enable inheritance in JavaScript.

Objects created from a constructor can access properties and methods defined in the constructor’s prototype, making it an efficient way to share common functionality between objects.

This forms the basis of the prototype chain and object-oriented programming in JavaScript.

You might also like, JavaScript homework help service, contact us now!