两个不同的javascript事件如何不同地对待此函数？

Question

我有以下javascript函数：

  onMouseMoved = (function(_this) {
    console.log(_this)
    return function(event) {

      console.log(event)
      return;
    };
  })(this);

mousemove事件触发器

如果添加此侦听器：

  document.addEventListener('mousemove', onMouseMoved, false);

触发console.log(event)但不会触发console.log(_this)

但是，如果我添加此侦听器：

  document.addEventListener('mouseenter', onMouseMoved, false);

相反，为什么呢？

Answer 1

您不是在事件处理程序中调用console.log(this) ，而是在立即调用它。 这是立即调用的函数表达式，即IIFE。 它执行并返回分配给onMouseMoved的函数。

  onMouseMoved = (function(_this) {
    console.log(_this)
    return function(event) {

      console.log(event)
      return;
    };
  })(this);

  // console.log(_this) has already bee called at this point
  // onMouseMoved has been set to the returned function:
  //
  // function(event) {
  //   console.log(event)
  //   return;
  // };

  document.addEventListener('mousemove', onMouseMoved, false);

  document.addEventListener('mousemove', onMouseMoved, false);

Answer 2

该console.log(_this)仅在首次实例化onMouseMoved时被调用。

这onMouseMove被定义为它与值立即调用的函数this （可能是函数的范围，原因）。 _this控制台日志不在其事件处理功能内，因此不会在事件上调用它。