混合功能和const/让内部条件语句在Safari中引起Reference Error

Question

有类似的东西

if(true) {
    const a = 1;
    function myFunc() {
        alert(a);
    }

    myFunc();
}

我们在Safari 11中

。相同的代码在Chrome和Firefox中无错误地工作。

在Safari中使用“严格模式”解决了问题。

我认为主要问题是const 和功能myFunc的不同范围。实际上，最后一个是一个全局函数，因为条件语句不会为其内部函数创建块范围（我想出于遗产原因），就像let and and const一样。

我想知道Safari在这种情况下是否正确，因为我们正在以不同的范围进行混合。

是否有一些官方资源来解释此案？我没有在Caniuse和Mdn站点中提及此事。

Answer 1

块内部的功能声明在规范中未定义多年，但由不同的JavaScript引擎允许。

由于该语法未在规范中定义，并且由JavaScript引擎允许，因此不同的引擎做了不同的事情。有些使其成为语法错误，而另一些则将其作为函数范围的函数声明处理，因为它们是函数表达式。一些引擎在块范围中处理了功能声明，例如同一范围中的多个提起的声明。

从ES2015开始，功能声明是规范的一部分，有两种方式处理：

• 标准Web Spentics
• Legacy Web Sentics

标准语义

具有标准语义，功能声明转换为功能表达式，用Let声明关键字，并悬挂在块的顶部。标准语义在严格的模式下有效。

因此，在严格的模式下，您的代码将被JavaScript引擎处理好，就好像是这样写的：

if(true) {
    let myFunc = function() {
       alert(a);
    }

    const a = 1;
    myFunc();
}

传统Web语义

在浏览器上以非图片模式的 ，旧网络语义语义适用。当块范围中的函数声明不被视为语法错误时，会有三个方案通过所有主要的JavaScript引擎都以相同的方式处理。这三种情况是：

1. 在一个块中声明并引用函数
2. 一个函数在一个块中被声明并可能使用，但也由不包含在同一块中的内部函数定义引用。
3. 声明了一个函数并可能在一个块中使用，但也在其中引用
   随后的块。

除了LET用于块范围中定义的函数的变量外，在包含函数范围或全局范围中，还使用var定义了一个变量。此var分配不会悬挂到块的顶部，并且在代码中达到函数声明时完成。

JavaScript引擎将您的代码在非图案模式中处理为：

var varMyFunc;

if(true) {
    let myFunc = function() {
       alert(a);
    }

    const a = 1;

    varMyFunc = myFunc;    // at the place of function declaration
   
    myFunc();
}

---

您不应编写依赖旧网络语义的代码。相反，使用严格的模式来确保您的代码依赖于标准规则来处理块范围内的处理功能声明。说了这一切，如果您在非图案模式下具有依赖旧网络语义的非图案模式的旧代码，则可以期望它可以使用跨浏览器。