Question

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

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

FIDDLE

或传递对象：

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

FIDDLE

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

3 个答案: