Question

In JavaScript you can define getters and setters by using Object.defineProperty(). I am wondering if it is possible to extend or use the prototype of this to extend its functionality. Here is an example:

I start off a variable called color:

Object.defineProperty(window, 'color', {
    get: function() {
        return [_color.red,_color.green,_color.blue,_color.alpha];
    },
    set: function(val) {
        _color.red = val[0];
        _color.green = val[1];
        _color.blue = val[2];
        _color.alpha = val[3];
    }
});

This allows for me to both set and get the color by passing rgba arrays to and from the variables. Here is how I would use this:

color = [0,127,255,255];
alert(color);
//alerts [0,127,255,255]

Now I also want to be able to edit these variables through accessing each variable individually.

color.r = 255;
alert(color);
//alerts [255,127,255,255]

I am at an impasse at this moment because I don’t know what I can do to create this. I would think either using color.prototype.r or something similar would work, but I can’t get it to. Is it possible to do something like this?

Answer 1

You have to create an interim object extended from array to do it specifically.

Here you go:

var __color = {red:0,green:0,blue:0,alpha:1};
function createGetMethod(prop){
    return function(){return __color[prop]};
}
function createSetMethod(prop){
    return function(val){__color[prop]=val};
}
function createDescritorProperty(prop){
    return {
        get: createGetMethod(prop),
        set: createSetMethod(prop)
    }
}

var _color_descriptor = {
    red:createDescritorProperty('red'),
    green:createDescritorProperty('green'),
    blue:createDescritorProperty('blue'),
    alpha:createDescritorProperty('alpha'),
    length:{
        value:4,
        writable:false
    }
}
//setup numbered values
_color_descriptor[0]=createDescritorProperty('red');
_color_descriptor[1]=createDescritorProperty('green');
_color_descriptor[2]=createDescritorProperty('blue');
_color_descriptor[3]=createDescritorProperty('alpha');

var _color = Object.create(Array.prototype, _color_descriptor); //extends array


Object.defineProperty(window, 'color', {
    get: function() {
        return _color;
    },
    set: function(val) {
        _color.red = val[0];
        _color.green = val[1];
        _color.blue = val[2];
        _color.alpha = val[3];
    }
});

window.color = [255,255,255,0];
alert(window.color);
window.color.red=10;
alert(window.color);

Hope it works! 😀