Когда именно требуется скобка при выполнении функции

Question

Я новичок в JavaScript и хотел бы кое-что понять о функциях.Почему при вызове функции для запуска обычно нужно заканчивать круглой скобкой (), а если нет, то она просто отображает содержимое функции.Но при привязке слушателя события к элементу нельзя использовать круглые скобки при вызове функции, и если они используются, он будет запущен, как только страница загрузится.(то же самое верно при использовании функции setTimeout или SetInterval).

Answer 1

Я думаю, это потому, что когда вы определяете функцию, вы можете передавать ей некоторые параметры, такие как

const isUserValid = (username, password) => {
  for (i = 0; i < database.length; i++) {
    if (database[i].username === username && database[i].password === password) {
      return true;
    }
  }
  return false;
}

, и это верно для случаев, когда вы хотите выполнить функцию.Но когда вы добавляете прослушиватель событий, вы автоматически вызываете функцию для выполнения (т.е. щелчок)

Answer 2

На самом деле все довольно просто, когда вы понимаете, что в JavaScript функции - это данные, а также единицы вызываемого кода.Это означает, что вы можете передавать их, как если бы вы передавали число 10 или строку "test".

• Когда вызывает функция, вы должны включить круглые скобки.

  foo(); // Invokes the foo function

• Когда ссылается на функцию (какданные, которые будут использоваться где-то), вы не делаете.Обратные вызовы событий являются примерами ссылок на функции.В следующем примере строка "click" и функция foo передаются в качестве аргументов (данных) методу .addEventListener() некоторого элемента.Для этого элемента теперь foo будет зарегистрировано как функция обратного вызова для вызова, если / когда происходит событие click этого элемента.Мы не хотим вызывать foo прямо сейчас, мы просто хотим, чтобы элемент знал, какую функцию возможно вызвать позже.

  element.addEventListener("click", foo); // References foo as the click event callback

  • Теперь все можетнемного сложнее, потому что функции могут возвращать значение, когда они выполнены, и это значение (данные) также может быть другой функцией.В этих случаях мы хотим вызвать функцию, чтобы получить функцию, которую она возвращает (в виде данных):

function returnAfunction(){
  // When this function is invoked, it will return
  // (as data) another function:
  return function(){
    console.log("You did it!");
  };
}

// Here, notice that the second argument does have parenthesis after it.
// This is because we want the function to run right now and whatever its
// returned value is will then become the actual event callback for the
// button element.
document.querySelector("button").addEventListener("click", returnAfunction());

<button type="button">Click me!</button>