JavaScript 代码块有时会引发错误

Question

我正在使用代码块来模拟 C 语言中的静态函数变量。这是基本设置：

{
    let bob = 5;
    function b() {
        console.log(bob++);
    }
}

现在在 chrome 中编译得很好，没有任何抱怨。然而，在 Safari 中，我得到了一个

SyntaxError: Unexpected identifier 'bob'. Expected a ':' following the property name 'let'.

我不知道是什么导致了这种差异，因为 Chrome 和 Safari 都处理 ECMAScript 6。

Answer 1

根据错误消息，Safari 将您的块解释为对象文字。语法是有效的，但 Safari 似乎对此感到窒息。

当我在自己的控制台中尝试此操作时，我能够通过在块之后立即放置一条语句来使其工作：

{ let bob = 5; function b(){ console.log(bob++); } } console.log('foo');

但是，这似乎在没有创建闭包的情况下将函数提升到块范围之外，导致 ReferenceError 声称它找不到变量 bob。

我尝试将其显式包装在一个函数中，并使用 use strict 声明启动该函数，以防它未在 strict mode 中运行，因为这会改变行为：

function strict() {
  'use strict';
  {
    let bob = 5;
    function b() {
      console.log(bob++);
    }
    return b;
  } 
}
strict()();

它成功了！

TL:DR;块处理在松散模式下很奇怪。在块内定义函数时使用严格模式。

Answer 2

问题是代码处于松散模式并且您在块中声明了一个函数。块中的函数声明仅在 ES2015 中标准化，而且，它们在严格模式下有意义，但在松散模式下它们......很奇怪。

在strict mode 中，您的代码可以正常工作，可能与您期望的一样，也可能不正常。 bob 可被b 访问...并且bob 和b 在该块之外都无法访问，除非您采取措施将它们暴露在该块之外。

这是一个示例，您可以使用它在 Safari 和 iOS Safari 上进行测试（我只有后者可用）。这个版本报错：

<script>
window.onerror = e => {
    document.body.insertAdjacentText("beforeend", String(e));
};
</script>
<script>
{
    let bob = 5;
    function b() {
        document.body.insertAdjacentText("beforeend", bob++);
    }

    b();
}
</script>

错误是：

ReferenceError: Can't find variable: bob

此版本有效：

<script>
window.onerror = e => {
    document.body.insertAdjacentText("beforeend", String(e));
};
</script>
<script>
"use strict"; // <============================
{
    let bob = 5;
    function b() {
        document.body.insertAdjacentText("beforeend", bob++);
    }

    b();
}
</script>

我还在最新版本的 JavaScriptCore（Apple 的 JavaScript 引擎）v265499 中复制了该行为。我安装了¹并在本地运行它（将console.log/insertAdjacentText 更改为print，这在大多数原始引擎可执行文件中都可用）并在松散模式下而不是在严格模式下得到相同的错误。

---

如果您希望 b 在街区外可用，您最好执行以下操作：

"use strict";
const b = (() => {
    let bob = 5;
    return function b() {
        console.log(bob++);
    };
})();
b();

这是一个很多笨重，但是...或者，let：

"use strict";
let b;
{
    let bob = 5;
    b = function b() {
        print(bob++);
    };
}
b();

---

¹ 使用非常方便的jsvu utility。