Google Chrome 片段：标识符“...”已声明

Question

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

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

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'

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

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

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

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

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

到目前为止一切正常。

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

{
    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 显示在控制台中。在那里你会看到 class 的代码仍然是旧的，根本没有改变，而块范围之外的代码是最新的。

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

我做错了什么？

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

希望这是有道理的！

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

Google Chrome 片段：标识符“...”已声明

Google Chrome Snippets: Identifier '...' has already been declared

javascript

google-chrome-devtools

ecmascript-6

es6-class