javascript - 使用添加的括号调用函数时函数不运行(即使它不需要参数)

Question

这是我的函数，用于提醒我 body 标记的 childNodes 的数量。

    function countBodyChildren() {
      var body_element = document.getElementsByTagName("body")[0];
      alert(body_element.childNodes.length);
}

 window.onload = countBodyChildren;

该函数运行良好，但是当我将 () 添加到函数名称的末尾时，即 window.onload = countBodyChildren(); 函数不运行。为什么是这样？我想调用函数，即使它们不需要任何参数，你总是将 () 添加到它的名称的末尾。

Answer 1

I thought to call functions, even if they don't need any parameters, you always add the () to the end of its name.

您的想法是正确的。但是在这里，您不想调用该函数；您想告诉浏览器在适当的时候调用哪个函数。

添加括号后，您将立即调用该函数(不是在加载时)。函数执行；尝试查找 body 元素，但尚未加载任何元素；所以你的 body_element 最终变成了 undefined。您在 undefined 上查找 childNodes，并得到一个错误。 window.onload 分配不会发生。

即使你的函数没有抛出错误，它也会返回undefined，所以window.onload变成undefined，所以什么也不会发生当页面最终加载时。

相反，您需要开始思考函数只是另一种值。当你说

function a() {
  // ...
}

与此相同:

a = function() {
  // ...
};

(其实还是有区别的，重要的区别，但是暂时不相关；当你掌握了基础知识时再去查查)。函数现在“包含”在变量 a 中。然后你可以这样做:

var b = a;
b();

它会起作用——你将 a(你的函数)中的任何内容放入变量 b，然后通过调用它的新名称来执行它(因为现在 a 和 b 指的是同一个函数)。同理，经过

window.onload = countBodyChildren;

window 对象的 onload 属性现在包含您的函数。加载完成后，浏览器将执行其中的任何内容。

你有一个过早执行的案例。