Safari iOS ReferenceError: Can’t find variable: xxx

掘金没有故记录之。

问题

以下代码有什么问题(注意在没有打包工具的环境下)?

{
  const bar1 = 1

  function foo1() {
    console.log('bar1', bar1)
  }

  foo1();
}
答案:点击展开

Safari 或 iOS 移动端将报错『ReferenceError: Can’t find variable: bar1』。其他浏览器正常。

为什么报错?

如果是下面这样倒还能理解,但是我们已经将 bar1 的定义放到了函数调用甚至申明之前为什么还是报错?

{
  function foo1() {
    console.log('bar1', bar1);
  }

  foo1();

  const bar1 = 1;
}

正式解答:
Safari 特有的兼容性问题,非严格模式下,各个浏览器实现各自不同,因为标准并没有规定(different browsers implemented it differently in non-strict mode)。

Safari 实现:

大括号生成块级作用域,bar1 变成局部变量,而在非严格模式下函数 foo1 是全局函数,故执行时找不到局部变量 bar1。相当于将函数 foo1 挪到了顶部。等价于:

function foo2() {
  console.log('bar2', bar2);
}

{
  const bar2 = 1;

  foo2();
}

自然报错。

Chrome 实现

等价于:

var foo1; // 意味着 globalThis.foo1 = undefined;

{
  const bar1 = 1

  foo1 = function () {
    console.log('bar1', bar1)
  }
  
  // 意味着 globalThis.foo1 = foo1

  foo1();
}

你可以尝试在 Safari、Chrome、Node.js 运行下面代码,验证我们的猜想是否正确:

console.log('above scope foo1:', foo1, typeof foo1, 'foo1' in globalThis);

{
  const bar1 = 1

  function foo1() {
    console.log('bar1', bar1)
  }

  foo1();
}

console.log('below scope foo1:', foo1, typeof foo1, 'foo1' in globalThis);

Safari

Safari iOS ReferenceError: Can't find variable: xxx

above scope foo1: 
function foo1() { console.log('bar1', bar1); }
"function"
true

[Error] ReferenceError: Can't find variable: bar1

Chrome

Safari iOS ReferenceError: Can't find variable: xxx

above scope foo1: undefined undefined true
bar1 1
below scope foo1: ƒ foo1() {
    console.log('bar1', bar1);
  } function true
bar1 1

Node.js

❯ node reference-error-ios.js

above scope foo1: undefined undefined false
bar1 1
below scope foo1: [Function: foo1] function false
bar1 1

但是有个怪异的地方,Node.js 和 Chrome 应该要一样,但是实际行为有少许不同:

'foo1' in globalThis Chrome 是 true,Node.js 是 false(各位有知道答案的吗?)改成 foo1 in globalThis 倒是变成 true 了,但是不对呀 in 的操作符应该是字符串。

验证字符串才是正确的 Chrome 验证:
Safari iOS ReferenceError: Can't find variable: xxx

如何解决

既然是作用域导致的报错,可以从作用域解决。

方法 1:去除大括号。让报错的变量也变成全局作用域

const bar1 = 1

function foo1() {
console.log('bar1', bar1)
}

foo1();

但显然我们本意是利用 {} 大括号的块级作用域让变量不泄露到全局,故该方案并不是最佳的。

方法 2:将 const bar1 = 1 挪到括号外面的顶部。

和方法 1 同理,但好在保留了其他变量不被泄露,也不是最佳解决方案。

方法 3:使用 var

和方法 2 同理。

方法 4:IIFE

利用 IIFE 构造一个函数作用域,能保证变量不泄露。

(function () {
  const bar1 = 1;

  function foo1() {
    console.log('bar1', bar1);
  }

  foo1();
})();

在 ES6 之前我们的最佳实践确实如此,但写起来太费劲了。

方法 5:use strict

开启严格模式

'use strict';

{
  const bar1 = 1;

  function foo1() {
    console.log('bar1', bar1);
  }

  foo1();
}

还有一个问题,开启严格模式,是否可以把最外层的 {} 去掉?

答案:不能。如果去除,如果有同名的 bar1 则报错 cannot re-declare bar1

总结

严格模式 + {} 块级作用域才是最佳实践。

最后一个问题,为什么日常工作中,我们即使不写 use strict 也不会遇到这种问题?因为我们有打包工具(webpack)会自动在我们的代码顶部增加 use strict 指令,以及将编译后的代码用 IIFE 打包成一个个 module(即模块化)。

原文链接:https://juejin.cn/post/7359083767556964386 作者:Legend80s

(0)
上一篇 2024年4月18日 下午4:10
下一篇 2024年4月18日 下午4:20

相关推荐

发表回复

登录后才能评论