Prototypes and Prototypal Inheritance in Javascript

JavaScript uses prototypal inheritance to share properties and methods between objects. Here’s a basic example showing how prototypes and prototypal inheritance work.

Basic Example of a Prototype

// Creating a constructor function
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// Adding a method to the prototype of Person
Person.prototype.sayHello = function() {
  return `Hello, my name is ${this.name}.`;
};

// Creating a new instance of Person
const person1 = new Person("Alice", 30);
console.log(person1.sayHello()); // "Hello, my name is Alice."

In this example:

• We define a Person constructor function that takes name and age as parameters.

• We add a sayHello method to Person.prototype, which will be shared by all instances of Person.

• When we create a new instance person1, it has access to sayHello through the prototype chain.

Prototypal Inheritance Example

Let's say we want to create a Student that inherits from Person.

// Constructor for Student
function Student(name, age, grade) {
  // Call the parent constructor, Person
  Person.call(this, name, age); // Inherit name and age properties from Person
  this.grade = grade;
}

// Set up inheritance so that Student inherits from Person
Student.prototype = Object.create(Person.prototype);

// Restore the constructor reference (optional, but good practice)
Student.prototype.constructor = Student;

// Add a method to Student's prototype
Student.prototype.study = function() {
  return `${this.name} is studying.`;
};

// Creating an instance of Student
const student1 = new Student("Bob", 20, "A");

console.log(student1.sayHello()); // "Hello, my name is Bob." (inherited from Person)
console.log(student1.study());    // "Bob is studying." (specific to Student)

In this example:

• We use Person.call(this, name, age) inside the Student constructor to inherit the name and age properties.

• Student.prototype = Object.create(Person.prototype); sets up inheritance by creating a new object that links to Person.prototype.

• Student.prototype.constructor = Student; restores the constructor property of Student to avoid any issues when identifying its origin.

• The sayHello method is inherited from Person, while study is unique to Student.

Prototype Chain in Action

When student1.sayHello() is called, JavaScript:

1. Looks for sayHello on student1 itself.

2. If it doesn't find it, it looks up the prototype chain to Student.prototype, then to Person.prototype.

3. It finds sayHello on Person.prototype, so it calls it.

This is how JavaScript achieves inheritance without traditional class structures, using prototypes instead.