Over a million developers have joined DZone.

The Hidden Truths in ES6 Classes

For those who have a great passion for OOP paradigm, ES6 is a huge win as classes have finally been included.

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

For many developers, especially those coming from traditional languages such as Java, C#, PHP, etc. and those who have a great passion for OOP paradigm, ES6 is a huge win as the most wanted feature in Javascript finally has finally been included: classes.

Old Wine in a New Bottle

We declare a class in ES6 like below:

class A {
}

When we inspect type of A

typeof A

It will print out function. If we type above code in Chrome’s console, it will print

function class A {
}

A is just a special function in that it isn’t callable (until this point in time). Trying to invoke A() will generate ReferenceError:

Uncaught ReferenceError: A is not defined

Apparently, nothing new is shipped with ES6.

Just Convenient Syntax

Let’s see what the Javascript engine will do when it deals with a class:

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

    getArea() {
        return this.height* this.width;
    }
    toString() {
        return `Rectangle: width(${this.width}), height(${this.height})`;
    }
    static create(height, width) {
        return new Rectangle(height, width);
    }
}

class Square extends Rectangle {
    constructor(height) {
        super(height, height);
    }
    toString() {
        return `Square: length(${this.height})`;
    }
}

const s1 = new Square(10);

Below is what the Javascript engine will see:

Object diagrams

Apparently, nothing new with ES6 classes.

It’s just syntactic sugar on top of prototype based inheritance.

An Apple vs. an Orange

Let’s see what are the differences between ES6 class and OOP language class.

Concept

In traditional OOP languages, class is a blueprint or template from which instances are created.

In Javascript, class is just a constructor function.

Behavior

In traditional languages, when creating instances, methods, properties, etc. are copied down from parent classes to child classes and then from the class to new instances.
OOP behavior

While in Javascript, there is no such a copy from classes to classes and from classes to instances. There are just links between objects.
JS behavior

Features

Classes are at the heart of OOP languages. It’s no strange that OOP languages support a lot of features such as: class variable scopes, multiple inheritances, static block, nested class..

In Javascript, class is just syntactic sugar on top of prototype inheritance. Features support in class is limited. Currently, only the following are supported:

  • Constructor
  • Instance method
  • Static method

Note that class property is not supported.

So, comparing Javascript classes to OOP language classes is like comparing an apple to an orange.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
javascript engine ,oop ,languages ,engine ,class ,javascript

Published at DZone with permission of Can Ho, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}