- Notifications
You must be signed in to change notification settings - Fork4
CS classes and ES6 Classes (WIP)
One of the breaking changes that resulted from ES6 is the creation of theclass
keyword. While there are quite a few shared idioms in the ES6 version, there are quite a few incompatibilities which have to be dealt with, especially since these features already existed in CS.
Here is a reference on ES6 classes
Here is a reference on CS classes
In reality CS expands on the ES native function by adding member functions and member variables as prototype members of the function.
Part of this is how ES deals with thenew
keyword (Fromthis post):
"using new with a constructor that returns an object will evaluate to the returned object, whereas returning any non-object will evaluate to the new instance."
Basic CS Classes:
class Aclass B extends class A
Which results in the following JS currently:
// Hoist our variables and a function to 'extend' one object by another// by setting the child object's member prototypes from one object to another.// The 'extend' function is only included if the `extend` keyword is used. var A, B, extend = function(child, parent) { for (var key in parent) { // Set any non JS functions and properties to the child if (hasProp.call(parent, key)) child[key] = parent[key]; } // Establish prototype link, and correctly assign the constructor property // for all instances of the child function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }, // Shortcut function hasProp = {}.hasOwnProperty;// Wrap this new function in a closure (and call it) to set our internal stateA = (function() { function A() {} return A;})();// Wrap this new function in a closure (and call it) to set our internal stateB = (function(superClass) { extend(B, superClass); function B() { return B.__super__.constructor.apply(this, arguments); } return B;})(A = (function() { function A() {} return A;})());
The equivelent CS6 -> ES6 code would be:
# Coffeescriptclass Aclass B extends A
transforms into:
// ES6class A {};class B extends A {};
- Addition of several keyword, such as
static
andget/set
. - How class inheritance is inferred (ES6 now uses Symbols for inheritance chains)
- Usage rules for
super
- Inline statements within a class definition are not directly supported.
- Here is a reference on ES6 classes
- MozillaES6 classes in depth
- A GreatES6 Class example.
- class
- new
- extends
- super
- constructor
- @ (this)
- class
- new
- extends
- constructor
- static
- get/set
- super
- const
- __proto__
#Oddities of ES6ES6 doesn't do class hoisting: in other words definitions of a class must occur before they are called/created.
ES6 can have a class definition:class Example {}
or named and unnamed class statements:var ex = class Example {}
andvar ex = class {}
Definitions inside a class are run as if thestrict
keyword is in effect.
ES6 classes allow only functions and methods, and don't support the notion of inline code within the class. CoffeeScript allows declaration of variables and random execution in the class definition.
ES6 uses the newSymbol primary type to evaluateinstanceof
:
Making instanceof extensible. In ES6, the expression
object instanceof constructor
is specified as a method of the constructor:constructor[Symbol.hasInstance](object)
. This means it is extensible.
ES6 Class methods arenot enumerable
In ES6 thesuper
keyword can only be called once in the constructor. In derived classes,super()
must be called before you can usethis
. Leaving this out will cause a reference error.
ES6 class prototype.constructor can't be changed. For instance theMyClass.prototype.constructor
property is non-writeable, non-enumerable, and non-configurable