Javascript object literal, how to use 'this' to reference a variable in the object

Question

Possible Duplicate:
“this” inside object

I'm trying to make an object literal for a couple of default options for a jQuery plugin that I'm working on:

  var defaults = {

            r: 5,
            top: this.r,
            bottom: this.r,
            topleft: this.top,
            topright: this.top,
            bottomleft: this.bottom,
            bottomright: this.bottom


        };

when I reference the defaults.top it is undefined

anything I can do to make this work? Or perhaps a different approach? I need it to be an object literal.

Added:

It is (default object), the way it's cascading down as you can see, was intended to be some what of a short hand technique. For example, if you would like to define all corners to be the same, you would use {r: 5} but if you want the top and bottom to be different {top: 5, bottom: 1} again, individually {topleft: 5, topright:2, bottomleft: 3, bottomright:19 } I apologize for not making this clear, but am very grateful for your answers.

ANSWERED: This is what I ended up doing

if(o.topleft == undefined || o.topright == undefined || o.bottomleft == undefined || o.bottomright == undefined){
                if(o.top == undefined || o.bottom == undefined){
                    if(o.r == undefined){
                        o.topleft = 5;
                        o.topright = 5;
                        o.bottomleft = 5;
                        o.bottomright = 5;
                    }else{
                        o.topleft = o.r;
                        o.topright = o.r;
                        o.bottomleft = o.r;
                        o.bottomright = o.r;  
                    }
                }
                else{
                    o.topleft = o.top;
                    o.topright = o.top;
                    o.bottomleft = o.bottom;
                    o.bottomright = o.bottom;
                }
            }

supper sloppy, but hey it worked! Thank you for all your help! I chose the answer because that explanation led me to do it this way!

You need it to be an object literal, or you need it to be an object? — Ignacio Vazquez-Abrams, Aug 12 '12 at 07:29
You know, if it works better with an object I guess it can work, but I would like it to be simple enough to do something like this `$(selector).myPlugin({r:10});` or `$(selector).myPlugin({top:10, bottom: 5});` — Philll_t, Aug 12 '12 at 07:32
you will find this useful http://stackoverflow.com/a/7043822/205585 — Senthil Kumar, Aug 12 '12 at 07:32
**@Senthil Kumar**, exactly! -> `var def = {}; def.r = 5; def.top = def.r` — elclanrs, Aug 12 '12 at 07:35

score 3 · Accepted Answer · answered Aug 12 '12 at 07:35

"when I reference the defaults.top it is undefined"

That's because this doesn't refer to the object you're creating, it is the this from whatever scope that code is running in.

Object literal syntax does not allow you to set values by referencing other properties in the same object - the object doesn't exist yet. You can reference other variables or functions declared before the object literal. So if you need all the properties to be the same like in your example then you can do this:

var val = 5,
    defaults = {
            r: val,
            top: val,
            bottom: val,
            topleft: val,
            topright: val,
            bottomleft: val,
            bottomright: val
    };

Or create some of the properties with an object literal and set the rest afterwards:

var defaults = {
        r : 5
    };

defaults.top = defaults.bottom = defaults.r;
defaults.topleft = defaults.topright = defaults.top;
// etc

Obviously the latter is more suited to setting some properties to one value and other properties to another value. (Though again in your example all properties are the same.)

Either way gives you the same object in the end (an object literal is just a shortcut way to create objects).

" I would like it to be simple enough to do something like this $(selector).myPlugin({r:10}); or $(selector).myPlugin({top:10, bottom: 5}); "

Well you can still call the plugin with an object literal as a parameter. But the defaults object (which I assume is defined inside the plugin) can be defined using other techniques.

It is (`default` object), the way it's cascading down as you can see, was intended to be some what of a short hand technique. For example, if you would like to define all corners to be the same, you would use `{r: 5}` but if you want the top and bottom to be different `{top: 5, bottom: 1}` again, individually `{topleft: 5, topright:2, bottomleft: 3, bottomright:19 }` I apologize for not making this clear, but am very grateful for your answer. You say there are other ways? — Philll_t, Aug 12 '12 at 07:55
I figured you wanted a cascading effect, so I tried to show that in my second example. _"You say there are other ways?"_ - Well other than the two techniques shown in my question, you could use a [constructor function](https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Using_a_constructor_function). You don't necessarily have to do all of an object's properties in the same way, you can mix and match. (E.g., start with a constructor function, then add some extra properties, then use [`$.extend()`](http://api.jquery.com/jquery.extend/) to mix in an object literal...) — nnnnnn, Aug 12 '12 at 11:13

Javascript object literal, how to use 'this' to reference a variable in the object

1 Answers1