Accessing Javascript object attribute within method

Question

function Card(styleAttr, cardInfo)
{
    //Attributes
    this.styleAttr = styleAttr;
    this.cardInfo = cardInfo;

    //Functions


    constructCard(this.styleAttr);
}

function constructCard(styleAttr) {

    var cardCSS = {
                    'width':styleAttr.width,
                    'height':styleAttr.height,
                    'background-color':'black'
                  }


    $('<div class="Card"></div>').appendTo('body').css(cardCSS);
}

Hi, this Card class get's two other object's as it's parameters. One of them is styleAttr which contains a property named 'width'. Unless I pass this object to the constructCard, I cannot access the styleAttr.width property. The above example works. But if I do this:

function constructCard() {

    var cardCSS = {
                    'width': this.styleAttr.width, //Undefined
                    'height':styleAttr.height,
                    'background-color':'black'
                  }


    $('<div class="Card"></div>').appendTo('body').css(cardCSS);
}

Mostly code in other languages so I'm not sure, do I have to bind the function constructCard to the class to be able to access it's properties or am I forced to pass the object's to get the values. Or am I supposed to make them global variables?

It must be something simple I didn't catch from the Moz Doc's.

Thanks

Pablo Fernandez · Accepted Answer · 2011-08-15 01:59:42Z

1

Try:

function Card(styleAttr, cardInfo)
{
    this.styleAttr = styleAttr;
    this.cardInfo = cardInfo;
    this.construct = function () {
      var cardCSS = { 'width':this.styleAttr.width, 'height':this.styleAttr.height, 'background-color':'black' }

      $('<div class="Card"></div>').appendTo('body').css(cardCSS);
    }
}

And then you use it like this:

var card = new Card(styleAttr, cardInfo);
card.construct();

answered Aug 15, 2011 at 1:59

Pablo Fernandez

106k59 gold badges196 silver badges234 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patrick.SE Over a year ago

So it seems this will be a two-step object construction. I was aiming at having everything set-up once with a single new call since the object is created but not technically ready yet. I mean, an extra step someone will have to do to use the object doesn't sound right even if it's documented. Actually then you might say I should do this processing right inside the constructor, but I kind of wanted to separate it into a function because it was kind of bloating the constructor. I'll have to experiment.

RobG · Accepted Answer · 2011-08-15 02:43:35Z

0

Nothing wrong with plain old prototype inheritance:

function Card(styleAttr, cardInfo) {
    //Attributes
    this.styleAttr = styleAttr;
    this.cardInfo = cardInfo;
}

Card.prototype.constructCard = function () {

    var cardCSS = {
                    'width': this.styleAttr.width,
                    'height': this.styleAttr.height,
                    'background-color':'black'
                  };


    $('<div class="Card"></div>').appendTo('body').css(cardCSS);
}

Then:

var card_0 = new Card(..., ...)
card_0.constructCard();

answered Aug 15, 2011 at 2:43

RobG

148k32 gold badges180 silver badges216 bronze badges

1 Comment

Patrick.SE Over a year ago

Thanks, to both of you, this is closer to C syntax so I prefer it.

Collectives™ on Stack Overflow

Accessing Javascript object attribute within method

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related