Google Chrome浏览器摘要：标识符“ ...”已声明

Question

我正在使用 Google Chrome浏览器的代码段（在开发工具中）进行一些JS开发和测试。

在声明ES6类时，控制台会抛出一个

  

未捕获的SyntaxError：标识符'Foo'已在...处声明

第一次运行后。

class Foo {
constructor(val) {
        this.bar = val;
    }
}

var f = new Foo('myVal');
console.log(f.bar); // prints 'myVal'

我做了一些研究，发现使用{}将代码包装在块范围内将有助于避免此问题。

但是，当我这样做时，尽管代码运行没有错误，但Chrome无法识别我可能会对代码进行的任何后续编辑。

因此，如果我将上面的代码更改为以下代码：

{
    class Foo {
    constructor(val) {
            this.bar = val;
        }
    }
}

var f = new Foo('myVal');
console.log(f.bar); // prints 'myVal'

到目前为止，一切正常。

现在，我意识到我的课有问题，我将代码更改为以下内容：

{
    class Foo {
    constructor(val) {
            this.bar = 'MyHardcodedVal'; // Here is the changed code
        }
    }
}

var f = new Foo('myVal');
console.log(f.bar); // STILL prints 'myVal'

如您所见，我对班级所做的编辑未生效。

似乎Google Chrome浏览器已将我的代码放入了不受我的编辑影响的沙箱中。

一种在幕后查看Google Chrome在做什么的方法是在代码中引入一个故意的错误，然后单击Chrome在控制台中显示的错误源。在那里，您将看到该类的代码仍然是旧的，并且根本没有更改，而位于块范围之外的代码是最新的。

我总是可以关闭正在使用的标签，然后再次打开它，但这不切实际。

我在做什么错了？

使用片段进行此类测试是否有理智的方法？

希望如此！

Answer 1

基于注释，听起来解决方案是将整个snippet用大括号括起来。

{
  class Foo {
    constructor(val) {
      this.bar = 'MyHardcodedVal'; // Here is the changed code
    }
  }
  var f = new Foo('myVal');
  console.log(f.bar); // STILL prints 'myVal'
}