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!

Answer 1

“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.