Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to redefine JavaScript (NOT CSS) classes, in the console?

I'm fairly new to JS classes, and am doing mostly back-end work.

I was playing around with the new JS classes and so I started going through the examples here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

I went to the chrome (chromium) developer tools console and I wrote the Polygon class:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Then I wanted to redefine the class, according to the example containing the methods, so I wrote:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

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

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

This raises an error: Uncaught SyntaxError: Identifier 'Polygon' has already been declared(…)

Now I understand there's a new scoping in ES6, and that classes automatically use the new scoping and so on... but really, how do I redefine my class? :D

I'm writing Python usually, so I'm used being able to redefine everything I want.

like image 304
vlad-ardelean Avatar asked Nov 07 '16 17:11

vlad-ardelean


1 Answers

None of the answers provide a solution without changing original code... So here is refined solution.

If in code you have something like this:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Then this means you've created a let variable named Polygon. You cannot redeclare Polygon, but you can reassign it.

So if you need to experiment in e.g. JS console just do:

Polygon = class {
  //... new stuff here
}

This will replace the original class but will not violate let restrictions.

You can try this out by pasting above code in the console, and then try new Polygon(1,2).

like image 80
Nux Avatar answered Sep 20 '22 10:09

Nux