Search code examples
javascriptdesign-patternsthisprototype-pattern

Prototype Pattern and "this"


I'm trying to create a client-side api for a web control using the Prototype pattern. However I want to make life easier by not having to manage "this".

This is some sample code (i have commented the problematic line):

MyObject = function ()
{
    MyObject.initializeBase(this);

    this._someProperty = null;
};    

MyObject.prototype = {

    initialize: function()
    {
        // Init
    },

    get_someProperty: function()
    {
        return this._someProperty;
    },

    set_someProperty: function(value)
    {
        this._someProperty = value;
    },    

    doSomething: function ()
    {
        $('.some-class').each(function ()
        {
            $(this).click(this.doClick);  // this.doClick is wrong
        });
    },

    doClick: function ()
    {
        alert('Hello World');
    }
};

Normally, using the revealing module pattern I would declare a private variable:

var that = this;

Can I do something similar with the Prototype pattern?


Solution

  • You can do the exact same thing you are used to, just do it within the doSomething method:

    doSomething: function ()
    {
        var instance = this;
        $('.some-class').each(function ()
        {
            $(this).click(instance.doClick);
        });
    },
    

    This approach has nothing to with prototype or not, it's just how to manage context with nested functions. So when a function on a prototype (method) has nested functions within in, you may have to preserve the context this at any of those level if you want to access it in a nested scope.