块级函数在if语句中调用时的跨浏览器行为差异疑问

问题本质 #

你遇到的是不同浏览器对ES6块级函数规则的差异化实现，核心在于非严格模式下块级函数的作用域提升逻辑与闭包捕获行为不一致。

Chrome/Firefox正常输出的原因 #

在非严格模式下，Chrome和Firefox为兼容旧代码做了特殊处理：

• 块内声明的sayHi函数会被提升到全局（或包含它的函数）作用域，所以外部可以直接调用sayHi()；
• 函数是在if块内部创建的，闭包依然能捕获块内的let user变量（let的块级作用域特性保留），因此执行时能读取到user的值，输出"Hello John"。

Safari抛出错误的原因 #

Safari在非严格模式下的实现更贴近ES6早期的严格规范：

• 虽然sayHi函数被提升到外部作用域，但函数的词法作用域被绑定到了外部全局作用域，而非if块的作用域；
• 当执行sayHi()时，会在全局作用域查找user，但user是if块内的let变量，仅在块内有效，因此抛出"ReferenceError: Can't find variable: user"。

标准与浏览器实现的分歧 #

ES6标准明确规定：块级函数的作用域应局限于所在块内，外部访问该函数理应报错。但出于对旧代码的兼容，Chrome和Firefox在非严格模式下放宽了限制，允许外部访问块级函数；而Safari的实现更严格，虽然允许外部访问函数，但不允许函数捕获块内的变量（因为函数作用域被绑定到外部）。

统一跨浏览器行为的方案 #

要让代码在所有浏览器中表现一致，可采用以下两种方式：

• 启用严格模式：在代码顶部添加'use strict';，此时所有浏览器都会遵循ES6标准，外部访问sayHi直接抛出ReferenceError；
• 避免块内声明函数：将函数声明移到块外，或者改用函数表达式（比如const sayHi = () => {...}），明确控制作用域范围。

内容的提问来源于stack exchange，提问作者Simao