Question

我有一个在点击时调用的对象的方法，this不幸地引用了window对象而不是我希望它引用的对象。

我已经阅读了几个提到这个问题的帖子，但我没有找到/理解我的情况的任何替代方案。

任何有关方向的帮助都将受到赞赏

var IceCream = function(flavor) {
  this.tub = 100;
  this.flavor = flavor;
};

IceCream.prototype = {
  scoop: function() {
    this.updateInventory();
    alert("scooping");
  },
  updateInventory: function() {
    this.tub--;
    alert(this.tub);
  }
};

var vanilla = new IceCream("vanilla");
vanilla.scoop();

$('button').click(vanilla.scoop);

Answer 1

$('button').click(function(){
    vanilla.scoop();
});

将最后一行更改为可以使其正常工作。 $.fn.click函数接受回调，第一个参数为event，并将元素绑定为this，而不是window。

------------ ------------编辑

为了使它更清洁，您可以定义一个函数来返回单击函数。像这样定义你的类：

IceCream.prototype = {
  scoop: function() {
    this.updateInventory();
    alert("scooping");
  },
  updateInventory: function() {
    this.tub--;
    alert(this.tub);
  },
  makeClickFn: function(){
    var self = this;
    return function(event){
        self.scoop();
    };
  }
};

当你需要绑定click函数时：

$('button').click(vanilla.makeClickFn());

jsfiddle：https://jsfiddle.net/L7e71sLL/

Answer 2

$('button').click(vanilla.scoop.bind(vanilla));

绑定，创建一个函数，该变量绑定到给定对象。在这种情况下，香草

Answer 3

在$（'button'）内。单击（）范围将是按钮。因此，您需要将vanilla范围绑定到onClick函数

Javascript - 在点击时运行的函数中引用“this”

3 个答案: