variable in my javascript class is undefined when using an instance of that class

Question

I have declared this javascript class:

var TablixColumns = function(){
this.g = 'wtf';
this.tablixColumns = []; //[];
return {
    addTablixColumn: function(tablixColumn){
        alert(this.g);
         //this.tablixColumns.push(tablixColumn.getTablixColumn());
    }
}
};

my problem is that when I try this: alert(this.g) the alert comes out undefined of course my initial function definition read: this.tablixColumns.push(tablixColumn.getTablixColumn());

but then I get the error that reads something like "No Method push of undefined"

what's weird is I have this class declaration:

         var TablixColumn = function(){
            columnWidth = '<Width>3.135cm</Width>'; //default width value

            return{
                setColumnWidth: function(width){
                    this.columnWidth = '<Width>' + width + 'cm</Width>';
                },
                getTablixColumn: function(){
                    return '<TablixColumn>' + this.columnWidth + '</TablixColumn>';
                }
            }
        };

and the TablixColumn class works fine, and yes, I have declared this.g and this.tablixColumns without the 'this.' part, but it's just refusing to work! I'm going to kill someone if this doesn't work tonight can someone help me please?

If you return an Object from a constructor, that will be the instance when used with the new operator, and therefore anything using this in the constructor will be forgotten, and anything using this in the Object will reference that object and not variables from the constructor. — Paul S.
– Paul S., Commented Jan 27, 2013 at 16:39
Do you call your constructor function with or without new? — Bergi
– Bergi, Commented Jan 27, 2013 at 16:45
Please read developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/…, developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/… and yuiblog.com/blog/2006/11/13/javascript-we-hardly-new-ya — Bergi
– Bergi, Commented Jan 27, 2013 at 17:02

David G · Accepted Answer · 2013-01-27 17:06:40Z

1

You need to set a reference to the current object (this) outside the nested function expression. Here's how your code should look:

var TablixColumns = function() {
    ...
    var self = this;

    return {
        addTablixColumn: function(tablixColumn) {
            alert(self.g);
        }
    };
};

You can even set a property to the returned object literal if you want:

// ...
    return {
        g: 'wtf',
        addTablixColumn: function(tablixColumn) {
        alert(this.g); // 'wtf'
        }
    };
// ...

Note that you shouldn't use TablixColumns as a constructor if you're returning from it like this. You're using two idioms here; prototypal inheritance and the module pattern. Are you going to instantiate the constructor with new? If so, then don't return the object literal. Rather, set the methods on the prototype of the function:

var TablixColumns = function() {
    this.g = 'wtf';
    this.tablixColumns = [];
};

TablixColumns.prototype.addTablixColumn = function addTablixColumn() { ... };
TablixColumns.prototype./* ... */

...

Otherwise, don't use this inside the constructor. Simply make the properties normal variables.

edited Jan 27, 2013 at 17:06

answered Jan 27, 2013 at 16:39

David G

97.6k41 gold badges173 silver badges258 bronze badges

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

1 Comment

Bergi Over a year ago

If he returns an object from the constructor, he should not use the instance this at all

pythonian29033 · Accepted Answer · 2013-01-27 17:07:37Z

0

Okay guys so I figured out my problem:
all the references to variables of the current instance should not have been preceded by the this. keyword so this is how my declaration looks now:

        var TablixColumns = function(){
           g = 'wtf';
           tablixColumns = []; //[];
           return {
               addTablixColumn: function(tablixColumn){
                   alert(g);
                   tablixColumns.push(tablixColumn.getTablixColumn());
               }
           }
        };

Thanks @Bergi for pointing this out

answered Jan 27, 2013 at 17:07

pythonian29033

5,2175 gold badges34 silver badges57 bronze badges

Collectives™ on Stack Overflow

variable in my javascript class is undefined when using an instance of that class

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related