Javascript creating class object from string

Question

Say I had a class defined within a string like the following:

`class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  
  get area() {
    return this.calcArea();
  }

  calcArea() {
    return this.height * this.width;
  }
}`

Is it possible to turn the string into a javascript class so I could run the following? Or similar..

const square = new Rectangle(10, 10);
console.log(square.area);

You can do exactly what you want if you just omit the quotation marks. — Rob, Aug 17 '17 at 10:36

score 2 · Answer 1 · answered Aug 17 '17 at 11:33

Looks like a duplicate of this : Using eval method to get class from string in Firefox

Don't forget to put class between parentheses.

var class_str = `(class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  get area() {
    return this.calcArea();
  }

  calcArea() {
    return this.height * this.width;
  }
})`;
var a = eval(class_str);
console.log(new a(10, 10));

A working demo here: http://jsbin.com/netipuluki/edit?js,console

Lajos Arpad · Accepted Answer · 2017-08-17T11:16:00.950

1

You can turn a string into a class if you pass it to eval, like this:

eval("function MyClass(params) {/*Some code*/}");
var foo = new MyClass({a: 1, b: 2});

EDIT:

Based on comments I found out that the syntax shown in the question is ok, but it seems to be incompatible with eval as it is. However, doing some experiments I found the following trick:

eval("window['Rectangle'] = class Rectangle {constructor(height, width) {this.height = height;this.width = width;}get area() {return this.calcArea();}calcArea() {return this.height * this.width;}}");

var r = new Rectangle(50, 40);

edited Aug 17 '17 at 11:16

answered Aug 17 '17 at 10:41

Lajos Arpad

64,414
37
100
175

1

It is valid syntax - see `prototype methods` section https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes – StudioTime Aug 17 '17 at 10:47
Great, but I doesn't look like that works with class declarations. Might be able to work around with functions though... – Ryan King Aug 17 '17 at 10:49
1

The syntax is perfectly fine – Lennholm Aug 17 '17 at 10:52
@DarrenSweeney indeed, I was wrong from that point of view, I have edited the answer. – Lajos Arpad Aug 17 '17 at 11:16
@RyanKing yes, it just evaluated it and later it could not be used. However, I found a trick, which is a methodology you could achieve what you want with minimal changes. – Lajos Arpad Aug 17 '17 at 11:17
Interesting, thanks @LajosArpad, it does the trick! Although I feel Badis Merabet's response has a slightly cleaner approach. – Ryan King Aug 17 '17 at 13:29
@RyanKing, you are welcome. The other answer's approach is almost the same as mine, the difference is that the other approach renamed your class. – Lajos Arpad Aug 17 '17 at 18:27
@ Ryan King, @LajosArpad, the difference of my answer is not in renaming the class. but in the usage of parentheses around the class instead of adding a keyword "function" or making an assignment of class to "window" array. but that's fine to accept LajosArpad's answer since it solves the issue first :), still it's less elegant. Thanks ! – Badis Merabet Aug 18 '17 at 08:42

Javascript creating class object from string

2 Answers2