Class compositions in JavaScript constructors, prototypes, and es6 classes

In JavaScript, there is no explicit concept of classes as in traditional class-based object-oriented languages like Java or C++. Instead, JavaScript uses a prototype-based inheritance model. However, with the introduction of ECMAScript 6 (ES6), a new syntax for defining classes was introduced. Despite the syntax, JavaScript classes are essentially syntactic sugar over the existing prototype-based inheritance.

Prototype-based Inheritance:

1. Constructor Functions:

   • In traditional JavaScript, objects are often created using constructor functions. These functions are invoked using the new keyword to create instances.

function Person(name, age) {
   this.name = name;
   this.age = age;
 }
 
 Person.prototype.sayHello = function () {
   console.log(`Hello, my name is ${this.name}`);
 };
 
 const person1 = new Person('John', 25);
 person1.sayHello();
 

     2. Object.create:

• • Object.create allows you to create a new object with a specified prototype object

const personPrototype = {
   sayHello: function () {
     console.log(`Hello, my name is ${this.name}`);
   },
 };
 
 const person1 = Object.create(personPrototype);
 person1.name = 'John';
 person1.sayHello();
 

ES6 Class Syntax:

With the introduction of ES6, JavaScript introduced a more class-like syntax for defining constructor functions and managing prototype-based inheritance.

class Person {
   constructor(name, age) {
     this.name = name;
     this.age = age;
   }
 
   sayHello() {
     console.log(`Hello, my name is ${this.name}`);
   }
 }
 
 const person1 = new Person('John', 25);
 person1.sayHello();
 

Key Components of ES6 Classes:

1. Constructor Method:

   • The constructor method is called when an object is instantiated from the class. It is used for initializing object properties.

2. Class Methods:

   • Other methods inside the class are essentially added to the prototype of the object.

3. Inheritance:

   • The extends keyword is used to create a class as a child of another class.

class Student extends Person {
   constructor(name, age, grade) {
     super(name, age);
     this.grade = grade;
   }
 
   study() {
     console.log(`${this.name} is studying hard!`);
   }
 }
 
 const student1 = new Student('Alice', 20, 'A');
 student1.sayHello();
 student1.study();
 

In summary, while JavaScript doesn't have true classes in the classical sense, you can achieve class-like behavior using constructor functions and prototypes, or by using the more modern ES6 class syntax. Both approaches facilitate object-oriented programming in JavaScript.