此关键字未按预期工作[重复]答案

【问题标题】：this keyword not working as expected [duplicate]此关键字未按预期工作[重复]
【发布时间】：2013-07-19 20:36:23
【问题描述】：

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

我正在尝试学习在 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

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

【问题讨论】：

问题是在对象定义的时候不能引用它。
@FelixKling 那么如果我不能在对象定义中使用this 有什么用呢？我什么时候可以使用它？
@faridv — 主要是在用作方法的函数内部（即，与示例代码中 this 的所有其他用法一样）。
您可以在对象的方法中使用它来引用对象。或者在事件处理程序中引用目标元素。或者到构造函数中的新对象。还有更多！

标签： javascript oop

【解决方案1】：

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

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

最好这样做：

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

【讨论】：

this 确实存在（除非您处于严格模式并且没有做任何事情来设置上下文），它只是不引用对象文字正在建设中。
我立即更新了我的答案。别这么快了：p
为什么要投反对票？我的回答立即得到纠正。甚至在评论发布之前。

【解决方案2】：

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

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

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

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

【讨论】：

但是 OP 并没有说他希望 $checkboxes 成为一种方法。这就是你在这里所做的。他必须cart.$checkboxes() 才能访问它。并且每次都会查询 DOM（使用 jQuery，糟糕的场景）。
在这种情况下，使用对象构造函数怎么样。