JavaScript Evolution ESMAScript 6 - Classes

A common encapsulation approach in JavaScript is using construction function. Adding the prototype required a bit of coding and some repetition. We can do better using new Class syntax to write the object-oriented language.

To define a class, we use class syntax followed by the name of the class. The body of a class is the part between curly braces.

Currently, there is no access modifier in JavaScript, like private and protected in another language. Prefixing a method with an underscore is a convention for indicating that it shouldn't be invoked from public API.

class SponsorWidget {
  // Constructor method is a special method for creating and initializing an object.
  // Its run every time a new instance is created with the new operator.
  constructor(name, description, url) {
    this.name = name;
    this.description = description;
    this.url = url;
  }

  // Private method
  _buildURL(url) {
    console.log(url);
  }

  // Instance method definition in classes look just like the method initializer shorthand in object.
  render() {
    // Variable set in constructor can be accessed from all other instance method using this. syntax.
    let link = this._buildURL(this.url);
  }
}

// Here is how we involve the class
let sponsorWidget = new SponsorWidget(
  "Google",
  "Search",
  "https://www.google.com"
);

sponsorWidget.render();

One benefit of class syntax is that we can use class inheritance. The extends syntax is used to create a class that inherit methods and properties from another class. The super method runs the constructor function from the parent class.

// Parent Class
class Widget {
  constructor() {
    this.baseCSS = "site-widget";
  }

  parse(value) {
    console.log(this.baseCSS);
  }
}

// Child Class
class SponsorWidget extends Widget {
  constructor(name, description, url) {
    super(); // Run parent constructor.
    this.name = name;
    this.description = description;
    this.url = url;
  }

  _buildURL(url) {
    console.log(url);
  }

  render() {
    let link = this._buildURL(this.url);

    // Calling inherit property and method
    this.parse(this.baseCSS);
  }
}

You can override the inherited method by naming the same method name in child class.

// Parent Class
class Widget {
  constructor() {
    this.baseCSS = "site-widget";
  }

  parse(value) {
    return this.baseCSS;
  }
}

// Child Class
class SponsorWidget extends Widget {
  constructor(name, description, url) {
    super(); // Run parent constructor.
    this.name = name;
    this.description = description;
    this.url = url;
  }

  _buildURL(url) {
    console.log(url);
  }

  // Overriding inherit method
  parse(value) {
    // Using super to call parent method
    console.log("Overring method: " + super.parse(this.name));
  }

  render() {
    let link = this._buildURL(this.url);

    // Calling inherit property and method
    this.parse(this.baseCSS);
  }
}