How to call a method from another method within the same object in JavaScript?

Question

I'm just getting started in OO javascript so please bear with me.

This works:

var myObj = {
     foo : function() {
            alert('hello');
            this.bar();
     },
     bar: function() {
            alert('world');
     }
}

However if I do some other stuff after the hello alert in the "foo" method then the meaning of "this" changes from the object to whatever I last selected so using this.bar() doesn't execute the other method in the class.

So I tried to cache "this" in a variable like so:

var myObj = {
     publicVars: {
            theObj : this
     },
     foo : function() {
            alert('hello');
            publicVars.theObj.bar();
     },
     bar: function() {
            alert('world');
     }
}

But that didn't work either. So what is the solution?

EDIT

Here is my actual code:

var formObj = {

     validate : function(theForm) {
            $('input, textarea', theForm).each(function() {
                 var valueLength = $(this).val().length;
                 if (valueLength === 0) {
                        $(this).addClass('invalid');
                        this.listenForInput($(this)); // <!------- this isn't working
                 }
            });
     },
     listenForInput : function(theField) {
//          theField.keyup(function() {
//               if ($(this).val().length > 0) {
//                      theField.removeClass('invalid');
//               }
//          });
            alert('I work!!!!');
     }

} // end obj

What is that " other stuff " because this shouldn't change inside that object. — Joe
– Joe, Commented Aug 23, 2011 at 0:55
What is the "other stuff" you are talking about? If you are creating a callback, then yes this will refer to window (most likely). In this case you just have to create a reference to this inside foo first. — Felix Kling
– Felix Kling, Commented Aug 23, 2011 at 0:55
With regard to your updated code, you seem to want this to refer to your formObj, and the DOM element at the same time. That's just not going to happen. this.listenForInput($(this)); — user113716
– user113716, Commented Aug 23, 2011 at 1:06

Felix Kling · Accepted Answer · 2011-08-23 01:16:29Z

As I said in my comment, you have to keep a reference inside the function:

validate: function(theForm) {
    var self = this;
    $('input, textarea', theForm).each(function() {
        var valueLength = $(this).val().length;
        if (valueLength === 0) {
           $(this).addClass('invalid');
           self.listenForInput($(this));
        }
    });
},

You are passing a function to each. Inside this callback, this refers to the DOM element. That's why you pass it to jQuery ($(this)) to be able to call jQuery methods on that element. It cannot refer to formObj too!

What this refers to is determined by how a function is called and each function has its own this (the Mozilla documention describes this in more detail).

If you call validate with formObj.validate(), then this refers to formObj.

The jQuery documentation for each states:

More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

karim79 · Accepted Answer · 2011-08-23 01:01:06Z

4

Am I missing something, or can you not just reference the object by name, like this:

var myObj = {
    foo: function() {
        alert('hello');
        myObj.bar();
    },
    bar: function() {
        alert('world');
    }
}

myObj.foo();

http://jsfiddle.net/karim79/kaXYj/

answered Aug 23, 2011 at 1:01

karim79

343k67 gold badges420 silver badges409 bronze badges

2 Comments

Pam Over a year ago

yup works, didn't know you could reference an object just by it's name. All the tutorials use "this" keyword, the people above said the meaning of "this" should never change. But it did for me, so not sure what's going on there but yes this works, thanks.

karim79 Over a year ago

Although this is a fix, I would suggest accepting @Felix Kling's answer, which I think is better suited to this situation. I had not fully understood the context of your question at the time of writing as you had not added your actual implementation.

RobG · Accepted Answer · 2011-08-23 00:57:51Z

0

A function's this keyword is set by the call, it can't change during function execution.

Calling obj.foo() sets foo's this to obj so calling this.bar calls obj.bar. However, if you call foo some other way, e.g.:

var a = obj.foo;
a();

then its this will may be obj (in the above case it will be window or undefined in strict mode) so you get a different bar or an error if the this object doesn't have a bar property.

answered Aug 23, 2011 at 0:57

RobG

148k32 gold badges180 silver badges216 bronze badges

Collectives™ on Stack Overflow

How to call a method from another method within the same object in JavaScript?

EDIT

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related