In this tutorial, you will learn about prototypes in JavaScript with the assistance of examples.
JavaScript is a prototype-based language, in this way, at whatever point we create a function using JavaScript, the JavaScript engine adds a prototype property inside a capacity, Prototype property is essentially an object (otherwise called Prototype object), where we can join strategies and properties in a prototype object, which enables the wide range of various objects to acquire these techniques and properties.
Before you learn prototypes, be sure to check these tutorials:
As you most likely are aware, you can make an object in JavaScript using an object constructor function. For instance,
// constructor function function Person () { this.name = 'Salman', this.age = 23 } // creating objects const person1 = new Person(); const person2 = new Person();
In the above example, function Person() is an object constructor work. We have made two objects person1 and person2 from it.
In this article, you will learn-
JavaScript Prototype
In JavaScript, each function and object has a property named prototype by default. For instance,
function Person () { this.name = 'Salman', this.age = 23 } const person = new Person(); // checking the prototype value console.log(Person.prototype); // { ... }
In the above example, we are attempting to get to the prototype property of a Person constructor work.
Since the prototype property has no value right now, it shows an empty object { … }.
Prototype Inheritance
In JavaScript, a prototype can be used to add properties and strategies to a constructor work. Also, objects acquire properties and techniques from a prototype. For instance,
// constructor function function Person () { this.name = 'Salman', this.age = 23 } // creating objects const person1 = new Person(); const person2 = new Person(); // adding property to constructor function Person.prototype.gender = 'male'; // prototype value of Person console.log(Person.prototype); // inheriting the property from prototype console.log(person1.gender); console.log(person2.gender);
Output
{ gender: "male" } male male
In the above program, we have added a new property gender to the Person constructor function using:
Person.prototype.gender = 'male';
Then object person1 and person2 inherits the property gender from the prototype property of Person constructor function.
Henceforth, the two objects person1 and person2 can get to the gender property.
Note: The syntax to add the property to an object constructor work is:
objectConstructorName.prototype.key = 'value';
Prototype is used to give extra property to all the objects made from a constructor work.
Add Methods to a Constructor Function Using Prototype
You can likewise add new strategies to a constructor work using the prototype. For instance,
// constructor function function Person () { this.name = 'Salman', this.age = 23 } // creating objects const person1 = new Person(); const person2 = new Person(); // adding a method to the constructor function Person.prototype.greet = function() { console.log('hello' + ' ' + this.name); } person1.greet(); // hello Salman person2.greet(); // hello Salman
In the above program, a new method greet is added to the Person constructor function using a prototype.
Changing Prototype
If a prototype worth is changed, at that point all the new objects will have the changed property value. All the previously made objects will have the previously worth. For instance,
// constructor function function Person() { this.name = 'Salman' } // add a property Person.prototype.age = 20; // creating an object const person1 = new Person(); console.log(person1.age); // 20 // changing the property value of prototype Person.prototype = { age: 50 } // creating new object const person3 = new Person(); console.log(person3.age); // 50 console.log(person1.age); // 20
Note: You ought not to change the prototypes of standard JavaScript built-in objects like strings, arrays, and so forth It is viewed as a terrible practice.
JavaScript Prototype Chaining
If an object attempts to get some property that is in the constructor work and the prototype object, the object takes the property from the constructor work. For instance,
function Person() { this.name = 'Salman' } // adding property Person.prototype.name = 'sohail'; Person.prototype.age = 23 const person1 = new Person(); console.log(person1.name); // Salman console.log(person1.age); // 23
In the above program, a property name is proclaimed in the constructor work and furthermore in the prototype property of the constructor work.
At the point when the program executes, person1.name glances in the constructor capacity to check whether there is a property named name. Since the constructor work has the name property with the value ‘Salman’, the object takes an incentive from that property.
At the point when the program executes, person1.age glances in the constructor capacity to check whether there is a property named age. Since the constructor work doesn’t have age property, the program investigates the prototype object of the constructor work and the item acquires property from the prototype object (if accessible).
Note: You can also access the prototype property of a constructor function from an object.
function Person () { this.name = 'Salman' } // adding a prototype Person.prototype.age = 24; // creating object const person = new Person(); // accessing prototype property console.log(person.__proto__); // { age: 24 }
In the above example, a person object is used to get to the model property using proto. In any case, proto has been censured and you ought to try not to using it.
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.