You'll learn about JavaScript Prototype and how it works in this tutorial.

You won't get very far in JavaScript Prototype unless you deal with objects. They are the foundation for nearly every portion of JavaScript as a programming language. Understanding how to create objects was most likely one of the earliest things you learned when you started. So, if you wish to know all about JavaScript Prototypes, start with Javascript Objects if you don't know about it already.

Because JavaScript is a prototype-based Programming language, anytime we start creating a function using JavaScript, and the Js engine keeps adding a prototype property within the function. A Javascript prototype property is primarily an object (Prototype object), which allows us to attach properties and methods, allowing all other objects to acquire these properties and methods.

Syntax

ClassName.prototype.methodName  

Check out this example:

There are several ways to build an object, one of which is to use the function constructor.

<script>
// function constructor
function Person(fullname, occupation, monthOfBirth){
	this.fullname= fullname;
	this.occupation= occupation;
	this.monthOfBirth= monthOfBirth;
}
// this would show Person's prototype property.
console.log(Person.prototype);
</script>

In the output of the code above, Person contains a prototype property, and the prototype property contains a constructor object, which links to the Person constructor method.

// constructor function
function Person () {
    this.name = 'Korg',
    this.age = 19
}

// creating objects
const person1 = new Person();
const person2 = new Person();

Person() is an object constructor function in the second example above. We made two items from it, person1 and person2.

Javascript Prototype

By default, every method and object in JavaScript has a prototype property. As an example,

function Person () {
    this.name = 'Korg',
    this.age = 18
}

const person = new Person();

// checking the prototype value
console.log(Person.prototype); // { ... }

We are attempting to get the prototype property of a Person constructor function in the example above.

Because the prototype property currently has no value, it displays an empty object.

Prototype Chaining

Each object in JavaScript has a prototype object that inherits methods and attributes from it. Again, the prototype object of an object may include a prototype object that gains methods and properties and so on. It is known as prototype chaining.

function Person() {
    this.name = 'Korg'
}

// adding property 
Person.prototype.name = 'John';
Person.prototype.age = 18

const person1 = new Person();

console.log(person1.name); // Korg
console.log(person1.age); // 18

A property name is specified in the constructor function as well as in the constructor function's prototype property in the example above.

Whenever the program runs, person1.name searches the constructor function for a property called name. The object takes value from the name property of the constructor function, which has the value 'Korg'.

When the program runs, person1.age searches the constructor function for a property called age. Because the constructor function lacks an age property, the program examines the constructor function's prototype object, and the object gets property from the prototype object (if available).

Note: A constructor function's prototype attribute can also be accessed from an object.

In this example, proto is used to retrieve the prototype property of a person object. But, proto has been deprecated. Try not to use it.

function Person () {
    this.name = 'Korg'
}

// adding a prototype
Person.prototype.age = 18;

// creating object
const person = new Person();

// accessing prototype property
console.log(person.__proto__);   // { age: 18 }

Prototype Inheritance

A prototype in JavaScript may be used to add methods and attributes to a constructor function. A prototype's attributes and methods are passed down to objects. As an example,

// constructor function
function Person () {
    this.name = 'Sheila',
    this.age = 18
}

// creating objects
const person1 = new Person();
const person2 = new Person();

// property is added to constructor function
Person.prototype.gender = 'female';

// prototype value of Person
console.log(Person.prototype);

// inheriting the prototypes property
console.log(person1.gender);
console.log(person2.gender);

We introduced a new property gender into the Person constructor in the example above.

The property gender is therefore inherited by objects person1 and person2 from the Person constructor function's prototype property.

As a result, both the objects person1 and person2 have access to the gender attribute.

Syntax

objectConstructorName.prototype.key = 'value';

Changing Prototype

If the value of a Prototype is altered, the changed value will be applied to all new objects. The prior value will be applied to all objects created previously.

You shouldn't change the prototypes of typical JavaScript Prototype built-in objects such as arrays, strings, and so on. It is seen as unethical.

For example:

// constructor function
function Person() {
    this.name = 'Korg'
}

// add a property
Person.prototype.age = 18;

// creating an object
const person1 = new Person();

console.log(person1.age); // 18

// changing the property value of prototype
Person.prototype = { age: 48 }

// creating new object
const person3 = new Person();

console.log(person3.age); // 48
console.log(person1.age); // 18

Using Prototype to Add Methods to Constructor Functions

// constructor function
function Person () {
    this.name = 'Korg',
    this.age = 18
}

// creating objects
const person1 = new Person();
const person2 = new Person();

// adding a method to the constructor function
Person.prototype.greet = function() {
    console.log('hi' + ' ' +  this.name);
}

person1.greet(); // hi Korg
person2.greet(); // hi Korg

Key Points

• A prototype's an object that is linked to all of the functions. It is also invisible, but all of the prototype's properties are accessible.
• When a programmer has to add additional features like methods and variables later, and these attributes must be shared across all instances, the prototype becomes useful. Javascript Prototype
• The prototype can dynamically add methods and variables to existing objects.