See the Pen thecodelog.com - ES6 Classes 1 by Deano (@deangilewicz) on CodePen.
class declaration:
See the Pen thecodelog.com - ES6 Classes 2 by Deano (@deangilewicz) on CodePen.
Below, class myClass4 implies creating a (special) function of the name myClass4, much like you did pre-ES6 (see myClass3) with the constructor method identifying the signature of that myClass4() function, as well as its body contents.
Class methods use “concise method” syntax and are non-enumerable whereas object methods are by default enumerable.
See the Pen thecodelog.com - ES6 Classes 3 by Deano (@deangilewicz) on CodePen.
A myClass4() call of class myClass4 must be made with new, as the pre-ES6 option of myClass4.call(obj) will not work. Function myClass3 is “hoisted” but class myClass4 is not. Class myClass4 in the top global scope creates a lexical myClass4 identifier in that scope but function myClass3 does not create a global object property of that name.
Extends and Super:
ES6 classes also have syntactic sugar for establishing the [[Prototype]] delegation link between two function prototypes.
See the Pen thecodelog.com - ES6 Classes 4 by Deano (@deangilewicz) on CodePen.
In the constructor, super automatically refers to the “parent constructor,” which in the previous example is myClass5(). In a method, it refers to the “parent object,” such that you can then make a property/method access off it, such as super.gimmeXY()
myClass6 extends myClass5 means to link the [[Prototype]] of myClass6.prototype to myClass5.prototype. Super in a method like gimmeXYZ() specifically means myClass5.prototype, whereas super means myClass5 when used in the myClass6 constructor.
See the Pen thecodelog.com - ES6 Classes 5 by Deano (@deangilewicz) on CodePen.
Extending Natives:
See the Pen thecodelog.com - ES6 Classes 6 by Deano (@deangilewicz) on CodePen.
The ouch custom error object in this previous snippet will behave like any other genuine error object, including capturing stack.
Static:
Static members are not on the class’s prototype chain – therefore, not available on instances. They’re actually on the dual/parallel chain between the function constructors so are available on the class itself.
See the Pen thecodelog.com - ES6 Classes 7 by Deano (@deangilewicz) on CodePen.
Another example below with extended classes.
See the Pen thecodelog.com - ES6 Classes 8 by Deano (@deangilewicz) on CodePen.
Setters and Getters:
See the Pen thecodelog.com - ES6 Classes 9 by Deano (@deangilewicz) on CodePen.
An example using classes.
See the Pen thecodelog.com - ES6 Classes 10 by Deano (@deangilewicz) on CodePen.