JavaScript - 使用或不使用括号调用函数

Question

这个问题已经有答案了:

In JavaScript, does it make a difference if I call a function with parentheses? (5 个回答)

已关闭 10 年前。

采用以下代码:

HTML

<button id="button>click me</button>

JS - 版本 1

window.onload = init;

function init() {
    console.log('init called');
    var button = document.getElementById('button');
    button.onclick = buttonClickHandler;
}

function buttonClickHandler() {
    console.log('button clicked');
}

与相同的 HTML

JS - 版本 2

window.onload = init();

在这两种情况下，“init called”都会“立即”出现在控制台中，但在第二种情况下，后面会出现一个错误，指出按钮为空。

这里有两件事在起作用。 1) 在版本 1 中，它等待 DOM 加载 2) 在版本 2 中，它发生在 DOM 加载之前，或者看起来是这样。

我的问题。请尽可能清楚地解释版本 1 中发生的情况与版本 2 中发生的情况。window.onload = init 的技术术语是什么？是 vs 什么 window.onload = init()是？另请解释每个版本的行为。为什么 1 等待，而 2 不等待？

脚本需要位于按钮元素之前，例如在头部:http://jsfiddle.net/XMEjr/1/

Answer 1

版本 1 将 init 函数设置为在 window.onload 事件上调用的函数。该函数不会在该行被调用；它只是被分配(作为一个值)给一个属性。

版本 2 将 init 函数的结果设置为在 window.onload 事件上调用的结果。这就是 () 造成的差异。

显然，init 函数在触发 onload 之前被调用(以获取该结果并将其设置为 onload 处理程序)。因此函数启动时，无法通过 button id 找到元素(因为 DOM 尚未准备好)，因此 getElementById 返回 null。然后尝试访问 null 的 onclick 属性会导致错误停止。