javascript - 添加了变量值但数组没有被推送

Question

为什么值被添加但数组没有被推送？

我想，如果我在函数之后添加 window.load 就可以了。我知道当它最初被解析时，函数没有运行但是，在这种情况下我在窗口加载后很快调用函数。

无论如何，为什么变量获取的是值而不是数组？我真的在以愚蠢的方式使用 window.load 吗？在这里学习。

window.load = foo(); //works if I declare this after the function

var barr = [],
    max, min;

function foo() {
    var a = 10,
        b = 30;

    barr.push("asfd");
    min = Math.min(a, b);
    max = Math.max(a, b);
    console.log(barr); // IDK what does this log, DevTool just throws error straight away
};

console.log(barr); // logs empty array [] as initially declared
console.log(min); // logs 10 on global scope
console.log(max); // logs 30 on global scope

Answer 1

将 window.onload = foo(); 更改为

window.onload = foo;

在这里使用foo() 将立即调用该函数并将返回值分配给onload 回调。因此，在声明任何变量之前调用 foo。当您使用 foo 将函数分配给 onload 事件时，将传递 foo 的函数引用。

此外，我建议您使用 DOMContentLoaded 事件而不是 onload，因为 onload 将在页面上的所有资源加载完毕时触发已完全加载，这将花费太长时间。

在引用函数之前定义函数被认为是一种很好的做法。当函数声明(function fnName())被提升到顶部时，它就会起作用。但是如果函数是使用函数表达式语法(var fnName = function() {...)创建的，则会抛出错误。

var barr = [],
  max, min;

function foo() {
  var a = 10,
    b = 30;

  barr.push("asfd");
  min = Math.min(a, b);
  max = Math.max(a, b);
  console.log(barr); // ["asfd"]
};

window.onload = foo;
// document.addEventListener('DOMContentLoaded', foo, false);

console.log(barr); // logs empty array [] as initially declared
console.log(min); // logs undefined
console.log(max); // logs undefined

---

这里还有一件事要注意，变量 min 和 max 将是 undefined，因为它们没有被赋值。如果您在执行 foo 后记录它们，它们将记录正确的值。