Prototype and Inheritance in JavaScript

In JavaScript, inheritance is implemented through prototypal inheritance. This means objects can inherit from other objects using a special property called [[Prototype]].

This is somewhat different from classical OOP languages (like Java, C#) which use classes.

---

What is a Prototype

In JavaScript, every object can have another object as its prototype. When a property is looked up on an object and isn't found, JavaScript delegates the search to its prototype.

  
const animal = {
  eats: true,
};

const dog = {
  barks: true,
};

Object.setPrototypeOf(dog, animal);

console.log(dog.eats); // true (inherited from animal)
  

Here, dog doesn't have an eats property, but inherits it from animal.

You can also create a new object while directly specifying its prototype using Object.create().

  
const cat = Object.create(animal);
cat.meows = true;

console.log(cat.eats);  // true
console.log(cat.meows); // true
  

---

Prototype Chain

When looking up a property in an object, JavaScript searches:

1. In the current object
2. In its prototype
3. In the prototype's prototype... until it reaches null

  
console.log(cat.hasOwnProperty("meows")); // true
console.log(cat.hasOwnProperty("eats"));  // false (not in your object, but inherited)
  

This mechanism is called the prototype chain.

---

Constructor Function and Prototype

You can create a constructor function, and JavaScript automatically links its prototype property to the prototype of created objects.

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

Person.prototype.sayHi = function () {
  return `Hi, I'm ${this.name}`;
};

const john = new Person("John");
console.log(john.sayHi()); // Hi, I'm John
  

Here's what happens internally:

• A new object is created
• Its prototype becomes Person.prototype
• The constructor is called with this bound to the new object

---

Class syntax (syntactic sugar)

Since ECMAScript 2015 (ES6), we can use the class syntax, which is just sugar over the same prototypal mechanism.

  
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    return `${this.name} makes a sound.`;
  }
}

class Dog extends Animal {
  speak() {
    return `${this.name} barks.`;
  }
}

const rex = new Dog("Rex");
console.log(rex.speak()); // Rex barks.
  

Under the hood, Dog inherits from Animal using the same prototype chain mechanism.

---

Where Prototype is Used in Real Projects

• Object reuse/inheritance (DRY principle)
• Sharing properties or methods
• In frameworks - like React's `Component.prototype`, Vue extensions
• Performance improvement by storing methods in one place

---

Conclusion

The Prototype system is one of JavaScript's fundamental pillars. It allows objects to inherit from each other and enables powerful approaches to code reuse. Compared to classical OOP languages, it's more flexible and dynamic.

Proper understanding of classes and prototypes in JavaScript gives you the ability to write deep and confident code.