Question

我正在学习教程 here，但遇到了一些我不完全理解的语法。

我希望每次滚动时，console.log 都会记录“你好”。

function moveCamera() {
  console.log("hello");
}

document.body.onscroll = moveCamera()

function moveCamera() {
  console.log("hello");
}

document.body.onscroll = moveCamera

在第一个示例中，console.log("hello") 运行一次，但以后再也不会运行了，无论我如何滚动。

在第二个示例中，代码运行并在每次滚动时记录“hello”。

我知道对于第二个例子，moveCamera 传递了一个函数的副本，创建了一个看起来像这样的函数：

document.body.onscroll = function () {
  console.log("Hello");
}

但是，我仍然不明白为什么用括号调用 moveCamera() 不起作用并产生不需要的功能。

编辑：我设计了一种非常简单的方法来理解何时使用括号以及何时不使用。我把它放在这里，因为我的问题被标记为重复。

不带括号的例子

// Example 1: If you are assigning, use reference
document.body.onscroll = moveCamera;
// Example 2: If you are event listening, use reference
document.body.addEventListener("scroll", moveCamera);

带括号的例子

// Example 1: If you are executing on a single line alone, use call.
...
moveCamera()
...
// Example 2: If you want to repeatedly call this function, 
// like I did in my example, use a loop or an animate() function.
// @note this is a THREE.js specific example
function animate() {
  requestAnimationFrame(animate);
  moveCamera()
  renderer.render(scene,camera);
}

Answer 1

你应该在函数中放置一个字符串。不是函数本身，因为无论函数返回什么，它都会返回。另外，我建议使用 setAttribute() 函数：

document.body.setAttribute("onscroll", "moveCamera()");

假设你有这个函数，用 moveCamera() 不加引号：

function moveCamera() {
  return "console.log('Hello')";
}

document.body.setAttribute("onscroll", moveCamera());

body {
  height: 200vh;
}

<body></body>

使用带引号的 moveCamera() 作为字符串：

function moveCamera() {
  console.log("Hello");
}

document.body.setAttribute("onscroll", "moveCamera()");

body {
  height: 200vh;
}

<body></body>

Answer 2

如果您调用 moveCamera，您将分配 moveCamera 函数返回的值，而不是函数本身。

以下示例说明了这一点：

function a(){
  return "b";
}
var a = a;
var b = a();

console.log("a = "+a);
console.log("b = "+b);

何时调用带括号和不带括号 () 的函数？

2 个答案: