jQuery事件回调中调用对象方法报错ReferenceError: disconnect未定义求助

问题原因分析 #

你遇到的错误本质是作用域和this指向的经典坑：

1. 直接调用disconnect()：这个方法是MyObj类的实例方法，并非全局函数，在keydown回调的局部作用域里找不到它，所以抛出ReferenceError。
2. 调用this.disconnect()：在jQuery的事件回调中，this的指向是触发事件的DOM元素（这里就是<body>），而非MyObj的实例，所以this上不存在disconnect方法，同样报错。

解决方案 #

这里有三种常用的解决方式，你可以根据代码风格选择：

1. 保存实例引用到变量（最兼容的经典方案） #

在connect方法里先把当前实例的this保存到一个变量（比如self），然后在回调里通过这个变量调用方法：

var MyObj = core.Class.extend({
    connect: function() {
        var self = this; // 保存MyObj实例的引用
        $('body').keydown(function (e) {
            self.disconnect(); // 用self访问实例方法
        });
    },
    disconnect: function() { 
        // 你的逻辑代码
    }
});

原理：self是在connect方法作用域中定义的变量，回调函数可以访问外层作用域的变量，因此能通过self拿到MyObj的实例。

2. 使用箭头函数（ES6+推荐方案） #

箭头函数不会绑定自己的this，它会继承外层作用域的this（也就是connect方法里的MyObj实例），所以直接用this.disconnect()即可：

var MyObj = core.Class.extend({
    connect: function() {
        $('body').keydown((e) => { // 箭头函数
            this.disconnect(); // 这里的this指向MyObj实例
        });
    },
    disconnect: function() { 
        // 你的逻辑代码
    }
});

原理：箭头函数的this遵循词法作用域，和外层函数的this保持一致，不需要额外保存变量。

3. 使用jQuery的$.proxy方法（jQuery专属方案） #

$.proxy可以帮你把回调函数的this绑定到指定对象，这里就是MyObj的实例：

var MyObj = core.Class.extend({
    connect: function() {
        $('body').keydown($.proxy(function(e) {
            this.disconnect(); // this指向MyObj实例
        }, this)); // 第二个参数指定this的指向
    },
    disconnect: function() { 
        // 你的逻辑代码
    }
});

原理：$.proxy返回一个新函数，这个函数的this会被强制设置为你传入的第二个参数。

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