javascript - 此关键字未按预期工作

Question

标题可能不正确，但我不知道如何问我的问题！

我正在尝试学习用 JavaScript 编写面向对象，并且我正在重写我的一个项目，因此我可以使用类的方法来代替大量匿名函数和重复代码。现在我在以下代码中遇到错误：

var cart = {
    cartModal: $("#cart-modal"),
    $checkboxes: this.cartModal.find("input[name=check]"),
    //           ^^^^^^^^^^^^^^
    toggleModal: function(e) {
        this.cartModal.modal('toggle');
        this.handleCheckboxes();
        e.preventDefault();
    },
    handleCheckboxes: function() {
        this.cartModal.find("input.checkall").click(function() {
            $checkboxes.prop("checked", !$checkboxes.prop("checked"));
        });
    }

};
    $("#cart-link").click(function(e) {
        cart.toggleModal(e);
    });

但我一直面临这个错误：

TypeError: this.cartModal is undefined

我应该使用其他任何东西来使用对象内的属性吗？还是问题出在其他地方？

Answer 1

问题来了：$checkboxes: this.cartModal.find("input[name=check]"),

this不是指当前范围，cart而是指当前范围this，当您这样声明时，您不能引用当前对象。

最好这样做：

var modal = $("#cart-modal"),
    cart = {
        cartModal: modal,
        $checkboxes: modal.find("input[name=check]")
        ...
    }

Answer 2

制作时您无法访问该元素。使用函数应该可以。

$checkboxes: function(){return this.cartModal.find("input[name=check]")},

但您也可以使用对象构造函数。在那里，您可以使用this.来引用您正在创建的对象。

function YourObject() {
    this.$checkboxes = this.cartModal.find("input[name=check]");
    .......
}