使用 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

当您使用 as 语句时reportWindowSize()， this 的作用是调用该函数reportWindowSize。调用后，它返回一些值，在本例中为undefined。所以，window.onresize将被赋值undefined。

现在，我们来谈谈window.onresize。它是一个事件处理程序，当某些事件发生时（在本例中是窗口大小更改时）会被触发。有关事件的更多信息：事件 API。

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

一些可能有用的资源：

• JavaScript 中的函数
• 一流的功能