javascript setting attribute of prototype to attribute of object

Question

To begin with, I don't fully understand the prototypal structure of Javascript so this may not be possible.

If I have ...

var vector = function( x, y ) {
    this.x = x || 0;
    this.y = y || 0;
}

var obj = function() {
    this.position = new vector( 0, 0, 0 );
}

var cube = new obj();

... how can I add a property x to obj such that calling cube.x is equivalent to cube.position.x. I think it should be possible to make properties of each reference the same value, but I'm just not sure of the syntax. Something like obj.prototype.x = obj.position.x doesn't work because obj.position is undefined.

I would like the following behaviour to be possible

alert(cube.position.x); // 0
alert(cube.x); // 0

cube.position.x = 2;
alert(cube.position.x); // 2
alert(cube.x); // 2

cube.x = 4;
alert(cube.position.x); // 4
alert(cube.x); // 4

Is this possible?

I should probably mention that I'm working with Three.js so rewriting the objects isn't an option, just adding to them and their prototypes.

You can only do this in browsers that support getters and setters. — zzzzBov
– zzzzBov, Commented May 2, 2013 at 17:02

zzzzBov · Accepted Answer · 2013-05-02 17:14:35Z

1

To get cube.x to return whatever cube.position.x contains, you'd need to define accessors and mutators for obj.prototype.x. Accessors and mutators are a relatively newer feature in JavaScript, and are not supported in most versions of IE.

var vector = function( x, y ) {
    this.x = x || 0;
    this.y = y || 0;
}

var obj = function() {
    this.position = new vector( 0, 0, 0 );
}
obj.prototype = {
    ...your prorotype methods here...
};
Object.defineProperty(obj.prototype, 'x', {
    get: function () {
        return this.position.x;
    },
    set: function (val) {
        this.position.x = val;
    }
});

//alternatively:
obj.prototype = {
    get x() {
        return this.position.x;
    },
    set x(val) {
        this.position.x = val;
    }
};

var cube = new obj();
cube.x; //0
cube.x = 10;
cube.position.x; //10

edited May 2, 2013 at 17:14

answered May 2, 2013 at 17:09

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

zzzzBov Over a year ago

@alex23, the point was to show a placeholder of where the prototype would be declared.

wackozacko Over a year ago

You are awesome! Haven't heard of accessors and mutators before. I guess that's why I couldn't find an answer online. What are the differences between Object.defineProperty(obj.prototype, 'x', {}); and obj.prototype = {};. Are they both accepted standards? Is one faster?

zzzzBov Over a year ago

using get x() and set x() in a literal is for convenience. Object.defineProperty is meant for being able to dynamically build accessors and mutators. Just remember that whatever you write using these accessors and mutators won't be backwards compatible.

zzzzBov Over a year ago

@alex23, the point of overriding the prototype with an object literal is to avoid constantly calling Class.prototype.foo = ...; Class.prototype.bar = ...; Class.prototype.baz = ...;. It's such a common convention that I threw it in as a placeholder. You could certainly leave it off if you're not adding methods to the prototype, however you'll need to make sure the Object.defineProperty call happens after you change the prototype if you are overriding the prototype.

Collectives™ on Stack Overflow

javascript setting attribute of prototype to attribute of object

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related