oop - Javascript function using "this = " gives "Invalid left-hand side in assignment"

Question

I am trying to get a JavaScript object to use the "this" assignments of another objects' constructor, as well as assume all that objects' prototype functions. Here's an example of what I'm attempting to accomplish:

 /* The base - contains assignments to 'this', and prototype functions
  */
 function ObjX(a,b) {
     this.$a = a;
     this.$b = b;
 }

 ObjX.prototype.getB() {
     return this.$b;
 }

 function ObjY(a,b,c) {
    // here's what I'm thinking should work:
    this = ObjX(a, b * 12); 
    /* and by 'work' I mean ObjY should have the following properties:
     * ObjY.$a == a, ObjY.$b == b * 12,
     * and ObjY.getB == ObjX.prototype.getB
     * ... unfortunately I get the error: 
     *     Uncaught ReferenceError: Invalid left-hand side in assignment
     */

    this.$c = c; // just to further distinguish ObjY from ObjX.
 }

I'd be grateful for your thoughts on how to have ObjY subsume ObjX's assignments to 'this' (i.e. not have to repeat all the this.$* = * assignments in ObjY's constructor) and have ObjY assume ObjX.prototype.

My first thought is to try the following:

function ObjY(a,b,c) {
   this.prototype = new ObjX(a,b*12);
}

Ideally I'd like to learn how to do this in a prototypal way (i.e. not have to use any of those 'classic' OOP substitutes like Base2).

It may be noteworthy that ObjY will be anonymous (e.g. factory['ObjX'] = function(a,b,c) { this = ObjX(a,b*12); ... }) -- if I've the terminology right.

Thank you.

Answer 1

You can't really do that, because the this value by definition is immutable, you can't change in that way what it references to.

A workaround would be to use the call or apply methods to run your ObjX constructor function in the this object of ObjY:

function ObjY(a,b,c) {
  ObjX.call(this, a, b * 12); 
  this.$c = c;
}

In the above example, the ObjX function is executed changing its this value, so all property extensions you make to that object in this function, will be reflected in the new object that the this value refers in the ObjY constructor.

As soon the call method ends, the this object will be augmented and you can make more property extensions, like adding your $c value.

Edit: About the prototypes, your sample will not work, because the prototype property has no special meaning for object in stances it will be just as any other property, it should be used on constructor functions.

I think you might be confusing the prototype property of constructors with the internal [[Prototype]] property that all objects have.

The [[Prototype]] property can only be set by the new operator (through the [[Construct]] internal operation), this property can't be changed, (although some implementations, like the Mozilla one, you can access it through obj.__proto__;, and in ECMAScript 5, the Object.getPrototypeOf method has been introduced, but I wouldn't recommend you to mess directly with it).

Actually, when your constructor function is executed, the internal [[Prototype]] property of the object that the this value refers, has already been set to its constructor's prototype property.

So, as @Anurag comments, you could set the ObjY.prototype to a newly created ObjX object:

function ObjY(a,b,c) {
  ObjX.call(this, a, b * 12); 
  this.$c = c;
}

ObjY.prototype = new ObjX();
ObjY.prototype.constructor = ObjY;

That will make that your ObjY inherit also the properties added to the ObjX.prototype, and as you see, I changed the ObjY.prototype.constructor, since the assignment in the line above will make this property to wrongly point to ObjX.

Recommended articles:

• Constructors considered mildly confusing
• JavaScript Prototypal Inheritance