CODEWITHSUNDEEP
javascriptoopprototype
MandM
MandM

Reputation: 3383

make object sub-prototype have context of parent object

This may be a duplicate, and if so, I apologize. I've looked through a few questions and haven't found one that quite matches my situation (which maybe a bad sign to begin with).

I've got a class, say RandomClass, that is defined as follows

function RandomClass(id){
    this._id = id;
}

RandomClass.prototype.getID = function(){
    return this._id;
}

var rc = new RandomClass(1);
rc.getID(); //returns 1, as expected

Say I want to define a set of handlers, and keep them in a sub-object (while continuing to use prototype) of RandomClass. My knowledge of prototypes is somewhat limited, so apologies if this next bit is extremely bad form.

RandomClass.prototype.handlers = {};

RandomClass.prototype.handlers.HandlerOne = function(){
   console.log("Handler one calling from ID: "+this._id); 
   //the context is not the context of RandomClass, but of RandomClass.prototype.handlers!
}

rc.handlers.HandlerOne(); //prints "Handler one calling from ID: unknown"

Again, maybe this is bad form, but I have several handlers which need to be called and doing things this way simplifies the code to:

var handler = "one of many many handlers returned from an ajax request";
rc.handlers[handler]();

So, my question is how do I make HandlerOne's context be the context of RandomClass rather than of handlers? I'd like to continue to use prototypes, because then they are not cloned multiple times (as in the following example):

function RandomClass(id){
    this._id = id;
    this._handlers = {};
}

function HandlerOne(){
    console.log("Handler one calling from ID: "+this._id);
}

var rc = new RandomClass(1);
rc._handlers["HandlerOne"] = HandlerOne.bind(rc);
rc._handlers["HandlerOne"]() //prints as expected, but I believe performance is much worse here

Upvotes: 0

Views: 51

Answers (3)

MandM
MandM

Reputation: 3383

Both answers submitted at this point are good alternatives (that I would say are acceptable), but I've decided to take another route (that lead to the least amount of modification to my code :)).

Similar to @BlaShadow's answer, rather than passing the context and setting a parentScope variable, I simply use Javascript's function.call() method to pass the correct context.

function RandomClass(id){
    this._id = id;
}

function.prototype.handlers = {}
function.prototype.handlers.HandlerOne = function(data){
    console.log("Handler one calling from ID: "+this._id+" with data: "+data);
}

var rc = new RandomClass(1);
rc.handlers.HandlerOne.call(rc, {"some": "data"});
//prints "Handler one calling from ID: 1 with data { "some" : "data" }

Upvotes: 0

plalx
plalx

Reputation: 43728

You could simply make Handlers it's own class. Note that you should not access private members from outside the class like I did in the exemple below. You must expose the correct public API to make objects work together without violating encapsulation.

function RandomClass(id){
    this._id = id;
    this.handlers = new Handlers(this);
}


function Handlers(randomClassInstance) {
    this._randomClassInstance = randomClassInstance;
}

Handlers.prototype = {
    constructor: Handlers,

    handlerOne: function () {
        console.log("Handler one calling from ID: "+ this._randomClassInstance._id);
    }
};

Then you can do:

var rnd = new RandomClass('test');

rnd.handlers.handlerOne(); //Handler one calling from ID: test

Upvotes: 1

BlaShadow
BlaShadow

Reputation: 11693

Could satisfy to you do this, instead of bind the context try to pass it as a parameter.

function RandomClass(id){
    this._id = id;
    this._handlers = {};
}

function HandlerOne(instance){
    var parentScope = instance;

    console.log("Handler one calling from ID: "+parentScope._id);
}

//call it like this
var rc = new RandomClass(1);
rc._handlers["HandlerOne"] = HandlerOne;
rc._handlers["HandlerOne"](rc)

Upvotes: 1

Related Questions