调用没有括号的javascript函数

Question

以下renderChat函数用于将消息和图像呈现到聊天板上。 功能内部还有另一个功能

var onComplete = function () {

它完成了创建列表元素并将其附加到聊天列表的所有工作。 在onComplete函数之后，只有这三行代码

  img.onload = onComplete;
  img.onerror = onComplete;
  img.src = c.chat.value.media;

因为var onComplete是一个赋给变量的函数，所以我认为它必须用括号调用。 因此，当我看到这一点

img.onload = onComplete;

我知道该函数已被赋值给一个新变量，但从未被调用过。 然而，当我使用该应用程序时，聊天已经在我们到达img.src = c.chat.value.media;

你能解释一下我对JavaScript的理解是如何被误解的以及这个函数是如何工作的吗？

 var renderChat = function (c) {
    debug("Rendering chat: key='%s' fingerprint='%s' message='%s' created='%s' imageMd5='%s'",
      c.chat.key,
      c.chat.value.fingerprint,
      c.chat.value.message,
      c.chat.value.created,
      md5(c.chat.value.media));
    var renderFP = c.chat.value.fingerprint;

    if (!isMuted(renderFP)) {
      var img = new Image();
      var onComplete = function () {
        // Don't want duplicates and don't want muted messages
        if (body.find('li[data-key="' + c.chat.key + '"]').length === 0 &&
            !isMuted(renderFP)) {

          var li = document.createElement('li');
          li.dataset.action = 'chat-message';
          li.dataset.key = c.chat.key;
          li.dataset.fingerprint = renderFP;
          li.appendChild(img);

          // This is likely your own fingerprint so you don't mute yourself. Unless you're weird.
          if (userId.val() !== renderFP) {
            updateNotificationCount();

            var btn = document.createElement('button');
            btn.textContent = 'mute';
            btn.className = 'mute';
            li.appendChild(btn);
          }

          var message = document.createElement('p');
          message.textContent = c.chat.value.message;
          message.innerHTML = transform(message.innerHTML);
          li.appendChild(message);

          var createdDate = moment(new Date(c.chat.value.created));
          var timestamp = document.createElement('time');
          timestamp.setAttribute('datetime', createdDate.toISOString());
          timestamp.textContent = createdDate.format('LT');
          timestamp.className = 'timestamp';
          li.appendChild(timestamp);

          var size = addChat.is(":visible") ? addChat[0].getBoundingClientRect().bottom : $(window).innerHeight();
          var last = chatList[0].lastChild;
          var bottom = last ? last.getBoundingClientRect().bottom : 0;
          var follow = bottom < size + 50;

          chatList.append(li);
          setupWaypoints(li);
          debug('Appended chat %s', c.chat.key);

          // if scrolled to bottom of window then scroll the new thing into view
          // otherwise, you are reading the history... allow user to scroll up.
          if (follow) {
            var children = chatList.children();
            if (children.length > CHAT_LIMIT) {
              children.first().remove().waypoint('destroy');
            }

            li.scrollIntoView();
          }
        }
      };

      img.onload = onComplete;
      img.onerror = onComplete;
      img.src = c.chat.value.media;
    }
  };

Answer 1

HTMLImageElement对象将导致在适当的时间onload分配给其onload和onerror属性的函数（即，当收到HTTP响应或等待它超时时）。

执行此操作的代码内置于浏览器中。 属性（或更现代代码中的addEventListener函数）是您与该代码交互的唯一方式。

Answer 2

在Javascript中，您可以将函数存储在变量中，这是您使用onComplete() 。 img对象将在成功加载图像（onload）之后执行一个函数（所谓的回调），或者如果它无法加载图像（onerror）。

要告诉img对象在这些事件之后调用哪个方法，你需要给它像这样的方法名称， 不带括号 ：

  img.onload = onComplete;
  img.onerror = onComplete;

如果你会用括号中的功能将被立即执行，并img.onload将不包含引用功能，但onCompleted的结果。

Answer 3

img.onload = onComplete; 将函数 onComplete分配给onload处理程序。 这意味着，当通风口发生时，该功能被调用。

img.onload = onComplete(); 将调用函数 onComplete的结果分配给onload处理程序。 这意味着，函数被立即调用，期望返回另一个函数（或包含有效JS的字符串），而事件发生时将调用该函数。