Skip to main content

ES6

Table of Contents​

  1. Terms
  2. Classes

Terms​

TermsDefinitions
Classesare templates that are used to create objects that have identical functionality.

https://devhints.io/es6

Table of Contents ⬆️

Unobtrusive JS

  • Usability
  • Window.on resize
  • Namespace / Global Abatement

Unobtrusive JavaScript should add as little as possible to the global object or global namespace of the environment in which it runs. Other scripts may override any variable or function that is created in the global namespace, and this can lead to unexpected failures that are difficult to debug. JavaScript does not have a built-in explicit namespace mechanism, but the desired effects are easy to produce using the language's facilities.

Describe Namespacing​

using static namespacing is an umbrella term for solutions in which the namespace label is effectively hard coded.

  • offers a lower risk of collision
  • Namespaces can be found in almost any serious JavaScript application.
  • organizing code and parameters logically.

1. Single global variables​

opting for a single global variable as your primary object of reference.

Classes​

  • ES6 classes are a simple syntactic sugar over the prototype-based OO pattern. It is not introducing a new object model to JavaScript.
  • Having a single convenient declarative form makes class patterns easier to use, and encourages interoperability.
  • We can use prototype-based inheritance to reduce code repetition. Child classes inherit and specialize behavior defined in parent classes.
  • Classes support super calls, instance and static methods and constructors.
class SkinnedMesh extends THREE.Mesh {
  constructor(geometry, materials) {
    super(geometry, materials);

    this.idMatrix = SkinnedMesh.defaultMatrix();
    this.bones = [];
    this.boneMatrices = [];
    //...
  }
  update(camera) {
    //...
    super.update();
  }
  get boneCount() {
    return this.bones.length;
  }
  set matrixType(matrixType) {
    this.idMatrix = SkinnedMesh[matrixType]();
  }
  static defaultMatrix() {
    return new THREE.Matrix4();
  }
}

extends​

  • the extends keyword is used to create a class that inherits methods and properties from another class.

super​

  • The super method runs the constructor function from the parent class.

Factory vs Class​

context of this

factory provides better encapsulation

Simple Factory​

  • “A simple factory is an object which encapsulates the creation of another object”. In ES6 it could be the constructor being instatiated by “new”.

Factory Method​

  • “Factory Method defines one method, createThing for instance, which is overriden by subclasses who decide what to return. The Factories and Products must conform to interfaces for clients to be able to use them.”

Abstract Factory​

  • “The Abstract Factory Pattern provides an interface for creating families of related or dependent objects without specifying their concrete classes.”

The important point here is the word “families”. Continuing with our example it could be implemented in ES6 as an “interface” (a class) and many “concrete classes” (sub-classes). In TypeScript (as in c#) the interface exists as a definition (without any implementation) and classes implement it. But in JS (including ES6) they don’t, that’s why we use a class and sub-classes that extend it. So we could have the sub-classes “Administrator”, “Editor”, “Publisher”, etc.