Making Sense of Class Keyword in Javascript

Question

I am getting into ES6 lately and finally looking into classes seriously. I read that classes are just a cover over Objects in Javascript, however, I am finding the syntax most uncomfortable.

Could someone please explain / point to a reference where they explain, how classes simulate & importantly how we can map them into Javascript way of Object manipulation in our mind.

class NoteStore {
  constructor() {
    this.bindActions(NoteActions);

    this.notes = [];
  }
}

As per the example code above, I thought classes are mere constructors, but then what is a constructor doing within a constructor?

As someone who started learning programming with Js, I find the addition of classes (also React's classes) to be a terrible addition to Js so any help would be awesome.

Thanks

Answer 1

Classical class-based programming is based on defining a class which contains a constructor method and other methods which will be inherited by the constructed object. This is written as you show in your sample: the class is defined with its name, then contains a constructor function, then further functions.

The constructor method in a class definition is somewhat special, in that it gets invoked upon object construction. Since it's special, it somehow needs to be marked as such, and that's done by naming it constructor .

In classical Javascript (prototype-based OOP), this works differently: an object constructor is a simple function, and methods inherited by each object instance are defined on an object on the .prototype property of that function. There's nothing special about the constructor in prototype-based OOP, it's just a function, and the real magic lies in the new keyword and the use of this when the object gets constructed.

Expressing this in the form of a class with a constructor method is merely catering to classical-OOP developers, and arguably provides a more compact syntax.

class NoteStore {
  constructor() {
    this.bindActions(NoteActions);
    this.notes = [];
  }

  bindActions(actions) {
    ..
  }
}

This expressed in simple Javascript is:

function NoteStore() {
  this.bindActions(NoteActions);
  this.notes = [];
}

NoteStore.prototype.bindActions = function (actions) {
  ..
}

Answer 2

I think the explanation at MDN is quite clear. class keyword is nothing but a new name for old style OOP implementation where we use a function constructor to get same functionality.

class keyword is brought to JavaScript to make it more similar to other traditional object oriented languages like C++, Java. But at core it is still function constructor with few changes.

For your question "what a constructor doing under constructor" ES6 has done some modification for older version so that class will not act as a constructor for examaple class cannot be invoked directly(without new keyword) like

NoteStore();

This will throw error in ES6 but if it was a function constructor like in ES5 than it works leaving you in a risk of bugs. classes are also not Hoisted.

For more detail and example you can read this link .

Answer 3

The JS class keyword:

Javascript has a system of inheritance which is called prototypal inheritance. This is a system were objects inherit properties from other objects. When a function is invoked using the new keyword the new object created with it 'inherits' properties from from the constructor function's prototype property.

The JS class keyword is merely syntactical sugar for a constructor function. The class keyword just has different syntax but it essentially achieves the same goal of Object creation with prototypes. Take for example the following snippet:

 class human { constructor (name) { this.name = name; } speak () { console.log('hi')} }; console.log(typeof human); // logs function, a class is just a constructor function under the hood const me = new human('Willem'); console.log(Object.getPrototypeOf(me) === human.prototype); // logs true, the object me has a reference to the human.prototype object. me.speak(); // This speak method is located on the prototype of the object, not the object itself console.log(me.hasOwnProperty('speak')); // logs false console.log(human.prototype.hasOwnProperty('speak')); // logs true