回调函数可以是一个存储属性的对象吗？

Question

以下测试代码正常工作。 mousemove事件触发checkPosition函数，该函数将鼠标位置存储在对象mousePosition中。

"use strict";

const mousePosition = {
    x: 0,
    y: 0
}

function checkPosition(e) {
    mousePosition.x = e.clientX;
    mousePosition.y = e.clientY;
}
    
addEventListener("mousemove", checkPosition);
addEventListener("click", () => console.log(mousePosition) );

但是，如果可能的话，我想简化这个。有没有办法将鼠标位置存储在回调函数中？我尝试了一些不同的方法，但我没有运气。

下面的代码不起作用，但希望它显示我想要完成的任务。我知道我的语法必须搞砸但我不知道如何构建它。非常感谢！

"use strict";

const mousePosition = (e) => {
    x: e.clientX,
    y: e.clientY
};
    
addEventListener("mousemove", mousePosition);
addEventListener("click", () => console.log(mousePosition.x, mousePosition.y) );

Answer 1

您可以使用命名函数来访问函数自己的对象：

"use strict";

const mousePosition = function f(e) {
  f.x = e.clientX;
  f.y = e.clientY;
};

addEventListener("mousemove", mousePosition);
addEventListener("click", () => console.log(mousePosition.x, mousePosition.y));

在f函数内部使用函数的本地名称mousePosition是必要的，以确保属性存储在给定函数中，无论其他一些代码是否用其他东西替换外部变量mouseFunction。

[尽管const应该阻止这种情况，但从该对象中引用对象的外部名称仍然不是一种好的做法]

在ES5之前的代码中，您可以使用arguments.callee.<property>但严格模式禁止使用。

Answer 2

您可以通过动态添加x和y属性来实现，如下所示：

"use strict";

const mousePosition = (e) => {
  mousePosition.x = e.clientX;
  mousePosition.y = e.clientY;
};

addEventListener("mousemove", mousePosition);
addEventListener("click", () => console.log(mousePosition.x, mousePosition.y));