In this tutorial, you will learn about JavaScript Prototype with the help of examples. As you know, you can create an object in JavaScript using an object constructor function. For example:

// constructor function
function Person () {
    this.name = 'John',
    this.age = 23
}

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

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

JavaScript Prototype

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

function Person () {
    this.name = 'John',
    this.age = 23
}

const person = new Person();

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

We are attempting to access the prototype property of a Person constructor function in the preceding example.

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

Prototype Inheritance

A prototype in JavaScript can be used to add properties and methods to a constructor function. A prototype’s properties and methods are passed down to objects. As an example:

// constructor function
function Person () {
    this.name = 'John',
    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

We introduced a new property gender to the Person constructor method in the preceding program by using:

Person.prototype.gender = 'male';

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

Hence, both objects person1 and person2 can access the gender property.

Note: The syntax to add the property to an object constructor function is:

objectConstructorName.prototype.key = 'value';

A prototype is used to provide extra properties to all objects created by a constructor function.

Changing Prototype

If a prototype value is altered, the changed property value will be applied to all new objects. The prior value will be applied to all previously created objects. As an example:

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

// 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 should not change the prototypes of typical JavaScript built-in objects such as strings, arrays, and so on. It is regarded as unethical.

JavaScript Prototype Chaining

When an object attempts to access a property that is both in the constructor function and in the prototype object, the property from the constructor function is used. As an example:

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

// adding property 
Person.prototype.name = 'Peter';
Person.prototype.age = 23

const person1 = new Person();

console.log(person1.name); // John
console.log(person1.age); // 23

A property name is specified in the constructor function and also in the prototype property of the constructor function in the preceding program.

When the software 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 ‘John’.

When the software 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 inherits property from the prototype object (if available).

Note: You can also access the prototype property of a constructor function from an object.

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

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

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

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

You may like:

continue and break Statements in JavaScript