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 后记录它们，它们将记录正确的值。