使用 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() ？这是函数调用，我想触发它。但是当我添加 () 时它不起作用。

Answer 1

当你有语句 reportWindowSize() 时，它的作用是调用函数 reportWindowSize。调用后，它 returns 一些值，在本例中为 undefined。因此，window.onresize 将被分配值 undefined。

现在，让我们谈谈window.onresize。它是一个被触发的事件处理程序当某些事件发生时，在这种情况下，当 window 大小更改时。有关事件的更多信息：Events API.

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

一些可能有用的资源：

使用 functionName() 和仅使用 functionName 分配变量值有什么区别？

What is the difference between assigning a variable value with functionName() and just functionName?

javascript

debounce