用 functionName() 赋值和直接使用 functionName 有什么区别？

Question

const heightOutput = document.querySelector('#height');
const widthOutput = document.querySelector('#width');

function reportWindowSize() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

window.onresize = reportWindowSize;

为什么不写成 window.onresize = reportWindowSize; ？ 这样可以触发函数，加上 () 就失效了。

- Shachar

---

当你执行 window.onresize = ... 时，你会给它传递一个函数。然后，浏览器会在需要的时候调用它。如果你传递了 reportWindowSize()，那么你传递的是该函数的结果 (undefined)。因此它无法调用任何东西。这就像执行 var result = myFunc(); window.onresize = result; 一样。 - blex

Answer 1

当你有语句 reportWindowSize() 时，它会调用函数 reportWindowSize 并返回一些值，此处为 undefined。因此，window.onresize 将被赋值 undefined。

现在，让我们来谈谈 window.onresize。它是一个事件处理程序，在某些事件发生时触发，例如当窗口大小改变时。更多关于事件的信息请参考：Events API。

这意味着，当窗口大小调整时，一些原生代码将以如下形式调用处理程序 window.onresize()。如果它是 undefined，那么它不会起作用。它必须是一个函数，所以我们要么传递一个函数的引用，这正是你正在做的，要么传递函数值。传递引用不会调用函数，而是将其指向你正在传递的函数。最后，当事件被触发时，函数 reportWindowSize 被调用。

以下是一些可能有用的资源：

- JavaScript 中的函数 - 一等函数

- Subesh Bhandari