Nested ES6 classes?

JavascriptEcmascript 6Traceur

Javascript Problem Overview


It seems possible to nest a class in a constructor which can then be instantiated from anywhere within the class, is this official?

[EDIT] E.g.,

class C {

    constructor() {
        class D {
            constructor() { }
        }
    }

    method() {
        var a = new D();  // works fine
    }

}

//var a = new D();  // fails in outer scope

The traceur generated JS https://google.github.io/traceur-compiler/demo/repl.html

$traceurRuntime.ModuleStore.getAnonymousModule(function() {
  "use strict";
  var C = function C() {
    var D = function D() {};
    ($traceurRuntime.createClass)(D, {}, {});
  };
  ($traceurRuntime.createClass)(C, {method: function() {
      var a = new D();
    }}, {});
  return {};
});
//# sourceURL=traceured.js

Javascript Solutions


Solution 1 - Javascript

No, there are no nested classes in ES6, and there is no such thing as private members in the class syntax anyway if you mean that.

Of course you can put a second class as a static property on another class, like this:

class A {
    …
}
A.B = class {
    …
};

or you use an extra scope:

var C;
{
    class D {
        constructor() { }
    }
    C = class C {
        constructor() { }
        method() {
            var a = new D();  // works fine
        }
    }
}

(There seems to be a bug with traceur as it uses a hoisted var for the class declaration instead of block scope)


With the proposed class field syntax, it will also be possible to write a single expression or declaration:

class A {
    …
    static B = class {
         …
    }
};

Solution 2 - Javascript

You could use a getter:

class Huffman {
  constructor() { /* ... */ }
  static get Node() {
    return class Node {
      constructor() {  
        var API = this;
        API.symbol = 0; API.weight = 0;
        return API;    
      }
    };
  }
  get Node() {
    return Huffman.Node;
  }
  encode() { /* ... */ }
  decode() { /* ... */ }
  /* ... */
}

// usage
huffman = new Huffman;
new huffman.Node;
new Huffman.Node;

Which in latest Chrome Dev 44.0.2376.0 on Apple 10.10.2 gives in console

  • new huffman.Node
  • Node {symbol: 0, weight: 0}
  • new Huffman.Node
  • Node {symbol: 0, weight: 0}

In other news, getters are the secret sauce that let's you do a whole bunch of cool things in ES6.

Please Note The above construction breaks instanceof for Node (why? because a whole new class is defined with every get call). To not break instanceof define Node outside of the scope of a single getter, either in the constructor (disabling the Huffman.Node class property and causing instanceof to work within the namespace of a single Huffman instance, and break outside that), or define Node in a sibling or ancestor scope to Huffman (allowing instanceof to work in all scopes below that the one where Node is defined).

Solution 3 - Javascript

something like that?

class A {
    constructor () {
        this.B = class {
            echo () {
                console.log('I am B class');
            }
        }
    }
    echo () {
        this.b = new this.B;
        this.b.echo();
    }
}

var a = new A;

a.echo();

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser5321531View Question on Stackoverflow
Solution 1 - JavascriptBergiView Answer on Stackoverflow
Solution 2 - Javascriptuser2530580View Answer on Stackoverflow
Solution 3 - JavascriptAmmatwainView Answer on Stackoverflow