ES6 Dynamic class names

前端 未结 6 1824
故里飘歌
故里飘歌 2020-11-27 17:45

I have been experimenting with ES6 classes and am wondering if you can change class names dynamically? For example

class [Some dynamic name] {}; 

相关标签:
6条回答
  • 2020-11-27 18:17

    There is probably a better solution for whatever you are trying to achieve, but you can assign a class expression to an object:

    let classes = {};
    classes[someName] = class { ... };
    

    This didn't really change in ES2015: if you want to create a dynamically named binding, you have to use an object or some other mapping instead.

    0 讨论(0)
  • 2020-11-27 18:30

    There is a pretty simple way to do it:

    const nameIt = (name, cls) => ({[name] : class extends cls {}})[name];
    

    Here's the demo.

    It uses an object literal to define a field with a desired name that would hold a new class. This causes the new class to automatically get the desired name. After we're done with that, we extract that new class and return it.

    Note the parens around the object literal, so that curly braces don't get mistaken for a code block (...) => {...}.

    Of course, putting an existing class into named fields won't change the class, so this only works if you are creating a new class. If you only need a dynamic name in one place where you define the class you are naming, you can drop an extra inheritance and just go:

    const myClass = {[name]: class {
        ...
    }}[name];
    
    0 讨论(0)
  • 2020-11-27 18:30

    One way, even if not ideal, is simple with eval:

    ~function() {
        const name = "Lorem"
    
        eval(`
            var ${name} = class ${name} {} 
        `)
    
        console.log(Lorem) // class Lorem {}
    }()
    

    Note, it has to be with var. Using let, const, and plain class inside the eval won't work.

    Another way with Function:

    ~function() {
        const name = "Lorem"
    
        const c = new Function(`
            return class ${name} {}
        `)()
    
        console.log(c) // class Lorem {}
    }()
    

    Sitenote: you can pass scope variables into the Function and use them inside:

    ~function() {
        const name = "Lorem"
        const val = "foo"
    
        const Class = new Function('val', `
            return class ${name} {
                constructor() {
                    console.log( val )
                }
            }
        `)( val )
    
        console.log(Class) // class Lorem {}
        new Class // "foo"
    }()
    
    0 讨论(0)
  • 2020-11-27 18:31

    The example with which I struggled - resolved in the way below:

    const models = {
      route: mongoose.model('Route'),
      company: mongoose.model('Company'),
      ...
    }
    

    and then:

    const name = 'route'
    const record = new models[name]()
    
    0 讨论(0)
  • 2020-11-27 18:33

    To take it a bit further playing with dynamic class names and dynamic inheritance, when using babel you can just do something like this:

        function withname(name, _parent) {
            return class MyDinamicallyNamedClass extends (_parent||Object) {
                static get name() { return name || _parent.name }
            }
        }
    
    0 讨论(0)
  • 2020-11-27 18:34
    let C = class
    { // ...
    }
    Object.defineProperty (C, 'name', {value: 'TheName'});
    
    // test: 
    let itsName =  (new C()).constructor.name;
    // itsName === 'TheName' -> true
    
    0 讨论(0)
提交回复
热议问题