Assign object to "this"

Question

Say I have a class and some static helper methods like this:

function MyClass (myVar) {
    this.myVar = myVar;

    this.replaceMe = function (value) {
        // this will fail
        this = MyClass.staticHelper( value );

        return this;
    }

    this.revealVar = function () {
        alert( this.myVar );
    }
}

MyClass.staticHelper = function (instance, value) {
    return new MyClass( instance.myVar + value );
}

What I want to do is something like this:

var instance = new MyClass( 2 );

instance.revealVar(); // alerts 2
instance.replaceMe( 40 ).revealVar(); // alerts 42

The reason is that my class has a slightly more complicated structure and I don't want to assign all internal variables manually everytime, but rather replace the entire object. Is there a simple way to do so?

Answer 1

instance.replaceMe( 40 ).revealVar(); alerts 42

OK, for that return MyClass.staticHelper(this, value); would suffice. The question is only whether the next call to instance.revealVar() should now alert 2 or 42 - if you want instance to be changed to 42 it gets more complicated:

this = MyClass.staticHelper( value ); // this will fail

…because this is not a common variable, but a keyword and evaluates to the value of the ThisBinding of the current execution context which is set depending on how the function is entered - you cannot assign to it, you can only set it when invoking the function.

I don't want to assign all internal variables manually everytime, but rather replace the entire object.

Unfortunately you have to do so, without changing the properties of instance object (and the closure-hidden variables) you won't change the instance and revealVar() will stay 2.

Is there a simple way to do so?

Yes, it can be done programmatically. The simplest method would be to call the constructor (again) on the current instance, like it happens when invoked with the new keyword:

MyClass.call( instance, instance.myVar + value );

Yet you can't use this like the static function which creates a completely new instance. Either you put it in a static method and call that from replaceMe with this, or you just put it directly in replaceMe.

If you need a static method that at first returns a completely new instance, you could use that as well by copying the new properties on the old instance:

….replaceMe = function(val) {
    var newInst = MyClass.staticHelper(this, val); // new MyClass(this.myVar+val);
    for (var prop in newInst)
        if (newInst.hasOwnProperty(prop))
            this[prop] = newInst[prop];
    return this;
};

That means overwriting the old attributes, and also the old closures can be garbage-collected now as nothing refers to them any more.

Btw, I'd recommend to put your methods on the prototype instead of assigning them in the constructor.

Answer 2

How about just returning the new instance:

function MyClass(myVar) {
    // ...

    this.replaceMe = function (value) {
        return MyClass.staticHelper(this, value);
    }

    // ...
}

MyClass.staticHelper = function (instance, value) {
    return new MyClass( instance.myVar += value );
}

Answer 3

There are two reasons why this is not going to work in Javascript.

First, despite that it looks like a variable, this is actually a function call* and therefore cannot be assigned to. this=foo is the same as bar()=baz. So it's not possible to have code like this:

a = 5
a.change(10)
alert(a == 10) // nope

Second, even if this=z were possible, that approach would fail anyways, because Javascript passes by value, therefore it's not possible to have a function that changes the value of its argument:

a = 5
change(a)
alert(a == 10) // nope

* "is" means "fully identical in every way"

Answer 4

I wanted to do something very similar a while back. Unfortunately there's no way to assign a value to this - the this pointer is a read only variable. However the next best thing is to use a getter and setter object to change the variable holding your instance itself.

Note that this only updates a single reference to the instance. You can read more about it here: Is there a better way to simulate pointers in JavaScript?

So this is how it works:

function MyClass(pointer, myVar) {
    this.myVar = myVar;

    this.replaceMe = function (value) {
        pointer.value = MyClass.staticHelper(this, pointer, value);
        return pointer.value;
    };

    this.revealVar = function () {
        alert(this.myVar);
    };
}

MyClass.staticHelper = function (instance, pointer, value) {
    return new MyClass(pointer, instance.myVar + value);
};

This is how to create the pointer and use it:

var instance = new MyClass({
    get value() { return instance; },
    set value(newValue) { instance = newValue; }
}, 2);

instance.revealVar();               // alerts 2
instance.replaceMe(40).revealVar(); // alerts 42

It's not the most elegant solution but it gets the job done. You can see this code in action: http://jsfiddle.net/fpxXL/1/