Prototype Pattern and “this”

Question

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?

Answer 1

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.

Answer 2

ES5's Function.prototype.bind() might be an option for you. You could go like

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

Now, we proxied each event handler by invoking .bind() and as a result, we call it in the context of the prototype object. The caveat here is, you no longer have this referencing the actuall DOM node, so we need to use the passed in arguments from jQuery instead.