Question

I’ve never dabbled in making javascript object like this but I think I have a good reason.

Here is my example:

x = new Something(pallet,['blue','green','orange']);
x.try(['blue']);

I want to make a object that sets up two variables pallet and the colors array.

Then in the try function I want to pass an array but in the function I’d like access to pallet and the colors object. Can someone tell me if this is possible? Perhaps a little demo or tutorial?

Answer 1

function Something(pallet, colors) {
var myColors = colors;
var myPallet = pallet;

function getColors() {
    for (var i = 0; i < myColors.length; i++) {
        document.write(myColors[i] + "<br />");
    }
}

return {
    getColors: getColors
};
}

var mySomething = new Something('myNewPallet', ['green', 'red', 'blue']);
mySomething.getColors();

Okay, so what we are doing here is creating a closure and then returning the getColors function to the person instantiating the Something object. You can read about closures here and here. Basically, though, you are “closing” over the colors and pallet members and, because getColors exists within the context of Something(), it has access to all of Something’s members. Then, by returning that function back to the caller, we’re allowing them to call that functionality with an object that has “captured” their pallet and color list.

Keep in mind that this was a very, very high level view of closures in general and the Revealing Module pattern specifically. Read the links I included and monkey around on this fiddle I made on JSFiddle. I think you’ll be pleased once you get your head around it.

It seems like you are trying to make a Pallet object, so I created a new fiddle for you.

Here is the code:

function Pallet(palletName, palletColors) {
    this.name = palletName; //name is now a property of Pallet
    this.colors = palletColors; //colors is now a property of Pallet
}

Pallet.prototype.getColor = function(color) {
    //access Pallet properties using the 'this' keyword 
    //ex. this.colors or this.name
    if (this.colors.indexOf(color) > -1) {
        return 'Color found'; //Or whatever you need to do.
    }

    return 'Color not found'; //Or whatever you need to do.
};


var myPallet = new Pallet('myNewPallet', ['green', 'red', 'blue']);
document.write(myPallet.getColor('red'));​ //using document.write for simplicity