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

根据评论，听起来解决方案是将整个代码片段都用大括号括起来。

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