JavaScript 通用对象抛出错误值

Question

我想问一些事情，因为我很困惑。我有这个对象:

        var BonusesObject = {
            priceTotal: 0,
            bonusCheckboxClick: function(){
                var price = 5;
                this.priceTotal = price;
                console.log("works, " + this.priceTotal);
            },
            getPrice: function(){
                return this.priceTotal;
            },
            init: function(){
                $('input:checkbox').on('click', this.bonusCheckboxClick);
            }
        };

        BonusesObject.init();
//now when I will fire on click event and BonusesObject.getPrice 
it will give me 0 instead of 5.

现在，当我调用 BonusesObject.getPrice 时，它​​应该给我 0。现在，当我手动调用 BonusesObject.bonusCheckboxClick 和 BonusesObject.getPrice 时，它​​会给出 ma 5，正如它应该的那样。但是当通过 on('click', this.bonusCheckboxClick) 调用函数 BonusCheckboxClick 时，它会抛出控制台相关值 5 但之后当我调用 BonusesObject.getPrice 时它仍然给我 0。

我想问一些事情，因为我很困惑。我有这个对象:我错过了什么？仅当单击事件触发对象函数时，它才不起作用。

有人能给我解释一下吗？我将不胜感激。

Answer 1

您需要将函数绑定(bind)到对象:

.on('click', this.bonusCheckboxClick.bind(this));

文档:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind