JavaScript Prototype

JavaScript uses a prototype-based object model where objects inherit properties and behavior from other objects.

• Functions, arrays, and strings are specialized objects.
• Inheritance is handled through prototypes rather than classes.
• Prototypes define how objects share properties and methods.

Prototype in JavaScript

In JavaScript, a prototype acts as a shared blueprint that stores common methods and properties for objects of the same type.

• Properties and methods added to a prototype are shared across all instances.
• This mechanism helps optimize memory usage and enables inheritance.

Object.prototype.print = function () {
    console.log('I am from object prototype')
}
let b = {
    name: 'Pranjal',
    age: 21
}
b.print()

• Every JavaScript object has a prototype that shares methods and properties.
• Adding a method or property to an object’s prototype makes it accessible to all its instances.
• The print() method is added to Object.prototype, so any object (like b) can use it.
• Using prototypes avoids code duplication by defining shared methods once, making the code more efficient.

Working of Prototype in JavaScript

• Every JavaScript object has an internal [[Prototype]] that enables inheritance.
• When a property is accessed, JavaScript first checks the object itself, then looks up the prototype chain until the property is found or reaches null.
• Functions have a prototype property, which is used when they are called as constructors with the new keyword.
• Objects created using a constructor inherit properties and methods from the constructor’s prototype.
• Since all instances share the same prototype, methods are not duplicated, improving memory efficiency.
• Any update to a prototype is reflected in all existing and future instances.

Creating Constructor Functions

A constructor function in JavaScript is used to create and initialize objects using the new keyword.

• It defines properties and methods for the object.
• Allows creation of multiple object instances.
• Enables shared behavior through prototypes.

function Person(name) {
    this.name = name;
}
Person.prototype.sayHello = function () {
    console.log(`Hello, my name is ${this.name}.`);
};
const n = new Person("Sheema");
n.sayHello();

• Person is a constructor function that initializes objects using the name argument and this.
• The sayHello method is added to Person.prototype, making it available to all instances.
• new Person("Sheema") creates a new object with name set to "Sheema".
• Calling sayHello() prints "Hello, my name is Sheema."

Adding method to prototype

Adding a method to a prototype allows all instances of an object to share the same functionality.

• The method is defined once on the prototype.
• All existing and future instances can access it.

let a1 = [1, 2, 3, 4, 5]
let a2 = [5, 6, 7, 8, 9]
Array.prototype.sum = function () {
    let sum = 0
    for (let i = 0; i < this.length; i++) {
        sum += this[i]
    }
    return sum
}
console.log(a1.sum())
console.log(a2.sum())

• The sum method is added to Array.prototype, making it available to all arrays.
• this refers to the array being processed inside the method.
• Calling sum() on a1 and a2 returns 15 and 35 respectively.

Prototype Inheritance

Prototype inheritance is a JavaScript mechanism where objects inherit properties and methods from other objects through the prototype chain.

• Enables shared behavior without duplicating code.
• Uses prototypes to link objects for inheritance.

function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function () {
    console.log(`${this.name} makes a noise.`);
};

function Dog(name) {
    Animal.call(this, name); // Call the parent constructor
}

Dog.prototype = Object.create(Animal.prototype); // Set up inheritance
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function () {
    console.log(`${this.name} barks.`);
};

const dog = new Dog('Rex');
dog.speak(); // Rex barks.

• Animal is the parent class with a method speak.
• Dog is the child class, which inherits from Animal and overrides the speak method.
• Object.create(Animal.prototype) sets up inheritance so Dog can access Animal methods.

Advanced Prototype Use Cases

1. Extending Built-in Objects

JavaScript allows extending built-in objects by adding methods to their prototypes.

• Add custom methods to Array, String, etc., via their prototype
• Provides new functionality without changing the original object structure

Array.prototype.first = function () {
    return this[0];
};

const n = [10, 20, 30, 40];
console.log(n.first()); 

• The first method is added to Array.prototype, which allows every array in JavaScript to use this method.
• It returns the first element of the array using this[0].
• Calling first() on an array returns its first value (e.g., 10).
• This safely extends array functionality without modifying individual array instances

2. Shared Methods for Performance Optimization

Using prototypes helps optimize JavaScript performance by sharing methods across object instance.

• Methods are defined once on the prototype, not per instance
• Reduces memory usage and improves efficiency

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.introduce = function () {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
};

const person1 = new Person('Pranjal', 25);
const person2 = new Person('Ayaan', 30);

console.log(person1.introduce());
console.log(person2.introduce());

• The introduce method is added to Person.prototype, so all instances share it.
• The method is stored only once in the prototype, reducing memory usage.
• Both person1 and person2 use the same introduce method instance.
• Through the prototype chain, all Person objects inherit the same functionality.

3. Dynamic Method Assignment

Dynamic method assignment in JavaScript lets you add or update methods on objects or prototypes while the program is running.

• Methods can be added to objects or prototypes at runtime.
• Existing methods can be modified without redefining the object.
• Helps extend or change behavior dynamically as needed.

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const person1 = new Person('Pranshi', 25);
person1.introduce = function () {
    return `Hi, I am ${this.name} and I am ${this.age} years old.`;
};

console.log(person1.introduce()); 

• The introduce is dynamically added to person1 after creation to extend its behavior.
• Methods can be customized per object without changing the constructor.
• The method exists only on person1, not other Person instances.
• Since it’s not on the prototype, other objects don’t inherit it.

Advantages of Prototypes

• Memory Efficiency: Shared methods avoid duplication across objects.
• Inheritance Support: Objects inherit properties and methods via prototypes.
• Flexibility: Methods and properties can be added or changed at runtime.
• Performance Optimization: Shared methods improve performance with many objects.
• Code Reusability: Common logic is reused, keeping code clean and maintainable.

Prototype chain in JavaScript

In JavaScript, many data types like functions, arrays, and strings are specialized objects that inherit from the base Object type.

• Functions, arrays, and strings are specialized forms of objects.
• Object acts as the parent or base type in JavaScript.
• Other object types inherit from Object through the prototype chain.

let o = {
    name: "Pranjal",
    age: 21
}
let a = [1, 2, 3, 4, 5]
let s = "Hello GFG"
function p() {
    console.log('My name is xyzabc')
}
Object.prototype.common = function () {
    console.log('I am a shared method from prototype')
}
o.common()
a.common()
s.common()
p.common()

• The common method is added to Object.prototype, so it becomes available to functions, arrays, and strings at runtime.
• Since everything in JavaScript is treated as an object, child types inherit this method through Object.
• This parent–child inheritance structure, with Object at the top, is called the prototype chain.