Is there a way to proxy variables within a javascript object?

Question

Given that I am using John Resig's class (found here: Class), is there a way for a javascript object to proxy it's variables to another object?

Example:

var Car = Class.extend({

    init: function(mileage, color, type) {
         this.mileage = mileage;
         this.color = color;
         this.type = carDatabase[type];
    }
));

// This would be loaded in as a datasource, not sitting in global 
// space like this. 
var carDatabase = {
     "Falcon": {
        "year": 2013,
        "engine": "Inline 8",
        "company": "Ford"
     },
     "Commodore": {
        "year": 2012,
        "engine": "V8",
        "company": "Holden"
     },
     // etc etc
};

// Using the Car class somewhere:
var myCar = new Car(10000, "blue", "Falcon");
console.log(myCar.color); // blue
console.log(myCar.type.year); // 2013
console.log(myCar.type.company); // Ford

So given the example above, can I proxy forward the type into the Car class itself without duplicating the contents of the type.

Ideally I would rather type myCar.company, instead of myCar.type.company for consistency of the Class.

I know that underscore and jQuery both offer extend methods, but they seem to duplicate the content into the original object. I have also considered the fly weight pattern (of which I would argue is overkill, and I would come to the same sticking point as above).

@dc5's answer is correct, but it will probably perform worse than copying the data, and have less browser support. — Brigand
– Brigand, Commented Aug 18, 2013 at 4:50
why not just use a buffer? var car = myCar.type; then use car.year ... — technosaurus
– technosaurus, Commented Aug 18, 2013 at 7:26
@technosaurus Because car would then miss things such as color/mileage which are particular to that one instance. The other elements are shared (such as engine and company) but elements/properties such as mileage only pertain to a particular car — Chris
– Chris, Commented Aug 18, 2013 at 7:52

dc5 · Accepted Answer · 2013-08-18 05:20:20Z

2

You can use defineProperty which has support for defining get/set methods for a property among other things.

The MDN article referenced also has a compatibility table, but it is generally supported in recent versions of all browser with some limitations.

Since you mentioned John Resig, he has a good blog post "ECMAScript 5 Objects and Properties" that is a bit older, but still a good read. It was written in May, 2009 and he states early on in the post that some of the examples and specs may change.

edited Aug 18, 2013 at 5:20

answered Aug 18, 2013 at 4:44

dc5

12.5k2 gold badges37 silver badges47 bronze badges

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

Comments

Angel Santiago · Accepted Answer · 2018-11-03 07:54:19Z

1

Yes. Using ES6 Proxy() you can create traps for property get and set events.

const handler = {
    get(object, property) { 
        if(object.hasOwnProperty(property)){
            for(var prop in object[property]){
                this[prop] = object[property][prop] //set class instance props
            }               
        }
        return object[property]; // don't need to return
    }
};


var carDatabaseProxy = new Proxy(carDatabase, handler)

class Car {
    constructor(mileage,color,type){
         this.mileage = mileage;
         this.color = color;
         carDatabaseProxy[type]; // just need to get 
    }
}

answered Nov 3, 2018 at 7:54

Angel Santiago

413 bronze badges

Collectives™ on Stack Overflow

Is there a way to proxy variables within a javascript object?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related