Javascript function objects, this keyword points to wrong object

Question

I\'ve got a problem concerning the javascript \"this\" keyword when used within a javascript functional object. I want to be able to create an object for handling a Modal po

Answer 1

You need to create a closure to trap the this context, I tend to use an anonymous function to do this as follows:-

CreateItemModal.prototype.show = function() {
    this.$wrapper.dialog({
        buttons: {
            // this crashes because this is not the current object here
            Cancel: (function(self) {
              return function() { self.close.apply(self, arguments ); }
            })(this);
        }
    });
};

Answer 2

Everyone who encounters problems with "this" in JavaScript should read and digest this blog post: http://howtonode.org/what-is-this

You would also do well to Google "Douglas Crockford" and watch some of his (free) videos on the subject.

Answer 3

Try to add a variable that is equal to global this e.g

function CreateItemModal(config) {
    // initialize some variables including $wrapper
};

CreateItemModal.prototype.show = function() {
    var $this = this;
    this.$wrapper.dialog({
    buttons: {
        // this crashes because this is not the current object here
        Cancel: $this.close
    }
});

As for me, it works in most cases

Answer 4

try this:

CreateItemModal.prototype.show = function() {
    var me = this;
    this.$wrapper.dialog({
        buttons: {
            // this crashes because this is not the current object here
            Cancel: me.close
        }
    });
};

The reason why it doesn't work, because the "this" is referring to the dialog, not to that class.