Question

我试图理解这个javascript代码：

  onMouseMoved = (function(_this) {
    return function(event) {
      dx = (event.pageX/3) / window.innerWidth;
      dy = (event.pageY/3) / window.innerHeight;
      return tr = Math.atan2(hy, hx);
    };
  })(this);
  window.addEventListener('mousemove', onMouseMoved, false);

为什么外部函数返回一个函数，事件变量来自哪里？

Answer 1

为什么外部函数返回一个函数

由于：

（a）它在函数表达式

前面有一个return语句

和

（b）返回的函数用作函数的参数，该函数期望参数为函数

事件变量来自哪里

从实现事件侦听器例程的本机浏览器代码（根据addEventListener的{{3}}）

Answer 2

第一个函数是立即调用的函数表达式（IIFE），它立即执行并返回另一个设置为事件处理程序回调的函数。

它也可以这样写成

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

function onMouseMoved(event) {
    dx = (event.pageX/3) / window.innerWidth;
    dy = (event.pageY/3) / window.innerHeight;
    return tr = Math.atan2(hy, hx);
};

或者

window.addEventListener('mousemove', function(event) {
    dx = (event.pageX/3) / window.innerWidth;
    dy = (event.pageY/3) / window.innerHeight;
    return tr = Math.atan2(hy, hx);
}, false);

这将是完全相同的，但我们不会有_this的值，这似乎是IIFE的原因，锁定this的外部值，但是函数参数从未使用过，因此它似乎不是必需的。

因此，事件参数来自本地addEventListener

有关IIFE如何工作的详细说明，请参阅此 Why do you need to invoke an anonymous function on the same line?

事件变量来自哪里？

2 个答案: