While trying to find a way to use nested classes in JS, I came up with this sort of thing:

class Character {
    constructor() {
        this.Info= class I {
            constructor(name,value) {
                this.name=name;
                this.value=value;   
            }
        };
    }
    bar () {
        var trial = new this.Info("Goofy", 2);
        alert(trial.name);
    }
}

var test = new Character();
test.bar();

and it seems to work. However, I'm afraid this might be creating a new function object for each new call, as I define the class in the constructor (which is executed at each new call). Is there a more efficient way of doing this?

This question does not solve my issue as the author only wonders how to even have a nested class; I'm already able to do that but I wonder if there's a more efficient way.

While trying to find a way to use nested classes in JS, I came up with this sort of thing:

class Character {
    constructor() {
        this.Info= class I {
            constructor(name,value) {
                this.name=name;
                this.value=value;   
            }
        };
    }
    bar () {
        var trial = new this.Info("Goofy", 2);
        alert(trial.name);
    }
}

var test = new Character();
test.bar();

and it seems to work. However, I'm afraid this might be creating a new function object for each new call, as I define the class in the constructor (which is executed at each new call). Is there a more efficient way of doing this?

This question does not solve my issue as the author only wonders how to even have a nested class; I'm already able to do that but I wonder if there's a more efficient way.

• javascript
• class
• oop
• object

• Have you considered creating Info as a static method instead? – RobG Commented Jun 9, 2019 at 0:23
• Nice one, but I guess it would mean falling back to the function syntax? I'd like to be able to use class – memememe Commented Jun 9, 2019 at 0:27
• Possible duplicate of Nested ES6 classes? – filipe Commented Jun 9, 2019 at 0:53
• @filipe I've edited to explain why my question is different – memememe Commented Jun 9, 2019 at 1:05
• So.. the most efficient way is to have it as static using any of the available nomenclature, or then just to not nest it ! – filipe Commented Jun 9, 2019 at 1:23

2 Answers 2

Using a static property in react, angular or just using babel, because direct static class properties are not currently implemented on all browsers.

class Character {

    static Info = class I {
        constructor(name) { this.name=name; }
    }

    bar () {
        return new Character.Info("Goofy");
    }
}

const test = new Character();
console.log(test.bar());

Using a static property the old way -- currently working on all browsers.

class Character {
    bar () { return new Character.Info("Goofy"); }
}

Character.Info = class I {
    constructor(name) { this.name=name; }
}

const test = new Character();
console.log(test.bar());

Maybe the example you've given is too simple to demonstrate whatever problem you're trying to solve, but it seems to me you don't need to nest them at all.

class Info {
  constructor(name, value) {
    this.name = name;
    this.value = value;
  }
}

class Character {
  bar() {
    var trial = new Info("Goofy", 2);
    console.log(trial.name);
  }
}

const test = new Character();
test.bar();