Javascript doesn’t really have classes!

JavaScript’s approach to object-oriented programming is unique, using prototypal inheritance as opposed to the class-based inheritance seen in many other languages. Today we’ll explore classes in JavaScript and comparing this with traditional class-based models.

The Illusion of Classes in JavaScript

JavaScript’s ‘class’ syntax, introduced in ES6, does not signify a shift to class-based inheritance but is a syntactical enhancement over the existing prototypal inheritance pattern. This provides a familiar structure for developers accustomed to class-based languages.

Prototypal Inheritance Explained

Prototypal inheritance is a concept where objects inherit properties and methods directly from other objects. This is fundamentally different from class-based inheritance, where classes define blueprints for objects, and objects are instances of these classes.

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

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

const alice = new Person('Alice');

alice.sayHello(); // Outputs: Hello, my name is Alice

Class-Based Inheritance

A Contrast In class-based inheritance, found in languages like Java or C++, classes define the structure and behavior of objects. Objects (instances) are created from these classes, and inheritance is a mechanism where a class can extend another class to inherit its properties and methods.

Hypothetical Code Example in a Class-Based Language:

public class Person {
  private String name;

public Person(String name) {
    this.name = name;
  }

  public void sayHello() {
    System.out.println("Hello, my name is " + this.name);
  }
}

Person alice = new Person("Alice");

alice.sayHello();

Classes in JavaScript

The Syntactic Overlay Over Prototypes JavaScript’s class syntax does not introduce a new inheritance model but provides a more readable and familiar way to use prototypal inheritance. The methods and properties defined within a JavaScript class are added to the prototype of the object.

Here is a great article which explains the differences between the two types of inheritence: https://medium.com/@Gaurav.Chaudhary/decoding-the-prototypal-inheritance-in-javascript-everything-you-need-to-know-9c56bfc32129

Flexibility with Prototypes

Unlike class-based inheritance, where the structure of an instance is rigidly defined by its class, prototypal inheritance allows for more dynamic and flexible object construction. In JavaScript, it’s possible to modify the prototype of objects even after they have been instantiated.

class Person {

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

sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const bob = new Person('Bob');

bob.sayHello(); // Outputs: Hello, my name is Bob

Person.prototype.sayGoodbye = function() {
  console.log(`${this.name} says goodbye`);
};

bob.sayGoodbye(); // Outputs: Bob says goodbye

Conclusion

Understanding the distinction between prototypal and class-based inheritance is fundamental to mastering JavaScript. While classes in JavaScript may look similar to those in class-based languages, they operate on the principles of prototypal inheritance, offering a different, more flexible approach to object-oriented programming.

,