如何在控制台中重新定义 JavaScript（不是 CSS）类？

Question

我对 JS 类还很陌生，主要从事后端工作。

我在玩新的 JS 类，所以我开始浏览这里的示例： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

我去了 chrome (chromium) 开发者工具控制台，我写了 Polygon class：

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

然后我想根据包含方法的示例重新定义class，所以我写了：

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

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

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

这会引发错误： Uncaught SyntaxError: Identifier 'Polygon' has already been declared(…)

现在我知道 ES6 中有一个新的作用域，并且类自动使用新的作用域等等......但实际上，我如何重新定义我的 class？ :D

我通常写 Python，所以我习惯于能够重新定义我想要的一切。

Answer 1

块范围声明（ let ， const ， class ）无法重新声明。

类表达式和var可用于在控制台中重用和重新声明变量：

var Polygon = class Polygon  { ... };
new Polygon();
var Polygon = class Polygon  { ... };
new Polygon();

Answer 2

没有任何答案提供解决方案而不改变原始代码......所以这里是精炼的解决方案。

如果在代码中你有这样的东西：

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

那么这意味着你已经创建了一个名为Polygon的let变量。 您无法重新声明Polygon ，但您可以重新分配它。

因此，如果您需要在JS控制台中进行实验，那么：

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

这将取代原来的类，但不会违反let限制。

您可以通过在控制台中粘贴上面的代码来尝试这一点，然后尝试new Polygon(1,2) 。

Answer 3

我使用的是Chrome 54.0.2840.71（64位），虽然我可以打开控制台并声明一个新类，但我无法重新定义一个类（你会得到错误： VM272:1 Uncaught SyntaxError: Identifier 'Thing' has already been declared ，因为我试图重新定义我的类Thing ）。

如果您只是想稍后在类中添加方法，可以将它们添加到类的prototype ：

Polygon.prototype.area = function() {
  // do some stuff
}

但是，在这种情况下，它不会像你的例子那样是一个getter方法。

编辑

要解决语法错误，如果您只是将类重新分配为变量，它应该执行您想要的操作：

// in your original code

var Polygon = class{}

// in the console

var Polygon = class {
  // with new stuff
}

Answer 4

好的，

所以现在我所有的 class 文件都是这样开始的：

 if(typeof(someClass)== undefined){ class someClass{} } someClass= class{ constructor(){ console.log(typeof(someClass)); } } const newobject= new someClass();

块引用