Question

我有一个用JavaScript创建的对象。让我们说它看起来像这样：

function MyObject() {
    this.secretIdea = "My Secret Idea!";
};

MyObject.prototype.load = function() {
    this.MyButton = $(document.createElement("a"));
    this.MyButton.addClass("CoolButtonClass");
    this.MyButton.click = MyButton.onButtonClick;
    someRandomHtmlObject.append(this.MyButton);
};

MyObject.prototype.onButtonClick = function(e) {
    alert(this.secretIdea);
};

正如您所看到的，我在JavaScript中设置了一个对象，当它加载时，它会创建一个锚标记。这个锚标记作为CSS中的背景图像（所以它不是空的）。

现在，我明白当实际点击按钮时，'this'语句将落入MyButton元素的范围，而不是我创建的对象。

我尝试过使用call（），try（）和bind（），但我无法使用它。我需要它，以便在单击按钮时，它返回到对象的范围而不是html元素的范围。

我在这里缺少什么？

Answer 1

click事件处理程序中的this值引用DOM元素，而不是构造函数的对象实例。

您需要保留该值，同时请参考MyButton.onButtonClick我认为您要引用onButtonClick上声明的MyObject.prototype方法：

MyObject.prototype.load = function() {
    var instance = this;
    //..
    this.MyButton.click(function (e) { // <-- looks like you are using jQuery
      // here `this` refers to `MyButton`
      instance.onButtonClick(e);
    });
    //...
};

处理动态生成的JavaScript对象上的事件

1 个答案: