this keyword not working as expected

Question

Title may not be correct but I didn't know how to ask my question!

I'm trying to learn writing Object-Oriented in JavaScript and I'm rewriting one of my projects so instead of lots of anonymous functions and duplicated codes I can use methods of classes. Now I'm facing an error on the following code:

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);
    });

But I keep facing this error:

TypeError: this.cartModal is undefined

Should I use anything else to use an property inside an object? Or the problem lies somewhere else?

The problem is that you cannot reference the object during its definition. — Felix Kling, Jul 20 '13 at 18:01
@FelixKling So what's the use of `this` if I cannot use that in object definitation? When can I use that? — Farid Rn, Jul 20 '13 at 18:02
@faridv — Primarily, inside a function that is used as a method (i.e. like every other use of `this` in your example code). — Quentin, Jul 20 '13 at 18:03
You can use it in methods of objects to refer to the object. Or to refer to the target element in an event handler. Or to the new object in a constructor function. And more! — Felix Kling, Jul 20 '13 at 18:05

score 1 · Answer 1 · answered Jul 20 '13 at 18:04

1

The problem comes here: $checkboxes: this.cartModal.find("input[name=check]"),

this does not refer to cart but to the current scope this, you can not refer to your current object when you declare it like that.

Better do:

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

answered Jul 20 '13 at 18:04

dievardump

2,484
17
21

2

`this` **does** exist (except if you are in strict mode and haven't done anything to set a context), it just doesn't refer to the object literal being constructed. – Quentin Jul 20 '13 at 18:05
I updated my answer immediately. stop being so quick :p – dievardump Jul 20 '13 at 18:08
Why downvote ? My answer was corrected immediately. Even before the comment was posted. – dievardump Jul 20 '13 at 18:45

zoran404 · Answer 2 · 2013-07-20T18:27:06.250

0

You can't acces the element while making it. Using a function should work.

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

But what you could also do is use an object constructor . There you can use this. to refer to the object you are creating.

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

edited Jul 20 '13 at 18:27

answered Jul 20 '13 at 18:03

zoran404

1,682
2
20
37

But the OP didn't say he wants `$checkboxes` to be a method. That's what you are doing here. He will have to `cart.$checkboxes()` to access it. And it will query the DOM (using jQuery, bad scenario) every time. – dievardump Jul 20 '13 at 18:07
In that case what about using an object constructor. – zoran404 Jul 20 '13 at 18:27

this keyword not working as expected

2 Answers2