Day 1: Inheritance in JavaScript

Introduction

Inheritance is a fundamental concept in JavaScript that allows objects to inherit properties and methods from other objects. It enables code reusability, abstraction, and hierarchy in your programs. Understanding inheritance is crucial for writing efficient and modular JavaScript code.

In this article, we'll explore prototypes, function prototypes, and the introduction of ES6 classes, highlighting their advantages and providing real-world examples. Let's dive in! 🚀

Prototypes: Unleashing the Power of Inheritance

Prototypes in JavaScript allow objects to inherit properties and methods from other objects. Each object has an internal reference to its prototype, which serves as a fallback when a property or method is not found in the object itself.

a. Code Reusability: Prototypes enable you to define properties and methods once and share them among multiple objects.

b. Dynamic Nature: Prototypes allow you to modify and extend existing objects and their behaviors at runtime.

c. Memory Efficiency: Since prototypes are shared among objects, they conserve memory by avoiding redundant property and method definitions.

d. Performance Benefits: Accessing properties and methods through prototypes can be faster than accessing them directly on each object.

e. Prototype Chain: Prototypes enable the creation of a chain of objects, where each object inherits from its prototype and cascades up to the Object prototype.

f. Easy Updates: Updating a property or method in the prototype automatically reflects the changes in all objects that inherit from it. This simplifies maintenance and ensures consistency across instances.

ES6 Class Inheritance:

With the introduction of ES6 (ECMAScript 2015), JavaScript added class syntax to simplify the implementation of inheritance. Classes provide a more familiar syntax for developers coming from other programming languages

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

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

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

const dog = new Dog("Buddy");
dog.speak(); // Output: Buddy barks.

Function Inheritance:

Before ES6, JavaScript used constructor functions to achieve inheritance. Here's an example demonstrating function inheritance:

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

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

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

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

const dog = new Dog("Buddy");
dog.speak(); // Output: Buddy barks.

Inbuilt Prototype:

JavaScript provides several built-in prototypes, such as Array, String, Number, Object, and more. These prototypes come with a wide range of useful methods and properties. Let's explore a couple of real examples:

Array Prototype:

const myArray = [1, 2, 3];
console.log(myArray.length); // Output: 3
console.log(myArray.hasOwnProperty(0)); // Output: true

In this example, we access the built-in Array prototype methods length and hasOwnProperty() to retrieve the length of the array and check if it has a property at index 0.

String Prototype:

const myString = 'Hello, World!';
console.log(myString.toUpperCase()); // Output: HELLO, WORLD!
console.log(myString.includes('World')); // Output: true

Here, we utilize the String prototype methods toUpperCase() and includes() to convert the string to uppercase and check if it contains the substring 'World'.

__proto__ vs. .prototype: Understanding the Difference

• proto: It is an internal property of an object that references its prototype. It provides a mechanism to access the prototype of an object directly.

• .prototype: It is a property of a constructor function that is used as a blueprint for creating new objects. It defines the properties and methods that will be inherited by objects created using the constructor function.

While proto is used to access the prototype of an object, .prototype is used to define the prototype for objects created by a constructor function.

It's important to note that .prototype is not directly accessible on objects; it is only accessible on the constructor function itself.

JavaScript OOP and Prototypes:
JavaScript's object-oriented programming model is based on delegation through prototypes rather than the traditional class-based inheritance found in languages like Java or C++. The use of prototypes allows for a more flexible and dynamic approach to inheritance, enabling powerful and concise code.