javascript - 谷歌浏览器片段 : Identifier '...' has already been declared

Question

我正在使用 Google Chrome 的代码片段(在 Dev Tools 中)进行一些 JS 开发和测试。

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

Uncaught SyntaxError: Identifier 'Foo' has already been declared at...

第一次运行后。

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

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

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

但是当我这样做时，虽然代码运行没有错误，但 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'

如您所见，我对类(class)所做的编辑没有生效。

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

查看幕后情况并查看 Google Chrome 正在做什么的一种方法是在代码中引入一个故意的错误，然后单击 Chrome 在控制台中显示的错误源。在那里你会看到类的代码仍然是旧的，根本没有改变，而 block 范围之外的代码是最新的。

我总是可以关闭我正在使用的选项卡并再次打开它，但这不切实际。

我做错了什么？

有没有一种合理的方法可以使用代码片段进行此类测试？

希望这是有道理的!

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'
}