PrototypesAreClasses

DRAFT

Correction

Here is what's right.

The class notation in JavaScript is syntactic sugar for prototypes.

In class-based object-oriented programming languages:

• state is stored inside the instances of a class;
• methods are defined in the class;
• inheritance defines the structure and behavior of a class (following a parent-child subclass hierarchy).

In JavaScript:

• both the state and methods are stored inside an object;
• the structure, behavior and the state are all inherited (following a flat delegation hierarchy).

Any object created from a constructor adds to its own definition all the properties defined in the parent object they extend (if it is not specified, a class extends Object). Objects delegate to the parent any property they do not define (and eventually delegate it to the prototype definition).

Example:

The definition of the class Square in the first code box below is equivalent to the object constructor Square defined in the second one:

class Square {
	constructor(height, width) {
		this.height = height;
		this.width = width;
	}
}

function Square(height, width) {
	this.height = height;
	this.width = width
} 

While both examples define a constructor which can be used to create objects with equivalent properties, it is useful to label them with two different names:

• We label a constructor defined with the class notation as class constructor;
• We label a constructor defined without the class notation as object constructor.

We differentiate them because some of the misconceptions described in the inventory are visible only with one of the two notations.

In order to really see that classes are syntactic sugar for prototypes it is possible to use the operator typeof:

class Square { /* ... */ }

typeof Square === 'function' // true

The class Square has type "function" (because of its constructor).

Origin

Where could this misconception come from?

In old versions of JavaScript (before ECMAscript 6), the class notation did not exist and it was possible to create an object constructor only with the definition of a function and its prototype:

function Square(height, width) {
  /* ... */
}
Square.prototype.compare = function(a,b) {/* ... */}

With the introduction of the class notation, the complexity of prototypes are now hidden behind the abstraction introduced by the new notation.

Classes were introduced in JavaScript specifically to mimic the class keyword used in other programming languages, and to appeal to developers used to class-based object-oriented programming.