Javascript jQuery使用对象'；方法作为事件处理程序

我有一个目标。它初始化一个按钮，在单击时发出“Hello！”警报。为什么这样不行

jsfiddle：

HTML

---

这是一个对象文本，您通常会这样使用它：

var MyObject = {
    testValue: "Hello!",

    testFunction: function() {
        alert(MyObject.testValue);
    },

    init: function(button) {
        button.on('click', this.testFunction);
    }
}

var button = $('button');
MyObject.init(button);

或通过物体：

var MyObject = {
    testValue: "Hello!",

    testFunction: function(e) {
        alert(e.data.obj.testValue);
    },

    init: function(button) {
        button.on('click', {obj: this}, this.testFunction);
    }
}

var button = $('button');
MyObject.init(button);

无论何时将

（）

放在函数引用后面，都是执行该函数。您必须将函数引用传递给

。单击
，而不是函数返回的内容（除非函数返回您要用作事件处理程序的函数）

例如：

button.click(this.testFunction);

但是现在您有了另一个问题：在函数中，
this
将引用DOM元素而不是对象，因此访问
this.testValue
将返回
未定义的

您可以使用jQuery的函数修复此问题：

button.click($.proxy(this.testFunction, this));

现在，
此
将引用对象，您可以通过
事件获取对单击元素的引用。目标
原因有二：


绑定事件时使用的是
testFunction（）
而不是
testFunction
，因此将调用函数并绑定（未定义的）返回值

将方法用作函数时，它不再附加到对象，因此调用回调时上下文将不是对象，而是全局
窗口
对象


使用
proxy
方法生成一个调用具有正确上下文的方法的函数：

button.click($.proxy(this.testFunction, this));

它让警报正常工作，但警报“未定义”：P@DonnyP-没注意到！这是因为在testFunction的作用域中，
this
在以这种方式调用时将是按钮，而不是对象。您要么直接引用对象，要么将
此
作为参数传递。感谢Guffa，是否可以使用.bind（this）而不是$.proxy（）？@DonnyP是的，它们可以实现相同的功能thing@DonnyP：是的，但这并不适用于所有浏览器。这就是为什么有
proxy
的原因。是语法
按钮。单击（this.testFunction.bind（this））
？@Guffa有趣的是，jQuery甚至都不用检查
函数.prototype.bind
，他们总是使用自己的自定义方式。你的代码毫无意义！不能像那样初始化新对象文本。如果要使用
new
并将其视为“构造函数”，则必须将
MyObject
作为函数。否则，
MyObject
是一个对象文本，您可以静态访问它-
MyObject.testValue
Mind blow@Ian。这使得js对象更有意义，谢谢。
button.click($.proxy(this.testFunction, this));

button.click($.proxy(this.testFunction, this));