javascript object - why undefined properties?

Question

Why does this code produce an undefined for setMedium and setLarge? I would like these to look like similar methods to setSmall. What do I have to do to correctly define these as methods?

function Box() {
    this.length = 14;
    this.width = 10;
    this.height = 6;
    this.setSmall = function (){
        this.length = 14;
        this.width = 10;
        this.height = 6;
    }
    this.setMedium = setBoxDimensions(16,14,6);
    this.setLarge = setBoxDimensions(24,14,6);
    this.initBoxDimensions = this.setSmall;

    function setBoxDimensions(length, width, height){
        this.length = length;
        this.width = width;
        this.height = height;
    }
}
var newBox = new Box();
newBox.setSmall();
console.log(newBox);

this.setMedium = function() { setBoxDimensions.call(this, 16, 14, 16); }; — Ja͢ck
– Ja͢ck, Commented Nov 15, 2014 at 2:18

Pointy · Accepted Answer · 2014-11-15 01:54:13Z

3

Your initialization statements like this:

this.setMedium = setBoxDimensions(16,14,6);

are calling the function "setBoxDimensions". If you want "setMedium" to be a call to "setBoxDimensions" with particular arguments, you need to make it be a function to do that:

this.setMedium = function() {
    this.setBoxDimensions(16,14,6);
}.bind(this);

Whenever you mention a function and follow that by a parenthesized list of arguments, you're making a function call then and there.

The .bind() function used above arranges for this to be correctly set in the anonymous wrapper function. An alternative that will work in really old browsers is:

var that = this;
this.setMedium = function() {
    that.setBoxDimensions(16, 14, 6);
};

answered Nov 15, 2014 at 1:54

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

3 Comments

guest Over a year ago

When I did this, I was able to set the functions but when I call the method setMedium, the length/width/heights are not set correctly. I got the following object back after calling setMedium: Box {length: 14, width: 10, height: 6, setSmall: function, setMedium: function…}

user1106925 Over a year ago

his setBoxDimensions isn't a property on the object, so this won't work. Also, .bind() won't be needed. He can just set it as a property and then call it from the this value within .setMedium function that you created.

guest Over a year ago

@squint: not sure what you mean, can you clarify? I got an error with pointy's code

3 revs user1106925 · Accepted Answer · 2014-11-15 02:31:50Z

First, you need to assign a function to an object. Right now you're invoking a function, not assigning it.

If you want to invoke setBoxDimensions with static arguments, then you assign an anonymous function to this.setMedium/Large and have that invoke setBoxDimensions.

But it also seems that you don't want setBoxDimensions to be exposed. In that case, you need to invoke it via the .call() method, which lets you set its this value.

function Box() {

    // use the setBoxDimensions since we have it.
    this.setSmall = function (){
        setBoxDimensions.call(this, 14,10,6);
    }

    this.setSmall(); // to initialize instead of repeating the code above

    // assign anonymous functions that invoke `setBoxDimensions`
    this.setMedium = function() {
        // call setBoxDimensions, and set its `this` to the current `this`
        setBoxDimensions.call(this, 16,14,6); 
    }
    this.setLarge = function() {
        // call setBoxDimensions, and set its `this` to the current `this`
        setBoxDimensions.call(this, 24,14,6);
    }

    this.initBoxDimensions = this.setSmall;

    function setBoxDimensions(length, width, height){
        this.length = length;
        this.width = width;
        this.height = height;
    }
}
var newBox = new Box();
newBox.setSmall();
console.log(newBox);

If you wanted setBoxDimensions to be a publicly exposed method, then you can set it on this. Also, it's probably a good idea to take advantage of prototypal inheritance here.:

function Box() {
    this.setSmall();
}

Box.prototype.setSmall = function (){
    this.setBoxDimensions(14,10,6);
}
Box.prototype.setMedium = function() {
    this.setBoxDimensions(16,14,6); 
}
Box.prototype.setLarge = function() {
    this.setBoxDimensions(24,14,6);
}

Box.prototype.initBoxDimensions = Box.prototype.setSmall;

Box.prototype.setBoxDimensions = function(length, width, height){
    this.length = length;
    this.width = width;
    this.height = height;
}

var newBox = new Box();
newBox.setSmall();
console.log(newBox);

Awesome! this totally works. I always read about apply and call and then always forgot because I never used this technique. Thanks!

Gabriel · Accepted Answer · 2014-11-15 01:53:14Z

1

because setBoxDimensions does not return a value. Also the context of setBoxDimension is the global object.

answered Nov 15, 2014 at 1:53

Gabriel

18.8k2 gold badges40 silver badges45 bronze badges

Comments

plalx · Accepted Answer · 2014-11-15 02:19:28Z

1

I think that what you are trying to achieve is called partial function application, which is basically creating a derived function from an exisiting one, but that will be called with predefined parameters.

this.setMedium = setBoxDimensions.bind(this, 16,14,6);
this.setLarge = setBoxDimensions.bind(this, 24,14,6);

answered Nov 15, 2014 at 2:19

plalx

43.8k7 gold badges77 silver badges94 bronze badges

1 Comment

plalx Over a year ago

@squint Indeed, lol... not sure what I was thinking ;) It's probably because I am so used to call private functions using call that it got in the way =P

Collectives™ on Stack Overflow

javascript object - why undefined properties?

4 Answers 4

3 Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related