Understanding Prototype and Prototypal Inheritance in JavaScript

JavaScript is a popular programming language that supports object-oriented programming. One of the key features of object-oriented programming in JavaScript is Prototype and Prototypal Inheritance. Understanding how Prototype and Prototypal Inheritance works is essential to build efficient and scalable JavaScript applications.

Prototype is an object that serves as a template for other objects. Every object in JavaScript has a prototype, which allows the object to inherit properties and methods from the prototype. To access an object's prototype, you can use the prototype property. For example, to access the prototype of an object named "myObject," you can use the code "myObject.prototype".

Prototypal Inheritance is the mechanism that allows objects to inherit properties and methods from their prototypes. When you create a new object in JavaScript, it automatically inherits properties and methods from its prototype. You can add new properties and methods to an object's prototype using the prototype property. For example, if you want to add a new method to the prototype of an object named "myObject," you can use the code "myObject.prototype.newMethod = function(){}".

In JavaScript, every object is linked to a prototype chain. The prototype chain is a sequence of prototypes that an object inherits from. When you try to access a property or method of an object, JavaScript looks for that property or method in the object itself. If the property or method is not found in the object, JavaScript looks for it in the object's prototype. If the property or method is still not found, JavaScript continues to look for it in the prototype chain until it reaches the end of the chain, which is the Object.prototype object.

Using Prototype and Prototypal Inheritance in JavaScript can help you create more efficient and scalable code. By using prototypes, you can avoid duplicating code and create objects that share common properties and methods. Prototypal Inheritance allows you to create objects that inherit properties and methods from their prototypes, which can reduce the amount of code you need to write and make your code easier to maintain. Here are some examples that illustrate how prototype and prototypal inheritance work in JavaScript:

Example 1: Using Prototype to Add a Method to an Object

// Define a person object with a name property
function Person(name) {
  this.name = name;
}

// Add a greet method to the person object's prototype
Person.prototype.greet = function() {
console.log("Hello, my name is " + this.name);
}

// Create a new person object and call the greet method
var person = new Person("John");
person.greet(); // output: "Hello, my name is John"

In this example, we define a Person constructor function that creates a new object with a name property. We then use the prototype property to add a new greet method to the Person object's prototype. Finally, we create a new Person object and call the greet method, which outputs a greeting message with the person's name.

Example 2:

let obj1 = {
  name: "Joes",
  city: "salem",
  info: function () {
    return `${this.name} is from ${this.city}`;
  },
};

const obj2 = Object.create(obj1);
obj2.name = "Raja";

In the above code, we first define an object obj1 with three properties: name, city, and info. The info property is a method that returns a string containing the name and city properties. We then create a new object obj2 using the Object.create() method, with obj1 as its prototype. This means that obj2 inherits all properties and methods of obj1. In other words, obj2 is a new object that is linked to obj1 through its prototype chain.

Finally, we modify the name property of obj2 to be "Raja". This creates a new name property on obj2 that shadows the name property of obj1. When we access the name property of obj2, it returns "Raja", and when we access the name property of obj1, it returns "Joes".

Here's an example of how you can access the properties and methods of obj1 and obj2:

// Access the name property of obj1
console.log(obj1.name); // output: "Joes"

// Call the info method of obj1
console.log(obj1.info()); // output: "Joes is from salem"

// Access the name property of obj2
console.log(obj2.name); // output: "Raja"

// Call the info method of obj2, which inherits from obj1
console.log(obj2.info()); // output: "Raja is from salem"

As you can see, obj2 inherits the info method from obj1, and when we call it on obj2, it uses the name property of obj2 instead of obj1. This is an example of prototypal inheritance, where objects inherit properties and methods from their prototype chain.

Sample Working Codes :

let arr = ["apple", "orange"];
//console
arr.length;

let obj = {
  name: "Joes",
  city: "salem",
  info: function () {
    return `${this.name} from ${this.city}`;
  },
};
//console
obj.toString();

function myFunction() {}

/*
arr.__proto__
Array.prototype

All are object in JS

arr.__proto__.__proto__                     =>Object.prototype

arr.__proto__.__proto__.__proto__           => null

obj.__proto__                               =>Object.prototype
obj.__proto__.__proto__                     => null

myFunction.__proto__                        =>Function.prototype
myFunction.__proto__.__proto__              =>Object.prototype
myFunction.__proto__.__proto__.__proto__    => null


*/

let obj1 = {
  name: "Joes",
  city: "salem",
  info: function () {
    return `${this.name} is from ${this.city}`;
  },
};
/*
let obj2 = {
  name: "Raja",
};

//console
//obj2.__proto__

//obj2.__proto__ = obj1;

*/
const obj2 = Object.create(obj1);
obj2.name = "Raja";

//obj2.name;
//obj2.city;
//obj2.info();
obj2.city = "Chennai";
obj2.info();

Array.prototype.doubleLength = function () {
  return this.length * 2;
};

//arr.__proto__

Function.prototype.mybind = function () {
console.log("This is bind function in prototype");
};

function fun() {}

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

Person.prototype.greet = function () {
console.log(`Hello, my name is ${this.name}.`);
};

const alice = new Person("Alice");
const bob = new Person("Bob");

alice.greet(); // logs "Hello, my name is Alice."
bob.greet(); // logs "Hello, my name is Bob."

In conclusion, Prototype and Prototypal Inheritance are important concepts in JavaScript's object-oriented programming model. By understanding how prototypes work, you can create more efficient and scalable code, and by using prototypal inheritance, you can reduce the amount of code you need to write and make your code easier to maintain.

Understanding Prototype and Prototypal Inheritance in JavaScript

List of Programs

JS Practical Questions & Answers

JS Practical Project

JS Membership Project