I have been experimenting with ES6 classes and am wondering if you can change class names dynamically? For example
class [Some dynamic name] {};
Join Stack Overflow to learn, share knowledge, and build your career.
I have been experimenting with ES6 classes and am wondering if you can change class names dynamically? For example
class [Some dynamic name] {};
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.
.name
is now someName
.
– Bergi
Nov 9 '15 at 15:28
class
value of course).
– Felix Kling
May 14 '16 at 15:13
let C = class
{ // ...
}
Object.defineProperty (C, 'name', {value: 'TheName'});
// test:
let itsName = (new C()).constructor.name;
// itsName === 'TheName' -> true
Object.defineProperty(C, 'name', ...)
works while C.name = ...
throws Script Error: "name" is read-only
(at least in Firefox).
– Wiktor Tomczak
Feb 21 '18 at 16:42
Object.defineProperty()
supposed to allow modification of read-only properties, or is that just an implementation quirk that's not supposed to be there?
– David Given
Mar 20 '19 at 22:22
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];
static create = (args) => new this(args);
In such case the name will be "_class"
– pPanda_beta
Oct 26 '20 at 16:12
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 }
}
}
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"
}()
Function
this way is also eval
and carries the same risks.
– eyelidlessness
May 12 '18 at 19:01
Function
or eval
. It isn't a problem if you own the code your sticking in there (f.e. the code string is generated in the same scope as the Function
or eval
, with no input from the outside).
– trusktr
May 16 '18 at 20:19
Function
or eval
. It isn't a problem if you own the code your sticking in there (f.e. the code string is generated in the same scope as the Function
or eval
, with no input from the outside). As you can see in my example, the strings are generated in-place, which is completely safe (and assuming my code is inside a module, it is impossible for variables to be modified from the outside).
– trusktr
May 16 '18 at 20:20
eval
. I strongly encourage you to add a warning to that effect.
– eyelidlessness
May 17 '18 at 19:08
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]()
Function
constructor and use the prototype as you would have in ES5. Or use a task running like Gulp/Grunt to generate the classes pre-build – CodingIntrigue Nov 9 '15 at 10:12let tmp = { [name](){} };
and to access that named functiono[name]
. Would be cool if we could do that with classes:let o = { class [name] {} }
. – trusktr Jul 14 '16 at 2:28