JavaScript Prototype

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:

• JavaScript Objects
• JavaScript Constructor Function

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.

---

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.

JS Objects