calling one method from another under same js object

Question

I wrote some js:

var folersTreeMgr = {

    sendDeleteFolderRequestAndUpdateFoldersTree: function () {
       ...

        } else {
            createAjaxRequest("Manager/DeleteLocation", {
                'locationId': folder_minimal_descriptor.locationId
            }).done(function (isSucceeded) {

                if (isSucceeded) {

                    folersTreeMgr.deleteFolderInFoldersTree(); // works
                    this.deleteFolderInFoldersTree(); // doesn't work
                    deleteFolderInFoldersTree(); // doesn't work
                }

                //TODO: else: error
            });
        }
    },


    deleteFolderInFoldersTree: function () {
        $("#jstree").jstree("remove", null);
    }
};

why do I get "missing function" error

*"why do I get...saw this post, but it didn't help."* **Huh?** — T.J. Crowder, Feb 17 '12 at 23:37

score 7 · Accepted Answer · answered Feb 17 '12 at 23:32

Because you're using this inside a callback, where it has different meaning.

You can referene the outer this in a variable, then use that in the callback.

var folersTreeMgr = {

    sendDeleteFolderRequestAndUpdateFoldersTree: function () {

       var self = this;  // cache it

       ...

        } else {
            createAjaxRequest("Manager/DeleteLocation", {
                'locationId': folder_minimal_descriptor.locationId
            }).done(function (isSucceeded) {
                if (isSucceeded) {
                   self.deleteFolderInFoldersTree(); // works
                }
            });
        }
    },
    deleteFolderInFoldersTree: function () {
        $("#jstree").jstree("remove", null);
    }
};

Or use $.proxy to keep the this value...

createAjaxRequest("Manager/DeleteLocation", {
    'locationId': folder_minimal_descriptor.locationId
}).done( $.proxy(function (isSucceeded) {
    if (isSucceeded) {
       this.deleteFolderInFoldersTree(); // works
    }
},this) );

This'll return a function that has the second argument to $.proxy bound to the function passed as the first argument.

score 2 · Answer 2 · answered Feb 17 '12 at 23:33

2

When you call this.deleteFolderInFoldersTree(), you are in a different context, which means this is no longer the object. A quick way to solve this is the following:

var self = this;

Then do self.deleteFolderInFoldersTree()

answered Feb 17 '12 at 23:33

LoveAndCoding

7,857
2
31
55

This is another issue with his code, but he's creating an object literal, so ``this`` means ``window`` and ``self.deleteFolderInFoldersTree()`` will still fail in his case. – Feb 17 '12 at 23:37
2

@DavidEllis: The fact he's creating an object literal doesn't mean that `this` will be `window`; the two things are completely unrelated. (`this` may well be `window` within the function passed into `done`, but that depends **entirely** on how the callback passed into `done` is called, nothing to do with it being a literal.) – T.J. Crowder Feb 17 '12 at 23:42
Well I'll be... I'm mistaken, then, but that produces even more oddities when dealing with nested objects, or an object literal inside of a constructor function... – Feb 17 '12 at 23:45
1

@DavidEllis: Not really. Remember, `this` (in JavaScript) [is defined entirely by *how a function is called*](http://blog.niftysnippets.org/2008/03/mythical-methods.html), not where or how the function is defined. It's fundamentally different from `this` is some other languages, like C++, Java, or C#. – T.J. Crowder Feb 17 '12 at 23:47
@T.J.Crowder [yes, I'm right on that new interpretation](http://jsfiddle.net/JetEe/) – Feb 17 '12 at 23:50

calling one method from another under same js object

2 Answers2