creating a object with shared variables

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?

`try` is a JavaScript keyword. Don't use it as a property name. :) — cdhowie, Nov 11 '12 at 04:05
possible duplicate of [How do you define an OOP class in JavaScript?](http://stackoverflow.com/questions/2221401/how-do-you-define-an-oop-class-in-javascript) — Felix Kling, Nov 11 '12 at 04:18
@cdhowie Well, it's fine as a property name in using square brackets, and fine in either form in IE9/everything-else-that-matters. — gsnedders, Nov 11 '12 at 18:58

score 1 · Answer 1 · answered Nov 11 '12 at 04:42

var Something = function( pallet, colors){
    this.try = function(arr){
        //stuff
    }
};

That's a constructor function, which you can then use as you describe. Try will have access to pallet and colors. As mentioned in the comments though, try is not a great method name because it is a reserved word.

score 1 · Accepted Answer · edited May 23 '17 at 12:04

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

Whats the reasoning behind the my versions of the variables within `something()`? — ThomasReggi, Nov 11 '12 at 05:45
I didn't want to create myPallet and myColors as properties of the Something object, so I just created them as simple variables. The 'my' is just a convention I use to prefix an object I'm using. If I knew more about your project, I'd make the names more appropriate. For example, you could name them "colorCollection" or "colorPallet". It's up to you. — elucid8, Nov 11 '12 at 05:50
/facepalm HAH! You meant why am I using them? They are simply there to hold the values passed in to your constructor so they can be accessed by the the getColors function. Technically, you can just access the arguments themselves, but for the sake of this example I named them explicitly. — elucid8, Nov 11 '12 at 05:55
No need for `document.write` (I'm not the server) and I prefer returning the value in `getColors()`, my new question would be how to take `getColors()` out of this `something()` function using `Something.prototype.getColors()` and still keeping the variables accessible. Know how? — ThomasReggi, Nov 11 '12 at 08:00
Oh and thank you for all the work you put into this, thanks so so so so much! — ThomasReggi, Nov 11 '12 at 08:01
I think I found a way `something()` would need to contain `this.colors = colors` I hate this is there another way? — ThomasReggi, Nov 11 '12 at 08:04

cdhowie · Answer 3 · 2012-11-11T18:53:37.013

-1

Avoid using new -- in my experience, I've found that factory methods are more robust. For example, you can accomplish what you ask by doing this:

function Something(pallet, colors) {
    var that = {};

    that.foo = function (moreColors) {
        // Here you can access pallet, colors, and moreColors.
        // Use "that" to refer to the current object, not "this".
    };

    return that;
}

x = Something(somePallet, ['blue', 'green', 'orange']);
x.foo(['blue']);

edited Nov 11 '12 at 18:53

answered Nov 11 '12 at 04:07

cdhowie

158,093
24
286
300

2

You are assigning `foo` to `window`... not very good either. There is no reason to *avoid* using `new`. Maybe you want `var that = {};`. – Felix Kling Nov 11 '12 at 04:12
Yes, that is what I meant and I've fixed it. I've avoided `new` in my own development practices because it's too easy to cause major issues for exactly the reason that you pointed out; if you forget the `new` once then you have just clobbered another object. – cdhowie Nov 11 '12 at 18:54

creating a object with shared variables

3 Answers3