为什么 setTimeout 函数中的变量无法使用 = || 正确访问 window.global

Question

这是代码：window.test1 = 'Jack';setInterval(function(){  console.log(test1); // Works fine, expect output: "Jack"}, 2000);刷新窗口并输入：window.test1 = 'Jack';setInterval(function(){  var test1 = test1 || [];  console.log(test1); // Works bad, get [] instead of "Jack"}, 2000);为什么会这样？

Answer 1

为什么会这样？

这是因为变量提升

所以这

window.test1 = 'Jack';

setInterval(function(){

  var test1 = test1 || [];

  console.log(test1); // Works bad, get [] instead of "Jack"

}, 2000);

实际上是这个

window.test1 = 'Jack';

setInterval(function(){

  // declaring local variable test1 and it has no value so it holds `undefined`

  var test1;

  // so now you gett [] instead because the variable test1 is falsy `undefined`

  test1 = test1 || [];

  console.log(test1); // Works bad, get [] instead of "Jack"

}, 2000);

Answer 2

test1发生这种情况是因为您在函数和变量提升中声明了变量。使用您的示例和修改后的版本，我们可以看到第一个超时函数显示的结果与我们预期的结果相同，避免此问题的一种方法是第二个超时函数中的示例（使用不同的变量描述符）：

window.test1 = 'Jack';

setTimeout(function() {

  var test1 = test1 || [];

  console.log('timeoutFunction1', test1); // Works bad, get [] instead of "Jack"

}, 2000);

setTimeout(function() {

  var test2 = test1 || []; // Works fine since we're not declaring `test1` in this function

  console.log('timeoutFunction2', test2);

}, 3000);