如何解决JavaScript构造函数中绑定本地函数到文档事件失效问题？

你遇到的问题核心在于异步回调的作用域捕获意外，虽然理论上闭包应该能保留HandleMouseMove的引用，但由于你在已经处于DOM ready的上下文里再次嵌套了$(function(){})回调，加上var声明的变量在某些场景下可能出现的作用域混淆，导致回调执行时无法正确获取到函数引用。

下面给你几种可靠的解决方式：

方式一：移除多余的DOM ready嵌套（最简洁） #

你的app.js已经在$(function(){})里实例化F，这说明执行到new F()时DOM已经完全就绪了，所以构造函数里不需要再嵌套$(function(){})，直接同步绑定事件即可：

// f.js
function F() {
    var HandleMouseMove = function (event) {
        console.log('鼠标移动事件触发了！');
        // 你的业务逻辑
    };
    // 直接绑定，无需等待DOM ready
    $(document).mousemove(HandleMouseMove);
}

// app.js
$(function () {
    var f = new F();
});

方式二：将函数挂载到实例对象上（兼容旧环境） #

如果需要保留DOM ready的判断（比如不确定实例化时机），可以把HandleMouseMove绑定到构造函数的实例上，通过保存this的引用来避免作用域丢失：

// f.js
function F() {
    // 将函数挂载到实例
    this.HandleMouseMove = function (event) {
        console.log('鼠标移动事件触发了！');
    };
    // 保存实例引用，避免回调里this指向window
    var self = this;
    $(function () {
        $(document).mousemove(self.HandleMouseMove);
    });
}

// app.js
$(function () {
    var f = new F();
});

方式三：使用ES6箭头函数（现代环境推荐） #

箭头函数会自动捕获外层作用域的变量和this，不会产生作用域混淆的问题：

// f.js
function F() {
    const HandleMouseMove = (event) => {
        console.log('鼠标移动事件触发了！');
    };
    $(function () {
        $(document).mousemove(HandleMouseMove);
    });
}

// app.js
$(function () {
    var f = new F();
});

为什么原代码会失效？ #

你原代码里的$(function(){})是异步执行的回调，虽然闭包理论上能访问HandleMouseMove，但如果你的代码运行环境存在变量提升的意外（比如var声明的变量被其他代码意外覆盖），或者DOM ready回调的执行时序导致构造函数的局部变量被意外回收，就会出现函数引用为null的情况。上面的几种方式都能从根本上避免这类问题。

内容的提问来源于stack exchange，提问作者Marek