javascript - jQuery 使用对象的方法作为事件处理程序

Question

我有一个对象。它初始化一个按钮来提醒“你好！” 当它被点击时。为什么这行不通？

jsfiddle：http: //jsfiddle.net/kUT52/1/

HTML

<button>Test</button>

JS

var MyObject = {
  testValue: "Hello!",

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

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

$(document).ready(function(){
  var buttonInstance = new MyObject();
  var button = $('button');
  buttonInstance.init(button);
});

Answer 1

每当你把()一个函数引用放在后面时，你就是在执行这个函数。您必须将函数引用传递给.click，而不是函数返回的内容（除非函数返回要用作事件处理程序的函数）。

例子：

button.click(this.testFunction);

但是现在你有另一个问题：在函数内部，this将引用 DOM 元素而不是对象，因此访问this.testValue将返回undefined.

你可以使用 jQuery 的$.proxy函数来解决这个问题：

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

现在this将引用该对象，您可以通过event.target.

Answer 2

有两个原因：

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

• 当你把方法当作函数使用时，它就不再附加到对象上，所以调用回调时上下文将不是对象，而是全局window对象。

使用该proxy方法创建一个使用正确上下文调用该方法的函数：

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

Answer 3

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

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);

小提琴